Google Charts and asp.net MVC

Question

I am trying to create a simple chart using Google Charts and data provided by an Asp.net controller.

this is the controller action:

public JsonResult HierachyChart(int id)
    {
        List<object> rows = new List<object>
        {
            new{ cols =  new object[] { "Employee Name", "Salary" }},
            new {rows =  new object[]
            {
                new object[] { "Bob", 35000 },
            new object[] { "Alice", 44000 },
            new object[] { "Frank", 27000 },
            new object[] { "Floyd", 92000 },
            new object[] { "Fritz", 18500 }
                }
        }};

        return this.Json(rows, JsonRequestBehavior.AllowGet);
    }

Which seems to be as simple as I can make it and returns this when I run it:

[{"cols":["Employee Name","Salary"]},
 {"rows":[["Bob",35000],["Alice",44000],["Frank",27000],["Floyd",92000],["Fritz",18500]]}]

Which to the untrained eye appears to be the right format ?

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            url: '@Url.Action("HierachyChart", "JobHierachy", new { Id = 1538 })',
            dataType: "json",
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240});
    }
</script>

But whenI run it I simply get Table has no columns

What am I doing wrong?

Answer 1

I think the problem is the first list, you could try to encapsulate the result using a parent class:

public class HierarchyChart
{
    public object[] cols { get; set; }
    public object[] rows { get; set; }
}

public JsonResult HierachyChart(int id)
{
    var hierarchyChart = new HierarchyChart();
    hierarchyChart.cols = new object[] { "Employee Name", "Salary" }
    hierarchyChart.rows = new object[] {
        new object[] { "Bob", 35000 },
        new object[] { "Alice", 44000 },
        new object[] { "Frank", 27000 },
        new object[] { "Floyd", 92000 },
        new object[] { "Fritz", 18500 }
    };

    return this.Json(hierarchyChart , JsonRequestBehavior.AllowGet);
}

This is the output now:

{"cols":["Employee Name","Salary"],"rows":[["Bob",35000],["Alice",44000],["Frank",27000],
    ["Floyd",92000],["Fritz",18500]]}