无法在ASP.net MVC4上加载Google图表

Question

I tried to add charts to my ASP.net MVC project using Google Charts

I used the simplest way to understand how does it work !

On my Controller :

  public JsonResult Index()
        {

            var data = new[]
                {
                    new {Name = "China", Value = 1336718015},
                    new {Name = "India", Value = 1189172906},
                    new {Name = "United States", Value = 313232044},
                    new {Name = "Indonesia", Value = 245613043},
                    new {Name = "Brazil", Value = 203429773},
                };

            return Json(data,JsonRequestBehavior.AllowGet);
        }

On my Web Page

</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('index', {},
            function (data) {
                var tdata = new google.visualization.DataTable();

                tdata.addColumn('string', 'Country');
                tdata.addColumn('number', 'Population');

                for (var i = 0; i < data.length; i++) {
                    tdata.addRow([data[i].Name, data[i].Value]);
                }

                var options = {
                    title: "Top 5 Country's Population"
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(tdata, options);
            });

    }
// ]]></script>
<div id="chart_div"></div>

All what I have is a text on a page :

[{"Name":"China","Value":1336718015},{"Name":"India","Value":1189172906},{"Name":"United States","Value":313232044},{"Name":"Indonesia","Value":245613043},{"Name":"Brazil","Value":203429773}]

Answer 1

For the example you are trying to get working, you need two pages - one that displays the chart (the one with the HTML and Javascript) and the other one that serves the data (your MVC controller).

After that, you have to set the post line to your MVC page:

$.post('page/address', {},

You can use index too, but in this case you have to move the page with HTML to another file (for example chart.html )