0

Hi,

I have a json encoded array ($dataTable) that looks like this:

    {"cols":[{"type":"string","label":"Analys"},{"type":"string","label":"Test 1"},{"type":"string","label":"Test 2"}],
    "rows":[{"c":[{"v":"Top"},{"v":"78"},{"v":"71"}]},{"c":[{"v":"In"},{"v":"88"},{"v":"91"}]},{"c":[{"v":"Pref"},{"v":"60"},{"v":"72"}]},{"c":[{"v":"Int"},{"v":"13"},{"v":"9"}]}]}

I think that's right but when I try to display the graph it says "table has no columns"...

Copied from google I have this in my head section:

<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(<?php echo $dataTable; ?>);  

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

and ofcourse in the body section I have a <div id="chart_div"></div>.

Does anybody here have experience of google charts and maybe could give me some hints to what might be the problem?

Take care!
Adam

2
Contributors
7
Replies
18
Views
5 Years
Discussion Span
Last Post by adishardis
0
{'type':'string','label':'Analys'},
{'type':'number','label':'Test 1'},
{'type':'number','label':'Test 2'}

I have changed type of 2 last rows to number from string

0

Thanks you are right and now it doesn't complain if I paste the json into google Code Playground areachart but still doesnt show any "values, or content". On my webpage it still says Table has no columns.× :(

Can't believe that this would be so hard to get right!!!!

Any more thoughts on what could be the problem?

Thanks for your time!
Adam

0

Just realized that maybe it has to do with the fact that my <div id="chart_div"></div> is included in the main page where the script resides, could this be the problem?

However it doesn't explain why I can't even get it to work in the googlecode playground with my json....

/Adam

0

I dont know what problem you have, but your code is working here, you can try following code at your place

<?php

$dataTable= " 
{
'cols':[{'type':'string','label':'Analys'},
{'type':'number','label':'Test 1'},{'type':'number','label':'Test 2'}],
    'rows':[
{'c':[{'v':'Top'},{'v':78},{'v':71}]},
{'c':[{'v':'In'},{'v':88},{'v':91}]},
{'c':[{'v':'Pref'},{'v':60},{'v':72}]},
{'c':[{'v':'Int'},{'v':13},{'v':9}]}]}";

?>
<html>
<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(<?php echo $dataTable; ?>);  

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

</head>
<body>
<div id='chart_div'></div>
</body>
</html>
0

Ok, so the only difference is that my json has " " around the values:

{"c":[{"v":"Top"},{"v":"61"},{"v":"57"}]}

But how do I get rid of them?? :)

/Adam

0

Finally I got it working, I added JSON_NUMERIC_CHECK to the json_encode like this:

$dataTable = json_encode(array(
    'cols' => $cols,
    'rows' => $outRows
), JSON_NUMERIC_CHECK);

Thank you so much for all your help!

Cheers
Adam

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.