Member Avatar for adishardis

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
  • 2K Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by adishardis
Member Avatar for urtrivedi 
{'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

Member Avatar for adishardis

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

Member Avatar for adishardis

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

Member Avatar for urtrivedi

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>
Member Avatar for adishardis

That works!

What does this mean? :-0

Sinceraly
Adam

Member Avatar for adishardis

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

Member Avatar for adishardis

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.