Working on my google charts which get the values: Time, date, PH and
Chlorine from my phpmyadmin database and visualize these data. The Problem
I have came upto is that I get the error: All series on a given axis must
be of the same data type. Now I am very unsure if the formatting of the
date and time is correct. This is how my table looks like, one row:
{"cols":[{"label":"Time","type":"date"},{"label":"Date","type":"date"},{"label":"PH","type":"number"},{"label":"temperature","type":"number"},{"label":"Chlorine","type":"number"}],"rows":[{"c":[{"v":"Date(2014,
> 2, 17, 15, 03, 14)"},{"v":"7.00"},{"v":"34.00"},{"v":"3.40"}]}]}
Here is the code:
<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with
database!!!!");
mysql_select_db("chart", $con);
$sth = mysql_query("SELECT * FROM googlechart");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Time', 'type' => 'date'),
array('label' => 'Date', 'type' => 'date'),
array('label' => 'PH', 'type' => 'number'),
array('label' => 'temperature','type' => 'number'),
array('label' => 'Chlorine','type' => 'number'),
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
// assumes dates are in the format "yyyy-MM-dd"
$dateString = $r['Date'];
$dateArray = explode('-', $dateString);
$year = $dateArray[0];
$month = $dateArray[1] - 1; // subtract 1 to convert to javascript's
0-indexed months
$day = $dateArray[2];
// assumes time is in the format "hh:mm:ss"
$timeString = $r['Time'];
$timeArray = explode(':', $timeString);
$hours = $timeArray[0];
$minutes = $timeArray[1];
$seconds = $timeArray[2];
echo $dateString."<br>";
echo $timeString."<br>";
$temp = array();
$temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes,
$seconds)");
$temp[] = array('v' => (string) $r['PH']);
$temp[] = array('v' => (string) $r['temperature']);
$temp[] = array('v' => (string) $r['Chlorine']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<html>
<head>
<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() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
/*width: 900, height: 900, */
title: 'Visualization',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 12,
vAxis: {title: "Values", titleTextStyle: {italic: false}},
hAxis: {title: "Time", titleTextStyle: {italic: false}},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'vertical'
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
