I am using google chart with PHP. chart is working fine when the page is load for the first time.

155 views
Skip to first unread message

Bakhtiar Nurzaman

unread,
May 20, 2019, 4:40:33 AM5/20/19
to Google Visualization API
But I want to refresh the chart (not the entire page, only the chart), after  "n" seconds, automatically (based on java script intervals), dynamiccal 


this the code

<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = '
SELECT sensors_temperature_data, 
UNIX_TIMESTAMP(CONCAT_WS(" ", sensors_data_date, sensors_data_time)) AS datetime 
FROM tbl_sensors_data 
ORDER BY sensors_data_date DESC, sensors_data_time DESC
';
$result = mysqli_query($connect, $query);
$rows = array();
$table = array();

$table['cols'] = array(
 array(
  'label' => 'Date Time', 
  'type' => 'datetime'
 ),
 array(
  'label' => 'Temperature (°C)', 
  'type' => 'number'
 )
);

while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 $datetime = explode(".", $row["datetime"]);
 $sub_array[] =  array(
      "v" => 'Date(' . $datetime[0] . '000)'
     );
 $sub_array[] =  array(
      "v" => $row["sensors_temperature_data"]
     );
 $rows[] =  array(
     "c" => $sub_array
    );
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

?>

<?php
// ---------------->>>Auto Refresh Page
//$secondsWait = 1;
//header("Refresh:$secondsWait");
?>

<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart()
   {
    var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

    var options = {
     title:'Sensors Data',
     legend:{position:'bottom'},
     chartArea:{width:'95%', height:'65%'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

    chart.draw(data, options);
   }

 setInterval(function() {
       drawChart();
    }, 1000)

  </script>
  <style>
  .page-wrapper
  {
   width:1000px;
   margin:0 auto;
  }
  </style>
 </head>  
 <body>
  <div class="page-wrapper">
   <br />
   <h2 align="center">Display Google Line Chart with JSON PHP & Mysql</h2>
   <div id="line_chart" style="width: 100%; height: 500px"></div>
   <script src="jquery-1.11.3.min.js"></script>
  </div>
 </body>
</html>

Daniel LaLiberte

unread,
May 20, 2019, 8:09:31 AM5/20/19
to Google Visualization API
You appear to be calling drawChart() before the library has finished loading.  Replace your setOnLoadCallback and setInterval calls with this:

google.charts.setOnLoadCallback(function() { 
  setInterval(function() {
       drawChart();
    }, 1000);
});


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/42508670-110b-45e7-a26f-16dbb6fcbd44%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Bakhtiar Nurzaman

unread,
May 20, 2019, 9:23:12 PM5/20/19
to Google Visualization API
that's not working. data not change when updated
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages