OnsenUI and Kendo pie chart issue

Question

I am using Kendo pie chart in onsenui framework and it works great if i use

function createChart() {
            $("#chart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Share of Internet Population Growth, 2007 - 2012"
                },
                legend: {
                    visible: false
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: \n #= value#%"
                    }
                },
                series: [{
                    type: "pie",
                    startAngle: 150,
                    data: [{
                        category: "Asia",
                        value: 53.8,
                        color: "#9de219"
                    },{
                        category: "Europe",
                        value: 16.1,
                        color: "#90cc38"
                    },{
                        category: "Latin America",
                        value: 11.3,
                        color: "#068c35"
                    },{
                        category: "Africa",
                        value: 9.6,
                        color: "#006634"
                    },{
                        category: "Middle East",
                        value: 5.2,
                        color: "#004d38"
                    },{
                        category: "North America",
                        value: 3.6,
                        color: "#033939"
                    }]
                }],
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        }

I have my own JSON object which is $scope.localData and when i replace the JSON data (which is inside series) with my localData, the chart doesn't work. Any help would be appreciated. Thank you guys.

Here is my codepen

host : varanjith.com
username : demo
password : demo

Update #1

Brief Intro about the app, It gets the JSON object from web and store it in the local database, based on that data the pie chart is generated. Everything is working fine other than that chart. Please help

Update #2

I think i found out the problem, but still not sure, the kendo pie chart uses json as in the format

[{category:"Asia", value:87},{category:"Europe", value:97}]

but the $scope.localData has the value [{"category":"Asia", "value":87},{"category":"Europe", "value":97}]

I think that double quotation marks is the problem. Can anyone tell me how to remove it?

Answer 1

The data you're feeding to the Pie Chart looks malformed. I tried redefining the data with:

var data = $scope.localData.map(function(item) {
  return {
    category: item.Country,
    value: item.Rating1
  };
});

Also, I changed the template string back to "#= category #: \n #= value#%". After doing that it worked fine.