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

by

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!

0👍

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");
    }

Leave a comment