Kendo Chart Databinding - Local Json Data with schema - html

Question

I have below json returned data and like to bind in the Kendo Chart
var stockReportingList= {
"StockDetails" : [
{"Total" : 230, "Sold" : 200, "Unsold" : 30, "Month" : "Jan 2016" },
{"Total" : 550, "Sold" : 430, "Unsold" : 220, "Month" : "Feb 2016" },
{"Total" : 200, "Sold" : 100, "Unsold" : 100, "Month" : "Mar 2016" }
]
}
below is my script to plot chart
$("#MarketStockChart").kendoChart({
dataSource : {
data : stockReportingList
},
seriesDefaults : {
type : "column",
stack: true
},
series : [{
field : "Sold"
name : "Sold"
data : stockReportingList
},
{
field : "UnSold"
name : "UnSold"
data : stockReportingList`enter code here`
}],
valueAxis : {
labels : {
format : "{0}",
visible : true,
position : "top"
}
},
categoryAxis :
{
field : "Month"
}
});
The Kendo Chart not displaying properly, Can you please help me to fix this.

Answer 1

I had make lots of corrections in your code to make your charts work.
Below is your modified code:
<script>
var stockReportingList = {
"StockDetails": [{
"Total": 230,
"Sold": 200,
"Unsold": 30,
"Month": "Jan 2016"
}, {
"Total": 550,
"Sold": 430,
"Unsold": 220,
"Month": "Feb 2016"
}, {
"Total": 200,
"Sold": 100,
"Unsold": 100,
"Month": "Mar 2016"
}]
};
$(function() {
$("#MarketStockChart").kendoChart({
dataSource: {
data: stockReportingList.StockDetails
},
seriesDefaults: {
type: "column",
stack: true
},
series: [{
field: "Sold",
name: "Sold"
}, {
field: "Unsold",
name: "Unsold"
}],
valueAxis: {
labels: {
format: "{0}",
visible: true,
position: "top"
}
},
categoryAxis: {
field: "Month"
}
});
});
</script>
Few changes I am mentioning which I had to make:
I passed stockReportingList.StockDetails as dataSource.
Corrected spelling of Unsold in series. It was not matching with your datasource key.
Wrapped whole code in $(function() {...}) to ensure that DOM has
been loaded.
Removed DataSource option from series as it was not required.
Below is live working example for your code:
http://dojo.telerik.com/epOVe