chart js, loading data dynamically

Question

I'm attempting to load data from my ViewModel into Chart Js. It appears I am close, but possibly my javascript syntax is a bit off.

My model contains a list of integers. Currently, hard coded to three different ints. Has anyone done something similar to what I am looking to achieve?

Here is my view:

@model CRADV.ViewModel.RejectMessageReportViewModel

@{
    List<int> data = Model.reject_count;
    var labels = Model.messages;
    var colors = new[] {  "#FF6384", "#36A2EB", "#FFCE56" };
}
<div class="col-lg-4">
    <canvas id="pie-chart" width="400" height="400"></canvas>

    @Model.reject_count.FirstOrDefault()
</div>
<script type="text/javascript">
    var data = '@data.ToList()';
    var ctx = document.getElementById("pie-chart");
    var myPieChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
            ],
            datasets: [
                {
                    data: data,
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        }
    });
</script>

Vax · Accepted Answer · 2016-10-27 12:55:55Z

1

It looks like you are trying to assign .NET list of integers to a jQuery function. This is never going to work as you are mixing two languages. You need to serialize List to JSON first.

You can achieve this using Newtonsoft Json nuget package:

using Newtonsoft.Json;

var data= JsonConvert.SerializeObject(Model.reject_count);

answered Oct 27, 2016 at 12:55

Vax

3533 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Over a year ago

Okay, I can give this a try.

Collectives™ on Stack Overflow

chart js, loading data dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related