J4X J4X - 5 months ago 123
Javascript Question

Morris.js Donut with dynamic data from ViewBag

have some questions regarding about Viewbag(MVC) & morris.js. I have found some information from here but none of them works. That's why I decide to posted this up.

I have a

ViewBag.ServicesData
variable stored data as below (table for easy reading)

Service Count
----------------
Color 1
Cut 6
Massage 2
Perm 2
Spa 2


But I would like to populate this data into a morris.js donut chart. If I hard-coded it, the code will be like:

Morris.Donut({
element: 'donut-example',
data: [
{label: "Color", value: 1},
{label: "Cut", value: 6},
{label: "Massage", value: 2},
{label: "Perm", value: 2},
{label: "Spa", value: 2}
]
});


my PROBLEM comes now, I have no idea how can I stored the viewbag data into an array that the
data: []
can accept and successfully display the donut charts? Thanks in advance.

EDITED: Finally, I figure out the ANSWER when I was trying different way of implementing

Morris.Donut({
element: 'donut-example',
data: [
@foreach(var item in ViewBag.ServicesData)
{
@:{ label: "@item.service", value: "@item.count" },
}
]
});

J4X J4X
Answer

Finally, I figure out the ANSWER when I was trying different way of implementing

Morris.Donut({
  element: 'donut-example',
  data: [
    @foreach(var item in ViewBag.ServicesData)
    {
        @:{ label: "@item.service", value: "@item.count" },
    }
  ]
});
Comments