I'm trying to make a chart software using d3.js and socket.io for measurement data. The measurement data are coming in real time via socket.io and must be drawn in the chart. I am drawing simple line chart with up to 20 different series for different measurement data. I have 50 data points every second, so after a while I have a lot of data points to draw, ( in one hour: 180000) I have to show all the chart data from the very beginning of measurement.
It all works fine, I can zoom in and out, but the performance is going down if more and more data points are arriving.
If new data set arrive, I append it to the data I already have, remove the chart, redraw the chart and rescale the chart and the axis. I am rendering on SVG. After a while the performance breaks down.
Even if I try to reduce the data to be drawn, the performance after a while is still bad.
How can I improve the performance ? Could crossfilter help me ? Is the idea of drawing the whole chart every millisecond completely new good ?
I heard that rendering on SVG is not so performed then on canvas. Is that right ?
Related
I have created a line chart which is zoom/pan enabled, however I am now using "real" data which consists of 60,000+ points and the performance has not surprisingly crashed to 1 - 2 fps.
Does anyone have an approach to render only what is visible when zoomed/panned? I'm nervous to use html5 canvas, is it even possible to use canvas for a line chart with a time domain?
Update.
I'm now using crossfilter.js to filter my data. My basic method, in my zoom handler I filter my whole dataset based on the x.domain() extent (lower and upper boundary) values CrossFilter creates a new array containing only the data that fits into the new domain. This new array is passed to my update function which renders only the visible data!
Also it is worth noting that even HTML5 canvas was struggling to render even 60k points fast enough. At around 90k it stopped working entirely!
How can I create a sparkline with real time data coming from event listener in javascript ?
I tried couple of resources, but none of them gives me a clear understanding of how can I continuously send the data points to sparkline to plot them.
With jQuery.sparkline there is no way to incrementally add points to the graph. Instead you have to redraw the entire graph with each update.
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
I am using the annotated time line chart in google charts API. I have a long time line of data (20 years) and range of the data goes from about 0 to 900,000 (see picture) If you zoom on the most recent year, the max from this set is only about 400,000. So when we zoom in, I don't need the y-axis to go all the way to 900,000, but only to 400,000. This way the chart would be easier to read.
What I would like to achieve is the chart to re-adjust the maximum vertical axis value every time I adjust the zoom.
Zoom in on most recent year:
Before I start hacking my way through this, does anyone know a good way to do this?
Thanks!
Use the scaleType configuration option. Specify value of maximized if you have one series. Specify allmaximized if you have more than one series. This snippet works on the code playground:
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {'scaleType':'allmaximized'});
I'm creating a page where javascript creates random numbers and then draws a Google line chart from it. the idea is that data will continue coming and the chart has to be updated. What I'm doing right now is redraw the chart for every new data addition, which means redrawing the entire chart 20 times a second. This however slows down the process considerably.
What I'm wondering is, is there a way to add a row to Google Charts and take out a row (like shift and push) and have the chart update without redrawing?
If that doesn't work do you guys have suggestions for live data visualization tools?
Google charts are images served by Google's API. There's no way to change just part of an image, you have to load a new image. If you want a chart that changes, look at HighCharts. It's a Javascript charting package that has examples like you want. D3 also is very powerful, but requires more work.