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.
Related
I'm working on replacing a dynamic chart implemented in highcharts. The current implementation is a line-area chart that expands over time with incoming streaming data, so the replacement needs to be dynamically alterable, and preferrably animated.
Currently I'm looking at D3 for the replacement. There are a few examples I've found which show that there may be something similar which is possible, such as the charts for streaming data found here, but in this example the line is redrawn at every iteration. It's not terribly inefficient as the visualization is limited to a fixed window of data, but in my case a high volume of data needs to be displayed from start to finish as the data streams in. Redrawing the chart at every addition will likely result in rapid performance loss.
In D3, is there a method of adding a single segment to an existing plot that does not require a redraw?
I ended up abandoning D3 as it required too much development to make it as presentable as an interactive chart that was ready out-of-the-box, but I did figure out how to do what I was thinking.
Instead of re-adding a new line with additional points at every iteration, I ended up using a path component which allows additional points to be added progressively. The path does have to be re-rendered and generates a short svg path string, so I'm not exactly sure which method is more efficient, but a short path string reduces complexity of the resulting html in the case that one were to add multiple lines to the plot, one for each segment.
If an addition to the path involves only the generation of a new string using concatenation of the original then I imagine this could be much more efficient than iterating through an array of series data that grows at every update.
The result was fast enough to keep up with streaming data without any visible slowing of the UI, but it was just unfortunate that I needed something a little more developed.
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 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.
Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.
I needed that for myself so here it is: violin plot
As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-