Geek Answers Handbook

Periodic update google chart

I currently have a google static diagram displayed on my web page and I was wondering if there is a way to update it periodically? those. add a point every 20 seconds?

I can not find any information about this. Please view my code below.

function drawAltitudeChart(){ var graph = []; downloadUrl("Map.php", function (data){ var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); var dataTable = new google.visualization.DataTable(); var options = {title:'Altitude (m above sea level)', curveType:'function', legend:{position:'bottom'}, is3d:true }; var chart; for(var i = 0; i<markers.length; i++){ graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; } dataTable.addColumn('string', 'id'); dataTable.addColumn('number', 'Altitude'); dataTable.addRows(graph); chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(dataTable, options); }); }
+6
source share
2 answers

To add a new point every x seconds ...

 for(var i = 0; i<markers.length; i++){ graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; } var chart = new google.visualization.LineChart(document.getElementById('chart_div')); dataTable.addColumn('string', 'id'); dataTable.addColumn('number', 'Altitude'); var array = []; for(var i = 0; i<graph.length; i++){ console.log('in loop'); setTimeout(function(y){ array.push(graph[y]); dataTable.addRows(a); chart.draw(dataTable, options); array = []; }, i*5000, i); }
+1
source

A simple approach based on your exact code would be:

 (function redraw() { drawAltitudeChart(); setTimeout(redraw, 20000); })();

For a more in-depth and customizable approach: (I did this with only basic knowledge of the API diagrams.)

 function AltitudeChart() { this.chart = new google.visualization.LineChart( document.getElementById('curve_chart') ); } AltitudeChart.prototype = { draw: function() { var graph = []; downloadUrl('Map.php', function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); var dataTable = new google.visualization.DataTable(); var options = { title: 'Altitude (m above sea level)', curveType: 'function', legend: { position:'bottom' }, is3d: true }; for (var i = 0; i < markers.length; i++) { graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; } dataTable.addColumn('string', 'id'); dataTable.addColumn('number', 'Altitude'); dataTable.addRows(graph); this.chart.draw(dataTable, options); }); }, refreshDraw: function() { this.drawTimeout = setTimeout(function() { this.draw(); this.refreshDraw(); // recursive call }.bind(this), 20000); // every 20 seconds } }; new AltitudeChart().refreshDraw();

I am sure there is a better way to do this with a deeper knowledge of the charting API, but the logic should work.

+3
source

More articles:


All Articles