Google Charts Pie not complete

Question

I'm using GoogleCharts API to display a pie with my gender repartition but I have a little problem, my pie is uncomplete like in the following picture.

I generate it with this JSON array :

{"cols":[{"id":"","label":"Topping","pattern":"","type":"string"},{"id":"","label":"Slices","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Homme","f":null},{"v":"2","f":null}]},{"c":[{"v":"Femme","f":null},{"v":"1","f":null}]}]}

And this is my Javascript code

function drawSexChart() {
      var jsonData = $.ajax({
          url: "http://localhost/studentlink/web/js/ajax.php?sexChart",
          dataType: "json",
          async: false
          }).responseText;
      var data = new google.visualization.DataTable(jsonData);
      console.log(jsonData);
      var chart = new google.visualization.PieChart(document.getElementById('chartUsersBySex'));
      chart.draw(data, null);
  }

I haven't any idea why my pie is uncomplete.

If someone can help me ?

Thank you in advance

Thomas

Answer 1

Finally I just find why my pie is uncomplete, I post my solution to help people which have the same problem in future.

Actually, to generate my JSON String, I using the json_encode PHP function inside a PHP object which contain all informations about the chart.

But actually, I'm using this function like this :

return json_encode($this);

Result

{"cols":[{"id":"","label":"Topping","pattern":"","type":"string"},{"id":"","label":"Slices","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Homme","f":null},{"v":"2","f":null}]},{"c":[{"v":"Femme","f":null},{"v":"1","f":null}]}]} 

In this result we can see that the numbers represent my values are between " .

But now, if I generate my JSON String like this :

return json_encode($this,JSON_NUMERIC_CHECK);

Result

{"cols":[{"id":"","label":"Topping","pattern":"","type":"string"},{"id":"","label":"Slices","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Homme","f":null},{"v":3,"f":null}]},{"c":[{"v":"Femme","f":null},{"v":1,"f":null}]}]}

The " characters around my number diseapeared and I have my full pie !

Answer 2

It's because your values are strings and not integers.

See here

So what you need to do is either

1) change the data that is returned from the server so that the row data reflects this

"rows":[{"c":[{"v":"Homme","f":null},{"v":2,"f":null}]},{"c":[{"v":"Femme","f":null},{"v":1,"f":null}]

2) Change the data before you use it with the chart app. Example:

var rowData = jsonData.rows;
for (var i = 0, l = rowData.length; i < l; i++) {
  rowData[i].c[1].v = +rowData[i].c[1].v;
}

Answer 3

取下引号（“”）。

{"cols":[{"id":"","label":"Topping","pattern":"","type":"string"},{"id":"","label":"Slices","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Homme","f":null},{"v":2,"f":null}]},{"c":[{"v":"Femme","f":null},{"v":1,"f":null}]}]}