Chart is not displaying using google chart

Question

Hi I am using google charts to display a chart but it is not displaying a chart. I can see the json printed as well in the firbug console but still chart is not displaying. Below is my code

function drawChart() {
        $.ajax({
            url: ipaddress+'/getSpecificFields',
            dataType: "json",
            success: function (jsonData) {
                alert('success');
                if (!$.browser.msie) {
                    console.log(jsonData);

                }
                // Create our data table out of JSON data loaded from server.
                var data = new google.visualization.DataTable(jsonData);
                data.addColumn("string", "abc");
                data.addColumn("string", "cde");
                data.addColumn("string", "fgh");

                data.addRows(jsonData.length);

        var i = 0;
        $.each(jsonData, function () {

            data.setValue(i, 0, this.abc);
            data.setValue(i, 1, this.cde);
            data.setValue(i, 2, this.fgh);
            i++;
        });
                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {
                    width: 400,
                    height: 240
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + '\n' + errorThrown);
                if (!$.browser.msie) {
                    console.log(jqXHR);
                }
            }
        });
    }}

json which is returning from the server

[Object { abc="leave, cde="80%", fgh="52b83880a36dcda423000001"}, Object { abc="Meeting", cde="60%", fgh="52b83880a36dcda423000002"}, Object { abc="Work", cde="70%", fgh="52b83880a36dcda423000003"}]

from browser eg localhost:3000/something

[
  {
    "abc": "Work",
   "cde": "50%",
    "ghe": "1",    
  },
  {    
    "cde": "50%",
    "abc": "Sick",
    "ghe": "2"
  },
  {
    "abc": "Some",
    "cde": "50%",
    "ghe": "3",    
  }
]

and server side code in node js

var jsonString = [];
var jsonParse;
test.find({abc:1,cde:1,ghe:1},function (err, list, count) {
        if (err) throw(err);
        list.forEach(function(listLoop){

            jsonParse = JSON.parse(JSON.stringify(listLoop));
            console.log("jsonParse " + JSON.stringify(listLoop)); 
            jsonString.push(jsonParse);
        });        
        res.json(jsonString);
    });

Answer 1

Your JSON doesn't seem correct, you should check the Google docs here:

https://developers.google.com/chart/interactive/docs/php_example

and this SO question which sounds like exactly what you are trying to do:

Creating Google Pie Chart based on JSON data using CodeIgniter

Answer 2

First off, you need to remove jsonData from the DataTable constructor:

var data = new google.visualization.DataTable(jsonData);

should be:

var data = new google.visualization.DataTable();

Second, your data is comprised entirely of strings, which a PieChart can't do anything with. PieCharts require two columns of data: 1 string for the labels and 1 number for the values. If you want to create a number column, make sure that your JSON does not put quotes around the numbers.

Third (and I assume this one is just a typo from changing your real data to sample data), you pull data from the fgh property of the objects in the data array, but you don't have an fgh property in the objects.