Re: Auto refresh with line chart

[asgallant]

In order to auto-refresh your data, you'll have to set up a data source that you can query via an AJAX call.  There are threads on this forum that deal with setting up both the javascript and PHP end of things.

On Wednesday, November 28, 2012 8:16:19 PM UTC-5, Guillaume Brulotte wrote:

I'm getting my data from a database and i want to update my chart each 10 secondes to see the new values and i don't really understand how to do this... So far I have this:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
         <?php $result1 = mysql_query("SELECT heure,etat FROM temperature"); ?>
         var data = google.visualization.arrayToDataTable([
            ['heure', 'etat'],
            <?php   while($row = mysql_fetch_array($result1)){ ?>
            ['<?php echo $row['heure']?>' , <?php echo $row['etat']?>],
            <?php } ?>
         ]);

         <?php $resultHumid = mysql_query("SELECT heure, etat FROM humidite"); ?>
         var dataHumit = google.visualization.arrayToDataTable([
            ['heure', 'etat'],
            <?php   while($row = mysql_fetch_array($resultHumid)){ ?>
            ['<?php echo $row['heure']?>' , <?php echo $row['etat']?>],
            <?php } ?>
         ]);

         var options = {
            title: 'Température',
            chartArea:{left:50,top:50,width:"200%",height:"50%"},
            hAxis: {top:0,title: 'Heure'}

         };

         var optionsHumid = {
            title : 'Humidité',
            chartArea:{left:50,top:50,width:"200%", height:"50%"},
            hAxis: {top:0,title: 'Heure'}
         };

         var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
         var chart2 = new google.visualization.LineChart(document.getElementById('chart2_div'));
         chart.draw(data, options);
         chart2.draw(dataHumit, optionsHumid);
      }
    </script>

Can anyone help me?

Thanks