How to pass a chart.js chart data object in json from a controller in asp.net mvc

Question

According to the chart.js documentation you are supposed to be able to create a chart data object, populate it, and pass that to the chart object and have it render. I am stuck and not sure what I have done incorrectly. The data is getting to the front end, however it must not be formatted in the way that the chart.js object wants it. I have searched and cannot find anything on this. There are no errors thrown on the client side, and I can see the data just fine in the debugger. Also, as you see in this example I have tried to stringify the data as well, still to no avail.

http://www.chartjs.org/docs/#chart-configuration-chart-data

This is the simple class that I created to represent what the documentation states:

public class ChartData
{
    public object[] datasets { get; set; }
    public string[] labels { get; set; }
    public string[] xLabels { get; set; }
    public string[] yLabels { get; set; }
}

Here is the Controller method:

public JsonResult GetChartData()
    {
        List<MyClass> myData = db.MyClass
            .Where(o => o.Category == "SomeValue")
            .ToList();

        ChartData cData = new ChartData();
        cData.datasets = new object[2];
        cData.labels = new string[myData.Count];
        string[] ds1 = new string[myData.Count];
        string[] ds2 = new string[myData.Count];

        for (int i = 0; i < myData .Count; i++)
        {
            cData.labels[i] = myData [i].Months;
            ds1[i] = myData[i].SomeCount.ToString();
            ds2[i] = myData[i].AnotherCount.ToString();
        }
        cData.datasets[0] = ds1;
        cData.datasets[1] = ds2;

        return Json(new
        {
            data = cData
        },
            JsonRequestBehavior.AllowGet);

    }

This is the javascript on the client side that is calling the controller and trying to display the data:

function getChartData() {
        $.ajax({
            type: "POST",
            url: "GetChartData",
            data: "{}",
            dataType: "json",
            cache: true,
            success: function (Result) {
                drawChart(JSON.stringify(Result.data));
            },
            error: function (Result) {
                alert("Error");
            }
        });
    }


    function drawChart(data) {

        // render chart
        var ctx = document.getElementById("lineChart").getContext("2d");

        var chartInstance = new Chart(ctx,
        {
            type: 'line',
            data: data,
            options: lineOptions
        });

    };

Answer 1

kblau... thanks for the assistance. After looking at your code, and then looking at the debugger in chrome the issue is that it expected another instantiated object to be placed into the datasets[] object array. Here are the two classes now:

/// <summary>
/// This is a class representation of the data that the ChartJs object will take
/// http://www.chartjs.org/docs/#chart-configuration-chart-data
/// </summary>
public class ChartData
{

    public object[] datasets { get; set; }
    public string[] labels { get; set; }
    public string[] xLabels { get; set; }
    public string[] yLabels { get; set; }



}

/// <summary>
/// This is the instance of the chart data that needs to be placed into the ChartData dataset object array
/// </summary>
public class ChartDataInstance
{
    public int[] data { get; set; }
    public string fillColor { get; set; }
    public string label { get; set; }
    public string pointColor { get; set; }
    public string pointHighlightFill { get; set; }
    public string pointHighlightStroke { get; set; }
    public string pointStrokeColor { get; set; }
    public string strokeColor { get; set; }

}

The ChartDataInstance class (yes I need a better name) is what you are instantiating a copy of, populating, and then inserting into the datasets object array. Passing that back to the front end then works.

Thanks!

Answer 2

Okay this is how you can do it. If you follow along you can figure your issue out.

View:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index59</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var ctx = $("#myChart");

            var lineOptions = {
                responsive: false
            }

            $("#btn").click(function () {
                $.ajax({
                    type: "POST",
                    url: "GetChartData",
                    //data: "{}",
                    dataType: "json",
                    cache: true,
                    success: function (Result) {
                        //drawChart(JSON.stringify(Result.data));
                        var ap = "dh";
                        var chartInstance = new Chart(ctx,
                        {
                            type: 'line',
                            data: Result.data,
                            options: lineOptions
                        });
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });

            })
        })
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="Go" />
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
</body>
</html>

Controller/Model:

public class datasets
{
    public string label { get; set; }
    public IList<int> data = new List<int>();
    public string backgroundColor { get; set; }
}

public class data
{
    public data()
    {
        xLabels.Add("x1");
        xLabels.Add("xT");
        xLabels.Add("xW");
        xLabels.Add("xT");
        xLabels.Add("xF");
        xLabels.Add("xS");
        xLabels.Add("xS");
    }

    public IList<string> xLabels = new List<string>();
    public IList<datasets> datasets = new List<datasets>();
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult GetChartData()
    {
        data data = new data();

        datasets dataset = new datasets();
        dataset.label = "apples";
        dataset.data.Add(12);
        dataset.data.Add(19);
        dataset.data.Add(3);
        dataset.data.Add(17);
        dataset.data.Add(6);
        dataset.data.Add(3);
        dataset.data.Add(7);
        dataset.backgroundColor = "rgba(153,255,51,0.4)";

        data.datasets.Add(dataset);

        datasets dataset2 = new datasets();
        dataset2.label = "oranges";
        dataset2.data.Add(2);
        dataset2.data.Add(29);
        dataset2.data.Add(5);
        dataset2.data.Add(5);
        dataset2.data.Add(2);
        dataset2.data.Add(3);
        dataset2.data.Add(10);
        dataset2.backgroundColor = "rgba(255,153,0,0.4)";

        data.datasets.Add(dataset2);

        return Json(new
        {
            data = data
        }
            , @"application/json");
    }