I have this code to draw kendo pie chart...and it's read data from json...the the title of the chart appear but the chart not appear
<div id="chart"></div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
dataType: "json",
url: "/home/getData"
}
}
},
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
and this is the function which return the json
public ActionResult getData()
{
var data = "[{ 'source': 'Hydro','percentage': 22,'explode': true},{'source':'Solar','percentage':2,'explode': false},{'source':'Nuclear','percentage': 49,'explode': false},{'source':'Wind','percentage': 27,'explode': false}]";
return this.Content(data, "application/json");