Google Charts in MVC 4 C# Razor

Step1:           Create Chart Controller

Example

public JsonResult GetAreaChartData()

{    List<string[]> data = new List<string[]>();

    data.Add(new[] { "name", "score"});

    data.Add(new[] { "xyz","30" });

    data.Add(new[] { "aaa", "135", });           

    return Json(data);

}

Step2: Create  Chart Index.cshtml

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi "></script>

<script type="text/javascript">// <![CDATA[

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

    google.setOnLoadCallback(drawChart);

    function drawChart() {

        $.post('GetAreaChartData', {},

    function (data) {

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

        var rows = data.length;

        var cols = data[0].length;

        tdata.addColumn('string', data[0][0]);

        for (var i = 0; i < cols; i++) {

            tdata.addColumn('number', data[0][i]);

        }

        tdata.addRows(data.length);

        for (var i = 1; i < data.length; i++) {

            tdata.setCell(i, 0, data[i][0]);

            for (var j = 1; j < cols; j++) {

                var value = parseInt(data[i][j]);

                tdata.setCell(i, j, value);

            }

        }

        var options = {

            title: 'Employee Documentation  Perfomeance Chart',

            isStacked: true,

            width: 900,

            height: 500,

            vAxis: { title: "More Text" },

            hAxis: { title: "Date" }

        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(tdata, options);

    });

    }

// ]]></script>