Google Charts: I get json output but still no graph - php

Question

I've finally managed to get my php code working for my google charts column chart. When I run my php I get the following output
{"cols":[{"id":"id","label":"second","type":"number"},
{"id":"threads","label":"threads","type":"number"}],"rows":[{"c":[{"v":1},{"v":1411}]},
{"c":[{"v":2},{"v":1411}]},{"c":[{"v":3},{"v":1409}]},{"c":[{"v":4},{"v":1408}]},{"c":
[{"v":5},{"v":1407}]},{"c":[{"v":6},{"v":1408}]},{"c":[{"v":7},{"v":1408}]},{"c":[{"v":8},
{"v":1410}]},{"c":[{"v":9},{"v":1410}]},{"c":[{"v":10},{"v":1412}]},{"c":[{"v":11},
{"v":1415}]}]}
Using this other post as a guide, here, I believe that my output is correct. However I am not entirely sure since my column chart is still not being displayed, on my webapp.
This is the code I am using to show my chart
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 json = $.ajax({
url: 'databaseQuery.php',
dataType: 'json',
async: false
}).responseText;
var data = new google.visualization.DataTable(json);
var options = {
title: 'Active Threads',
is3D: 'false',
width: 800,
height: 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I have a table the displays fine, which is also getting its data from a mysql server and shows the same data the graph should just in a table.
I have been going over this code and can't seem to find the mistake. Can anyone point the mistake(s) out or suggest a better way of doing it? If the error is in my JSON, what should it look like for it to work properly?
Also the table from my database looks like this
id threads
1 1411
2 1411
3 1409
4 1408
5 1407
6 1408
7 1408
8 1410
9 1410
10 1412
11 1415

Answer 1

There's nothing wrong with your code as shown. I've just created a test page basically cut and paste from your markup and it worked perfectly.
I'd suggest you try replacing the ajax call with inline json initialisation and see if that works for you.
var json = {
"cols":[
{"id":"id","label":"second", "type":"number"},
{"id":"threads","label":"threads","type":"number"}
],
"rows":[
{"c":[{"v":1},{"v":1411}]},
{"c":[{"v":2},{"v":1411}]},
{"c":[{"v":3},{"v":1409}]},
{"c":[{"v":4},{"v":1408}]},
{"c":[{"v":5},{"v":1407}]},
{"c":[{"v":6},{"v":1408}]},
{"c":[{"v":7},{"v":1408}]},
{"c":[{"v":8},{"v":1410}]},
{"c":[{"v":9},{"v":1410}]},
{"c":[{"v":10},{"v":1412}]},
{"c":[{"v":11},{"v":1415}]}
]
};
var data = new google.visualization.DataTable(json);
If that works, then you'll at least have confirmed the problem is somewhere in the ajax call or the php backend.
One other thought: this may seem obvious but it's worth double checking that you do have an element on your page with the chart_div id?
<div id='chart_div'></div>