如何使用来自json的动态数据使用谷歌图表

Question

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.

Answer 1

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);
        }
    });
}

Answer 2

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