Refresh Google Charts without redrawing the entire chart? - javascript

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.

Related

d3js v4: Performance problems using d3js on real time line chart

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 ?

html page getting hanged with to many d3.js radar chart

I am trying to create a radar chart dynamically based on the number of records coming from the server as json data.
For example: my json has 1000 records and I try to create radar chart to show the data but my html page getting hanged.
I tried it and it is working up to 50 charts.
This can't be fixed.
Every single chart you render requires a significant portion of processing time to be built. The more charts you want to render, the more processing time it will take. There's nothing you can do about that.
Either try to condense your data into (significantly) fewer charts, or render an individual chart when a row is selected.
Or, (tell your clients to) get a beast of a machine.

sparklines with real time data

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.

Linking dygraphs.js to d3 charts

I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.

Editable javascript chart - interactively resize bars or pie sections

I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.

Categories