Google Chart Tools - JSON Format

Question

I got the correct JSON structure usage on the documentation of Google Chart Tool, but check this out:

As you can see, the BarChart looks great, but the PieChart broke.

I use the same data, as you can see on this JS:

    function drawChart() {
      var element = $('#overall');
      var element2 = $('#overall2');

      var link = element.data('link');

      var jsonData = $.ajax({
          url: link,
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);


      // Set chart options
      var options = {'title':'Overall progress',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.BarChart(element[0]);
      chart.draw(data, options);



      var chart2 = new google.visualization.PieChart(element2[0]);
      chart2.draw(data, options);

    }

It looks strange because on this example from the docs, they use a PieChart with that same JSON.

The genarated JSON is this:

{
   "cols": [
       {"id": "","label": "Topping","pattern": "","type": "string"},
       {"id": "","label": "Slices","pattern": "","type": "number"}
   ],

   "rows": [
        {"c": [{"v": "Mushrooms"},{"v": "3"}]},
        {"c": [{"v": "Onions"},{"v": "1"}]},
        {"c": [{"v": "Olives"},{"v": "1"}]},
        {"c": [{"v": "Zucchini"},{"v": "1"}]},
        {"c": [{"v": "Pepperoni"},{"v": "2"}]}
   ]
}

A little different, didn´t get "f": property because it was NULL on Server Side. Should I just format send null as a String and get: "f": "null" ? Doesn´t make sense.

Thanks.

EDIT

ColumnChart and AreaChart both came out fine ALSO.

Answer 1

The problem is that you are putting quotes around the numbers: {"v": "3"} should be {"v": 3}.