// Connect to server and select database.
$con=mysql_connect("$host", "$username")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$data = mysql_query("select SUM(Distance) as Distance, CAST( Time AS date) as Time from gprs where DeviceId=25 and Time between '2013-08-08' and '2013-09-31' group by CAST(Time AS date) order by CAST( Time AS date)")
or die(mysql_error());
$table = array();
$table['cols'] = array(
array('label' => 'TIME', 'type' => 'string'),
array('label' => 'Distance', 'type' => 'float')
);
$rows = array();
while ($nt = mysql_fetch_assoc($data))
{
$temp = array();
$temp[] = array('v' => (string)$nt['TIME']);
$temp[] = array('v' =>(float) $nt['Distance']);
$rows[]['c'] = $temp;
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 300px;"></div>
</body>
</html>