Change color of specific scatter points

[rafalS]

Hi!

Sorry for a late response. Unfortunately, I haven't found a proper solution to show loading while zooming yet. The problem is that the chart just freezes and I haven't found a place to fire any code just after release the mouse button and before freezing the chart. It was simpler with updating points. I will let you know as soon as I find the solution

Best regards!

[Nitesh.Nagpal]

Hey rafalS,

Thank you so much for helping in this

I have one question, as you know I am working on large number of data points and on click I am updating the data(changing color of some points) under series object (suggested by you), so my doubt is does updating data takes much time as compared to redrawing the chart with new data or rendering chart with different points of different colors takes time.

I want to know this, because if update takes time to adjust the already rendered chart in that case I'll redraw the chart with the updated data getting from my function (function is returning data in <1sec).

Please help.

Thank You

[rafalS]

Hmmm, you can try this approach. For example I created 2 div's with 2 charts and on point click I just change style to none and block. Take a look at jsFiddle: http://jsfiddle.net/BlackLabel/ngjetyd8/
it's faster than updating points, but you need to create 2 different charts at the beginning.

Rafał

[Nitesh.Nagpal]

Thank You so much for suggesting me this solution , but in my case user will be clicking multiple times on any point and coloring of scatter points depends on the clicked scatter point, so it will be dynamic every time.

so I am thinking to go with redrawing the chart instead of updating.

[Nitesh.Nagpal]

Hey rafalS,

Hope everything is going good

I want to just confirm that scatter chart with 4k-6k datapoints takes around 4-6 seconds to render the chart with dataLabels enabled true, animation enabled false.

Is this time is proper or we can reduce the rendering time further?

I know we have discussed to use boostJs and some other functionalities.
I have not prepared fiddle as I just want to confirm for time taken by chart to load.

Or is there any other method to load and ideal case simple scatter chart with 4k < 20k datapoints including dataLabels, faster using some properties?

Thank You

[rafalS]

Nitesh,

I'm all right, I hope you too

In our FAQ you can read:

HOW CAN I GET THE BEST PERFORMANCE OUT OF HIGHCHARTS?
When working with series with a high number of data points, there are a few things to consider:

1. First of all, consider using the Boost module.
2. Otherwise, for line plots, it is recommended that you disable point markers, as these will add a performance overhead. See http://highcharts.com/demo/line-time-series.
3. Disabling shadows increases performance, as three shadow elements are created for each shape that includes a shadow.
4. For large column series, it is recommended that you disable the initial animation, plotOptions.column.animation, at least for VML based browsers. The best way to distinguish between fast SVG browsers and slower VML browsers is to use the Highcharts.svg boolean property.

https://www.highcharts.com/docs/getting ... erformance

I hope it helps.
Best regards!

[Nitesh.Nagpal]

Thanks rafalS for this,

I have implemented the disabling the shadow thing, animation false and also improved more performance by disabling the dataLabels in plotOptions and then adding the property of

Code: Select all

dataLabels: {enabled: true}

as you have suggested, to every 10th scatter point while preparing data for chart, so it reduced the rendering time from 4 seconds to around 1 seconds and that's helping us to load the chart faster.

Thanks

[rafalS]

It's good to hear that Regards!