Building the series of a kendo chart by looping th

Question

I am having some difficulty figuring out how to solve this problem. Basically I have some JSON returned that looks like this:

{
"pie": {
"slice": [
  {
    "-ch": "1",
    "-val": "0.0797435897435897"
  },
  {
    "-ch": "2",
    "-val": "0.00743589743589744"
  },
  {
    "-ch": "3",
    "-val": "0.247435897435897"
  },
  {
    "-ch": "4",
    "-val": "0.497179487179487"
  },
  {
    "-ch": "5",
    "-val": "0.168205128205128"
  }
]
}
}

I am getting this data from the controller to the javascript just fine. However, I want to bind the data to a pie chart. The only issue is that, I will have varying amounts of channels. In this example, I have 5 channels. My pie chart in javascript looks like this:

$("#chartDiv").kendoChart({
            title: {
                position: "bottom",
                text: "Chart"
            },
            legend: {
                visible: false
            },
            chartArea: {
                background: "transparent"
            },
            seriesDefaults: {
                type: "donut",
                startAngle: 150
            },
            series: [
            {
                name: "Chart",
                data: ???????How to get the data here????????
            }],
            tooltip: {
                visible: true,
                template: "#= category #: #= value #%"
            }
        });
    }
});

I have tried building a loop within the call, I have also tried string building the definition but it doesn't seem to like that solution either(I might of implemented this incorrectly though.) Thanks ahead for your help.

Answer 1

I figured it out.

set data: dataVariable and define dataVariable like this:

for (var i = 0; i < json.Slices.length; i++) {
                dataVariable.push({
                    category: json.Slices[i].Ch,
                    value: parseFloat(json.Slices[i].val)
                });
        };