Improvement idea for charts and JS

Hi guys,

I’ve been struggling a bit with certain charts I try to display when using Grafana with an InfluxDB backend at the company I work for. The thing is, for a period of, say, 1 month of data to be displayed, it gets too heavy for the browser and it either crashes or keeps asking me if I want to continue the script (whether I’m using Chrome or Firefox, respectively). I think this is happening because there are too many datapoints to show in the chart.

Now, thinking about the datapoints to be shown in the chart, there’s no point in showing more datapoints than there are pixels in the screen to plot them; when charts try to draw these, they simply overlap datapoints vertically, hence hiding part of the data. So, say, if you have a chart box of 200px and you try to plot 400 datapoints, there’s no way to precisely show all 400 datapoints, since you can have only 1 per pixel at max. So a smart way to deal with this is to just reduce the amount of datapoints to the amount of pixels available to plot them, according to the chart box width. The reduction can be either by filtering out part of the data or by averaging the datapoints. So, in that example, if you reduce 400 datapoints to only 200, the user’s browser has to deal with half the datapoints, hence processing much faster at the client-side.

Please let me know what you think. If the Grafana team is able to implement this, at least as a feature (like a button I can click to keep reducing the amount of data), it would be very helpful.


This sounds like $__interval

Thanks for the hint, @alexandrul , I didn’t know about that feature. Does it make sense to aggregate data by default, perhaps, then? Anyway, I’ll try to understand how to use that variable, it might just work for me :slight_smile: