javascript - Kendo chart x-axis not displaying with given data -

i'm trying render chart based on this example. i'm receiving data json formatted so:

[{"date":"2015/06/01","count":4588}] 

however, given data, when try dates displayed on x-axis using categoryfields nothing displayed. appreciated.

controller:

[route("apiaggregate")]     [httpget]             public ienumerable<apidto> get(datetime? start = null, datetime? end = null )     {                                var datedata =                 b in session.query<calltracker>()                 group b b.calldatetime.value.date g                 g.key.date >= datetime.today.adddays(-3)  && g.key.date <= datetime.today.adddays(3)                 orderby g.key                 select new apidto{date = g.key.tostring("yyyy/mm/dd"), count = g.count()};            return datedata; 

relevant code:

function chartdata(dataapi) {     var containdata = [];             (i = 0; < dataapi.length; i++) {         var p = dataapi[i];         p.date = new date(p.date);         containdata.push(p);     }     createchart(containdata);        }  function createchart(stats) {     $("#chart").kendochart({         datasource: stats,         title: {             text: "api calls"         },         series: [{             type: "column",             field: "count",             // x-axis supposed filled dates.             categoryfields: "date",             line: {                 style: "step"             }         }],         categoryaxis: {             baseunit: "weeks",             majorgridlines: {                 visible: false             }         },         valueaxis: {             line: {                 visible: false             },             title: {                 text: "# of calls"             }         },         tooltip: {             visible: true,             format: "{0}"         }     }) }     $(document).ready(function () {     var action = "calltrackers";     var url = "/api/report/apiaggregate";             $.ajax({         type: "get",         processdata: false,         url: "/api/report/apiaggregate",         timeout: 10000,         contenttype: "application/json; charset=utf-8",         datatype: "json",         beforesend: function (xmlhttprequest) {             xmlhttprequest.timeout = 10000;             xmlhttprequest.setrequestheader("accept", "application/json");         },         success: function (data, status, d) {             if (status == "success") {                 json.stringify(data);                 chartdata(data);             }         },         error: function (xhr, textstatus, errorthrown) {             $('.maincontent').busyindicator(false);             callbackfails(xhr, textstatus, errorthrown);         }     }); });  function callbackfails(xhr, textstatus, errorthrown) {     processerror(xhr); }  $("#test").bind("kendo:skinchange", chartdata); $(".radiocontainer").bind("change", refresh);  function refresh() {     var chart = $("#chart").data("kendochart"),         series = chart.options.series,         categoryaxis = chart.options.categoryaxis,         baseunitinputs = $("input:radio[name=baseunit]");      categoryaxis.baseunit = baseunitinputs.filter(":checked").val();      chart.refresh(); } 

html:

<div class="toparea"> </div> <div id="test"> <div class="demo-section k-content">     <div id="chart"></div> </div>     <h4>base date unit</h4> <div class="radiocontainer">     <ul class="options">         <li>             <input id="baseunityears" name="baseunit"                    type="radio" value="years" autocomplete="off" />             <label for="baseunityears">years</label>         </li>         <li>             <input id="baseunitmonths" name="baseunit"                    type="radio" value="months" autocomplete="off" />             <label for="baseunitmonths">months</label>         </li>         <li>             <input id="baseunitweeks" name="baseunit"                    type="radio" value="weeks" checked="checked" autocomplete="off" />             <label for="baseunitweeks">weeks</label>         </li>         <li>             <input id="baseunitdays" name="baseunit"                    type="radio" value="days" autocomplete="off" />             <label for="baseunitdays">days</label>         </li>     </ul> </div> 

instead of converting date yourself, can use datasource object's schema it:

var thedatasource = new kendo.data.datasource({         data: data,         schema: {             model: {                 fields: {                     date: {                         type: "date"                     }                 }             }         }        }); 

demo fiddle