Best way to render 250000 points more efficiently?

[CliffBDev]

trafficstars

I have decreased the stroke size, disabled data labels, and set explicit XAxis type. Only other tips I have found from apexchart.js were to disable animations completely and set the stroke curve. It doesn't look like stroke curve is available in the options but how would I go about completely disabling all animations?

[joadan]

Hi,

I'm no expert but I think render 250 000 data points is probably to much. Is there not an option to aggregate the data?

In Options.Stroke you should be able to set the curve. Turn off animations by setting Options-Chart-Animations.Enable = false. I was not able to verify this in the wrapper, but it should work, if not let me know.

[CliffBDev]

Hey Jordan,

Unfortunately there is not a way to aggregate the data. We are display data that is collected as quickly as once a second and our users like to view it anywhere between 12 hours and 7 days as the total view span.

Average number of pens is probably somewhere around 8-12.

[Sire]

There is no reason to visualize 250.000 points, no one can see the individual points anyway!

I suggest you downsample to perhaps 1-4000 points, there are algorithms that give an almost perfect visualization even with very large downsamples. Largest-Triangle-Three-Buckets (LTTB) is fantastic, see here: https://www.base.is/flot/ Code in various languages here: https://github.com/sveinn-steinarsson/flot-downsample/