I'm thinking of using the google charts api, in particular column charts and scatter plots. I want to know that can these charts be updated constantly by data it receives from the server via a websocket.

My understanding is that this data will first be added to a data table and then plotted onto a chart. So if data is being updated in the table will this update the chart in 'real time'.

Another question is I'll also have an instance when the columns cannot be defined straight away but again will be updated by the received data; again can google charts handle this.

Thanks

I'm thinking of using the google charts api, in particular column charts and scatter plots. I want to know that can these charts be updated constantly by data it receives from the server via a websocket.

My understanding is that this data will first be added to a data table and then plotted onto a chart. So if data is being updated in the table will this update the chart in 'real time'.

Another question is I'll also have an instance when the columns cannot be defined straight away but again will be updated by the received data; again can google charts handle this.

Thanks

• javascript
• charts
• google-visualization

• If you populate your Google Chart from JavaScript, you can also modify or repopulate the chart from JavaScript. Worst case you might have to redraw the entire chart. Which is not as bad performance-wise as you might think: the entire thing is drawn client-side anyway. – Frank van Puffelen Commented Dec 8, 2012 at 23:49
• @FrankvanPuffelen when I try updating once a second a chart - it almost freezes my Chrome... this brings up a question - is google charts really meant for real time data display? it does seem to work brilliantly with conveniently displaying static data. Did you eventually find a solution for real-time charts? – Dimitry K Commented Mar 9, 2016 at 17:26
• 1 Just modify the DataTable and call draw, seems to perform OK. Have a look at jsfiddle/0w1nbyxw/1. – Dale Anderson Commented Jul 30, 2016 at 4:02

2 Answers 2

I do not know about google charts, but recently I discovered Smoothie Charts. It can do real-time(smooth). The only problem is that I does only work in Chrome, Firefox according to this Introducing Smoothie Charts post.

Or maybe highCharts. A real-time example at jsfiddle.

if you have

var data = new google.visualization.DataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

you can do

data.addRows([2015,10])
chart.draw(data);

and it updates the chart

I made a button that adds data in this JSfiddle:

https://jsfiddle/kdn2ojxb/3/