Kendo UI Chart Category Field DateFormats

[Arjuna]

I am using the Kendo UI chart to bind data that comes from the server.  I want to show the Date in the CategoryAxis.  The problem is that the date format coming from the server (.NET DateTime) comes in something like this "/Date(1327051610000)/".  

I want to show the date in the proper format dd/mm/yy, how can I get this done?

[T. Tsonev]

Hi,

The simplest option would be add a property to the object that contains the formatted date. Otherwise you'll need to parse and format the date:

categoryAxis: {
    labels: {
        template: "#= formatDate(value) #"
    }
}
...
var dateRegex = /\/Date\((\d+)\)\//;
function formatDate(dateString) {
    var ticks = parseInt(dateString.replace(dateRegex, "$1"), 10),
          d = new Date(ticks);

    return d.getDate() + "/"+
           (d.getMonth() + 1) + "/" +
           d.getFullYear().toString().substring(2,4)
}

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team

[Trevor]

Tsvetomir,

I have a similar problem but can't seem to get the sample you gave to work for me.  The template call to formatDate never seems to execute.  I've tried putting a simple alert within the formatDate function and tried with breakpoints but it never seems to get called.  Any ideas?

[T. Tsonev]

Hi,

What categories do you get when you remove the template? Maybe the categories are not getting populated from the data source in the first place.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Trevor]

Not sure I understand the question correctly but the category axis displays as per Arjuna's initial post.  The field ValueTimestamp is initially populated via a .NET dataset and then transfered to a JSON object before returning to the web page.  The ParameterValue is a double.  I am using your example of formating the date so function formatDate is a cut/paste from your code snippet.

I should also mention that I initialize the chart in a doc.ready function without specifying the datasource then, when the filter criteria is entered by the user, I populate the chart as follows and trigger a chart refresh.

$(

 

"#chart").kendoChart({

 

theme:

 

"black",

 

color:

 

"white",

 

title: { text:

 

"Sample Chart" },

 

dataSource: graphData,

series: [{type:

 

"line", field: "ParameterValue", name: "Value"}],

 

categoryAxis: { template:

 

"#= formatDate(value) #", field: "ValueTimestamp" }

 

 

});