I am trying to get some google charts on my website from data in a MySQL database via JSON encoding. Having checked several forums my json encoded data looks to be in the correct format but the google.visualization.DataTable part does not seem to do anything.
My main code is as follows:
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">google.load('visualization', '1', {'packages':['corechart', 'table', 'gauge']});</script>
<script type="text/javascript">
function dataSelect(option1) {
var option2 = "";
// create graphs
switch (option1){
case "logged":
option2 = "logged";
// Get Logged Graph Data
var jsonLoggedGauges = $.ajax({
url: "getLoggedGaugeData.php",
dataType: "json",
async: false
}).responseText;
//document.write(jsonLoggedGauges);
var gaugeData = new google.visualization.DataTable(jsonLoggedGauges);
// Draw Gauges
var gaugeChart = new google.visualization.PieChart(document.getElementById('gauge_div'));
var gaugeOptions = {width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};
gaugeChart.draw(gaugeData, gaugeOptions);
break;
}}
</script>
My getLoggedGaugeData.php is as follows:
<?php include 'dbconnect.php';
$result = $dbhandle->query("SELECT currentTemp, feelsLike, windSpeed, humidity, pressure FROM `logged` ORDER BY dateTime DESC LIMIT 1");
$table = array();
$table['cols'][] = array('id' => "", 'label' => "Label", pattern => "", 'type' => 'string');
$table['cols'][] = array('id' => "", 'label' => "Value", pattern => "", 'type' => 'number');
while ($nt = $result->fetch_assoc())
{
$table['rows'][]['c'] = array( array('v' => 'Current Temp'), array('v' => $nt['currentTemp']));
$table['rows'][]['c'] = array( array('v' => 'Feels Like'), array('v' => $nt['feelsLike']));
$table['rows'][]['c'] = array( array('v' => 'Wind Speed'), array('v' => $nt['windSpeed']));
$table['rows'][]['c'] = array( array('v' => 'Humidity'), array('v' => $nt['humidity']));
$table['rows'][]['c'] = array( array('v' => 'Pressure'), array('v' => $nt['pressure']));
}
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
echo $jsonTable;
?>
If I remove the // from my document.write(jsonLoggedGauges); to activate it I get data back as follows, which looks correct:
{"cols":[{"id":"","label":"Label","pattern":"","type":"string"}, {"id":"","label":"Value","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Current Temp"},{"v":15.3}]},{"c":[{"v":"Feels Like"},{"v":13.5}]},{"c":[{"v":"Wind Speed"},{"v":5}]},{"c":[{"v":"Humidity"},{"v":68}]},{"c":[{"v":"Pressure"},{"v":1002.1}]}]}
Any advice would be greatly appreciated as I am at a complete loss as to why it is not working.
