Google Charts: I get json output but still no graph

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

Is the browser generating any errors? Firefox/Chrome = Ctrl+Shift+F — Duniyadnd, Jul 05 '13 at 17:44

James Holderness · Answer 1 · 2013-07-05T18:23:17.467

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>

edited Jul 05 '13 at 18:23

answered Jul 05 '13 at 18:18

James Holderness

22,721
2
40
52

Wow, really?! I am working with grails to make my app, Could it maybe be something with grails? – engineerKev Jul 05 '13 at 18:27
Yep. I cut and paste your json into a file named databaseQuery.php (no actual php - just the json). I cut and paste your javascript into a static html file and added the line `
`. That's all there was too it. I'm afraid I don't know anything about grails, but maybe if you can get a static version of the page working first, that'll help you figure out where the problem is. – James Holderness Jul 05 '13 at 18:36
Just a quick question, james. By static html do you mean a text file with a .html extension? I tried that, a text file with a .html extension and got the message, "Table has no columns". I think I did it wrong – engineerKev Jul 05 '13 at 20:08
Yes - just a text file with an ".html" extension. Did you try with the hardcoded json inline like I suggested in my answer rather than the ajax call? – James Holderness Jul 05 '13 at 20:11
That I didn't do lol. I kept the Ajax call. Ok I'll try it without it. Thanks – engineerKev Jul 06 '13 at 00:19

Google Charts: I get json output but still no graph

1 Answers1