DotNetDev DotNetDev - 1 month ago 16
ASP.NET (C#) Question

Kendo Chart Databinding - Local Json Data with schema

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

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

Comments