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>
--
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 [email protected].
To post to this group, send email to [email protected].
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.
