Mysql to Google Chart with Column Label - php

Question

I am trying to create a google chart with column labels. The following works just fine for me. Except that when i try to use it with a Json datacreated from a mysql table. Would you guys kindly help me out to understand where i am doing wrong.
Working Google Chart code:
<script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['From', 'TotalOrders', 'Quantity'],
['Wk of 9/7/14', 172, 8910],
['Wk of 9/14/14', 121, 5901],
['Wk of 9/21/14', null, null],
['Wk of 9/28/14', null, null]
]);
var formatter = new google.visualization.NumberFormat( {pattern:'#,###'});
formatter.format(data, 1);
formatter.format(data, 2);
mydiv = $("#mychart");
chart = new google.visualization.ComboChart(mydiv[0]);
chart.draw(data, {
width: 600, height: 400, seriesType: 'bars',
chartArea: {left: 60, top: 30, width: 540}
});
rects = mydiv.find('svg > g > g > g > rect');
var row = 0;
for (i = 0; i < rects.length; i++) {
el = $(rects[i]);
if (parseFloat(el.attr("height")) <= 2) { continue; }
aparent = el.parent();
do { // skips 'null' values
text = data.getValue(row++, 1);
} while (text == null && row < data.getNumberOfRows());
if (text) {
text = formatter.formatValue(text);
// see below
pos = getElementPos(el);
attrs = {x: pos.x + pos.width / 2, y: pos.y - 2,
fill: 'black',
'font-family': 'Arial', 'font-size': 11,
'text-anchor': 'middle'};
aparent.append(addTextNode(attrs, text, aparent));
}
}
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function getElementPos($el) {
return {
x: parseInt($el.attr("x")),
width: parseInt($el.attr("width")),
y: parseInt($el.attr("y")),
height: parseInt($el.attr("height"))
}
}
function addTextNode(attrs, text, _element) {
var el = document.createElementNS('http://www.w3.org/2000/svg', "text");
for (var k in attrs) { el.setAttribute(k, attrs[k]); }
var textNode = document.createTextNode(text);
el.appendChild(textNode);
return el;
}
</script>
but when i use it with the following it doesn't work.
$table = array();
$table['cols'] = array(
array('label' => 'From', 'type' => 'string'),
array('label' => 'TotalOrders', 'type' => 'number'),
array('label' => 'Quantity', 'type' => 'Number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string) $r['From']);
$temp[] = array('v' => (int) $r['TotalOrders']);
$temp[] = array('v' => (int) $r['Quantity']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
I can't seem to find what is going wrong here. perhaps you guys will be able to point me to the right direction.

Answer 1

That JSON structure is not compatible with the arrayToDataTable function - you must use the regular DataTable constructor:
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
Also, you should have the json_encode function parse numbers correctly in the output, otherwise they may come out as strings:
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);