I have a HighCharts chart and am displaying a trend that has a value every minute. So in a given day I will have 1440 data points, because 24 hours = 1440 minutes.
This is fine when I am displaying one or two days of data. But if I am displaying 4 weeks I will have 40,000 data points. I can read this data from the server very quickly, but HighCharts takes several minutes to build the graph.
My proposed solution is to interpolate data on the server side so we will have 1000 points over a 4 week period, or one value every 43 minutes. Then, when the user zooms, use AJAX to read data from the server again.
Am I making a mess of this or is this what normally happens? Is there a way to make HighCharts do something like this for me (and quickly)? I have tried the HighCharts DownSample Plugin but the initial slowness (2-3 minutes to build the graph) remains.
In fact, you want to use Highstock, with dataGrouping. Demo here.
In case you can't use Highstock, then it may be hard. However, check this ticket - it's experimental plugin for Highcharts to use canvas for rendering huge amount of points. Of course IE6/7/8 is out of the discussion.
And regarding loading data on demand, check lazy loading article. Yes, it refers to Highstock, but should be possible to use the same solution in Highcharts. Demo here.
Related
I render a chart/line graph with Chart.js where a ping of a server throughout the last month is displayed (a cloud function is ran every hour and the data gets send to a time series database). But accidents happen, and the server is sometimes unreachable. For those times I save the ping as -1. Also sometimes the data is just missing. I need to display those two cases differently. Like, is there any way, to for example color a part of the graph red when the server was offline and with grey when the data is missing? Preferably using Chart.js, but you can suggest any other JavaScript library.
Thank you so much.
With the new version 3 of chartjs which is releasing soon you can set the backgroundColor of the points like this:
backgroundColor: (context) => {return context.dataPoint?.y > 5 ? "green" : "red"}
And then you will have to put the right logic and values there. If you want the line also in different colors you will need to write a custom plugin for that since it is not supported by the default lib
Working example of points: https://jsfiddle.net/Leelenaleee/8bkz96cd/7/
I am using plotly js offline line graphs in HTML, when the json has more data its taking more than one min to load.
We have left nav bar , when switching from one tab to another its taking more time to load the content due to plotly line graphs.
Data for line graph: X-axis having 15 transactions, each transaction has around 5000 points to plot.
Approaches I have tried:
Giving an event listener for HTML on load of the page , minified the files (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages).
Giving “type: scatterGL” for line graphs and plotly.react(id,data,layout) instead of plotly.newPlot(id,data,layout).
By using above approaches also its taking same time.
May I please kindly know if anyone know how the loading time can be reduced for large data.
Thanks,
Bhuvana.
That is a lot of points. 75,000 points means that Plotly is adding DOM elements. That is way too many for any library. Consider using Canvas instead, Plotly has support for it and this example shows how it can handle 1 million points in a scatter plot, no problem.
I have a lot of charts I need to draw with a huge amount of data on bobble plots.
I wonder what is the fastest and the most efficient way to plot them using chartjs.
I made the dots smaller, yet it still takes 5 sec to load the page.
A couple things come to mind:
I would check that nothing else on your page is slowing your load times.
If chart.js is the issue due to the high number of dots, do you need every data point entered? Could you do every other? I'm not sure what your data is, but if you're just looking at trends, this might work for you.
So I am trying to devise a way to create a nifty chart in which the user can zoom. I want to try to create an effect that as the user zooms, the data will become more granular. For example, say we are looking at a count on a date/time.
when you're at default zoom, which is say 3 months, you will see 1 data point every 24 hours. I am trying to get it as you zoom in, and see a smaller chunk for that data to get more granular. Like if you're looking at a day, each hour will get its own data point.
Do you all think it's possible to achieve an effect like this using Jquery Flot? I have all of the data broken down into hours at the beginning, it's just a matter of calculating how much of it should be shown.
I already have the zoom functionality working, but just need to figure out how to make the data change as well.
Thanks!
Flot won't do this automatically; you would have to register a callback on zoom that iterates over the original array to pick out, i.e. every nth sample, then redraws the plot using the results.
I am looking for a chart library in JavaScript.
It have to support Lines (I suppose all charting libraries do that).
I have to support zooming, due to high amount of data.
The problem I have found while using other libraries is scaling the x axis.
I get data by strings:
y=[43,56,34,63....]
x=[24/04/12 22:47,...]
But the number of lines and the interval is specified by the user. Meaning that I can have 50 data or 500 data. The problem comes when I input these dates and times. I cant find a library that will look into the length of the string and then just show maybe 4-5 of them when zoomed out, and show more detailed when zoomed in.
Money is not a problem, but it need to have a trial version.
Edit: I have tried libraries which allow me to set a start date, and then the interval by the points. But my intervals are not constant, so that cant be used either.
Try amCharts. This library supports dates as series. Your job will be to convert your date string into JavaScript Date Object, it's quite a simple task. Here is an example of a chart with date-based data:
http://amcharts.com/javascript/line-chart-with-date-based-data/
Another one with date/time based data:
http://amcharts.com/javascript/area-chart-with-time-based-data/
You can download and try this library.