如何在MVC4中使用Google JS API将C＃中的对象列表显示为javascript？

Question

I'm trying out the google api with some neat diagrams wich works fine. However when im trying to display the same data with TreeMap it won't work. Keep getting an error saying: Column 1 must be of type string.. I can't figure out why this works for charts and not for treemap?

This might be alot of code but it's pretty straight forward, im not sure which parts are nessasary to show here so i show all.

Here's a simple class with properties for Company:

public class Company
{

    public int Expense { get; set; }

    public int Salary { get; set; }

    public string Year { get; set; }

}

Here's the controller that provides a list of companies and send the data to the view:

public ActionResult GetData()
{
    return Json(CreateCompaniesList(), JsonRequestBehavior.AllowGet);
}

private IEnumerable<Company> CreateCompaniesList()
{
    List<Company> companies = new List<Company>();

    Company company1 = new Company() { Expense = 200, Salary = 1000, Year = new DateTime(2014, 1, 1).ToString("yyyy/mm/dd") };
    Company company2 = new Company() { Expense = 300, Salary = 800, Year = new DateTime(2014, 2, 1).ToString("yyyy/mm/dd") };
    Company company3 = new Company() { Expense = 500, Salary = 1400, Year = new DateTime(2014, 3, 1).ToString("yyyy/mm/dd") };

    companies.Add(company1);
    companies.Add(company2);
    companies.Add(company3);

    return companies;
}

Here's the view providing the charts and the treemap:

@{
    ViewBag.Title = "Home Page";
}


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

<script type="text/javascript" >  
    google.load("visualization", "1", { packages: ["corechart"] });
    google.load("visualization", "1", { packages: ["treemap"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        $.get('/Home/GetData', {},
            function (data) {
                var tdata = new google.visualization.DataTable();

                tdata.addColumn('string', 'Year');
                tdata.addColumn('number', 'Salary');
                tdata.addColumn('number', 'Expense');

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

                var options = {
                    title: "Expenses, salary For the current year"
                };

                var chart1 = new google.visualization.AreaChart(document.getElementById('chart_div1'));

                var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));

                var chart3 = new google.visualization.PieChart(document.getElementById('chart_div3'));

                var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4'));

                var tree = new google.visualization.TreeMap(document.getElementById('tree_div1'));

                //var chart6 = new google.visualization.ControlsandDashboards(document.getElementById('chart_div6'));

                chart1.draw(tdata, options);
                chart2.draw(tdata, options);
                chart3.draw(tdata, options);
                chart4.draw(tdata, options);
                tree.draw(tdata, options);

        });
    }
</script>

<div id="chart_div1" style="width: 900px; height: 500px;">
</div>

<div id="chart_div2" style="width: 900px; height: 500px;">
</div>

<div id="chart_div3" style="width: 900px; height: 500px;">
</div>

<div id="chart_div4" style="width: 900px; height: 500px;">
</div>

<div id="tree_div1" style="width: 900px; height: 500px;">
</div>

chart 1 - 4 works as expected, the problem occurs with "tree"

Answer 1

You need the data format of google Treemap chart something like bleow to match your case:

              ['Year','ParentsYear', 'Expense', 'Salary'],
              ['Years', null, 0, 0],
              ['2014', 'Years', 200, 1000],
              ['2012', 'Years', 300,800],
              ['2013', 'Years', 500,1400]

The reason is:

Each row in the data table describes one node (a rectangle in the graph). Each node (except the root node) has one or more parent nodes.

To solve your problem, change your code like below:

function drawChart() {
    $.get('/Home/GetData', {},
        function (data) {
            var tdata = new google.visualization.DataTable();
            tdata.addColumn('string', 'Year');
            tdata.addColumn('string', 'ParentsYear');
            tdata.addColumn('number', 'Expense');
            tdata.addColumn('number', 'Salary');
            tdata.addRow(['Years', null, 0, 0]);               
            for (var i = 0; i < data.length; i++)
            {
                tdata.addRow([data[i].Year,"Years",data[i].Salary, data[i].Expense]);
            }
            var tree = new google.visualization.TreeMap(document.getElementById('tree_div1'));
            var options = {
                title: "Expenses, salary For the current year"
            };
            tree.draw(tdata, options);
        });
}

Note: because it changed the format of DataTable , your other charts will break.