Plotting Google Visualization Chart with php and ajax

Question

What I am doing is : I have written a javascript code that will plot a Google Visualization piechart in my webpage. Script uses ajax to get the data from php file and php performs database operations and displays the required data in json format.

The problem is I am unable to get the exact chart, instead I get a chart with 100% written in the piechart and other written besides. Please see the attached image.

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});  
google.charts.setOnLoadCallback(drawChart);
function drawChart() 
{
  var jsonData = $.ajax({
                          url: "getdata.php?tab=Cr",
                          dataType: "json",
                          async: false
                        }).responseText;
  var data = new google.visualization.DataTable(jsonData);
  var options = {'title':'Numbers', 'width':500, 'height':350};
  var chart = new 
  google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

output of getdata.php?tab=Cr

{"cols":
        [  {"id":"Department","type":"string"},
           {"id":"Count","type":"number"}],
 "rows":[
           {"c":[{"v":"IT"},{"v":"10"}]},
           {"c":[{"v":"EEE"},{"v":"1"}]},
           {"c":[{"v":"EC"},{"v":"2"}]},
           {"c":[{"v":"ME"},{"v":"2"}]},
           {"c":[{"v":"CS"},{"v":"3"}]},
           {"c":[{"v":"MT"},{"v":"20"}]},
           {"c":[{"v":"CH"},{"v":"3"}]},
           {"c":[{"v":"CIVIL"},{"v":"4"}]}
       ]
 }

Please help me to get the expected chart with department names beside the chart.

WhiteHat WhiteHat · Accepted Answer · 2018-03-11T16:31:41

need to remove the quotes " surrounding the numeric columns

yes --> {"v":10}

no --> {"v":"10"}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"Department","type":"string"},
      {"id":"Count","type":"number"}
    ],
     "rows":[
      {"c":[{"v":"IT"},{"v":10}]},
      {"c":[{"v":"EEE"},{"v":1}]},
      {"c":[{"v":"EC"},{"v":2}]},
      {"c":[{"v":"ME"},{"v":2}]},
      {"c":[{"v":"CS"},{"v":3}]},
      {"c":[{"v":"MT"},{"v":20}]},
      {"c":[{"v":"CH"},{"v":3}]},
      {"c":[{"v":"CIVIL"},{"v":4}]}
    ]
  });
  var options = {'title':'Numbers', 'width':500, 'height':350};
  var chart = new
  google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

Plotting Google Visualization Chart with php and ajax

1 Answers