Okay so I'm working with MVC4 in C# and I have to fill a javascript array with elements from the view's model. I'm trying to dynamically populate a Chart.js pie chart. This is my example code:

<script src="~/Scripts/Chart.js"></script>
<script type="text/javascript">

    var data = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }
        ]
    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    new Chart(ctx).Pie(data, options);
</script>

I want to be able to add elements to the data array in a for loop. I tried using .push like this

data.push([{ value: 30, color: "#F38630" }]);

But it stops the chart from being created entirely. Any idea how I can do something like:

foreach (var item in Model.List) {

data.add(item.value)

}

Okay so I'm working with MVC4 in C# and I have to fill a javascript array with elements from the view's model. I'm trying to dynamically populate a Chart.js pie chart. This is my example code:

<script src="~/Scripts/Chart.js"></script>
<script type="text/javascript">

    var data = [
        {
            value: 30,
            color: "#F38630"
        },
        {
            value: 50,
            color: "#E0E4CC"
        },
        {
            value: 100,
            color: "#69D2E7"
        }
        ]
    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    new Chart(ctx).Pie(data, options);
</script>

I want to be able to add elements to the data array in a for loop. I tried using .push like this

data.push([{ value: 30, color: "#F38630" }]);

But it stops the chart from being created entirely. Any idea how I can do something like:

foreach (var item in Model.List) {

data.add(item.value)

}

• c#
• javascript
• arrays
• asp-mvc-4
• razor

• 3 You are passing an arrya into data.push(), it only wants the actual object (else you will get an array of arrays). Try data.push({ value: 30, color: "#F38630" });. – Karl-Johan Sjögren Commented Mar 9, 2014 at 21:58
• Thanks, that worked for the adding of objects to the array!! – barnacle.m Commented Mar 9, 2014 at 22:06

2 Answers 2

You can be even more awesome than that.

Create your own basic type to represent you Value/Color pair.

public class MyType 
{
    public string Value {get;set;}
    public string Color {get;set;}
}

In your razor (or code behind) create an array for that type:

@{
    var values = new List<MyType>();
    // populate with some values.

    JavaScriptSerializer js = new JavaScriptSerializer();
    string json = js.Serialize(keyValues.ToArray());
}

Then in your Javascript:

<script type="text/javascript">

    var data = @json; // TADA!!

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Pie(data);

    //... etc.

</script>

If you e across any problems serializing that list, I remend using Json.Net to improve C# native serializers.

Your data is an array (see the brackets []).

Now you try to add an array with a single object to the array:

[{ value...

Just change it to an object {} and you will be fine.

{ value ... }