iam using mvc, i want to connect my data to google pie chart. so i used json to get list of names and their count using the following code

public JsonResult list()
        {
     var result= list.GroupBy(i => i.Name).Select(i => new { word = i.Key, count = i.Count() 
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

Using the google chart API

 google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var jsonData = $.ajax({
            url: "list",
            dataType: "json",
            async: false
        }).responseText;
        var data = google.visualization.DataTable(jsonData);

        var options = {
            title: 'Certificate details',
            is3D: true,
        };    
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
    }

i want to know how to get list of key value pairs of my data into pie chart. i have googled for long time, everybody is giving code example with php. Thankyou.

iam using mvc, i want to connect my data to google pie chart. so i used json to get list of names and their count using the following code

public JsonResult list()
        {
     var result= list.GroupBy(i => i.Name).Select(i => new { word = i.Key, count = i.Count() 
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

Using the google chart API

 google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var jsonData = $.ajax({
            url: "list",
            dataType: "json",
            async: false
        }).responseText;
        var data = google.visualization.DataTable(jsonData);

        var options = {
            title: 'Certificate details',
            is3D: true,
        };    
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
    }

i want to know how to get list of key value pairs of my data into pie chart. i have googled for long time, everybody is giving code example with php. Thankyou.

• javascript
• json
• google-visualization

• I'm not sure what you would want to use server-side for this, but I can help you parse the data client-side. What does jsonData contain? – asgallant Commented Mar 27, 2014 at 14:21
• My Json will return the array like this= [{"word":group1,"count":1},{"word":group2,"count":2},{"word":group3,"count":1},{"word":group4,"count":1}]. how to parse from client side. Thanks – coder Commented Mar 27, 2014 at 15:17

2 Answers 2

You can parse that data client-side like this:

function drawChart () {
    $.ajax({
        url: "list",
        dataType: "json",
        success: function (jsonData) {
            var data = new google.visualization.DataTable();
            // assumes "word" is a string and "count" is a number
            data.addColumn('string', 'word');
            data.addColumn('number', 'count');

            for (var i = 0; i < jsonData.length; i++) {
                data.addRow([jsonData[i].word, jsonData[i].count]);
            }

            var options = {
                title: 'Certificate details',
                is3D: true
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
        }
    });
}

I created a basic handler to provide some methods to work with dinamic google charts.

First you register the data or part of it. After this, you are able to render when necessary.

Look at: http://github.com/ahlechandre/chart-handler