With the following code, the chart does not even appear on the page when rendered..
The Grid displays things properly, but the Chart does not..
I had assumed the template item inside the categoryAxis.labels would be the equivalent to that of the Grid, am I mistaken?
If I remove the 'template' setting as follows, the chart displays - but with horrible looking dates, as they are returned from a WCF service.
NOTE: You may have noticed these lines and wondered why I am calling $.parseJSON in my datasource declaration..
The reason for this is that I have to return a collection from C#, and to do so, I serialize a List<Dictionary<string,object>> object into javascript and return it to the page..
<script type="text/javascript"> function toDate(value) { var dateRegExp = /^\/Date\((.*?)\)\/$/; var date = dateRegExp .exec(value); return new Date(parseInt(date[1]));}$(document).ready(function () { var dsPriceHistoryChart = new kendo.data.DataSource({ transport: { read: { dataType: "jsonp", data: { "BeginDate": "2011-10-01", "EndDate": "2011-10-27" } } }, schema: { data: function(data){ return $.parseJSON(data); } } }); $("#PriceHistoryGrid").kendoGrid({ groupable: true, sortable: true, pageable: true, scrollable: true, selectable: "row", dataSource: dsPriceHistoryChart, columns: [ { field: "BusinessDate", title: "Business Date", template: '#= kendo.toString( toDate(BusinessDate), "MM/dd/yyyy" )#' }, { field: "EffectiveDate", title: "Effective Date", template: '#= kendo.toString( toDate(EffectiveDate), "MM/dd/yyyy" )#' }, { field: "Test1", title: "Test1", }, { field: "Test2", title: "Test2", } ], }); $("#PriceHistoryChart").kendoChart({ title: { text: "Price History" }, dataSource: dsPriceHistoryChart, series: [ { type: "line", field: "Test1", name: "Test1" }, { type: "line", field: "Test2", name: "Test2" } ], categoryAxis: { field: "BusinessDate", labels:{ rotation: -90, template: '#= kendo.toString( toDate(BusinessDate), "MM/dd/yyyy" )#' } } }); dsPriceHistoryChart.read(); });</script>The Grid displays things properly, but the Chart does not..
I had assumed the template item inside the categoryAxis.labels would be the equivalent to that of the Grid, am I mistaken?
If I remove the 'template' setting as follows, the chart displays - but with horrible looking dates, as they are returned from a WCF service.
$("#PriceHistoryChart").kendoChart({ title: { text: "Price History" }, dataSource: dsPriceHistoryChart, series: [ { type: "line", field: "Test1", name: "Test1" }, { type: "line", field: "Test2", name: "Test2" } ], categoryAxis: { field: "BusinessDate", labels:{ rotation: -90 } } });NOTE: You may have noticed these lines and wondered why I am calling $.parseJSON in my datasource declaration..
schema: { data: function(data){ return $.parseJSON(data); }The reason for this is that I have to return a collection from C#, and to do so, I serialize a List<Dictionary<string,object>> object into javascript and return it to the page..
1 Answer, 1 is accepted
0
Hi Brad,
Best wishes,
Hristo Germanov
the Telerik team
Thank you for contacting us.
In the category axis label template you can use only value. Can you try to this:
categoryAxis: { field: "BusinessDate", labels:{ rotation: -90, template: '#= kendo.toString( toDate(value), "MM/dd/yyyy" )#' }}Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!