Updating google chart periodically

Question

I currently have a static google chart displaying on my web page, and was wondering if there is a way to update it periodically? i.e., add a point every 20 seconds?

I can't seem to find any information on this. Please have had a look at 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); 

          });
      }

Answer 1

A simple approach based on your exact code would be:

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

---

For a more in-depth and customisable approach: (I did this having only basic knowledge of the Charts API though.)

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'm sure there's a better way to do this with a more intimate knowledge of the Charts API, but the logic should work.