How to label the time as "hh:mm:ss" on Kendo UI line chart

condor888
condor888 used Ask the Experts™
on
I've created a demo as in this fiddle.

The code is also pasted below for your convenience.

var generateTrend = function() {
  $("#chart").kendoChart({
    xAxis: {
      labels: {
        template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"
      },
      title: {
        text: "Time"
      }
    },
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      "data": [{
          date: new Date(2013, 0, 1, 1, 1, 0),
          value: 3
        },

        {
          date: new Date(2013, 0, 1, 1, 2, 0),
          value: 4
        }, {
          date: new Date(2013, 0, 1, 1, 3, 0),
          value: 5
        },

        {
          date: new Date(2013, 0, 1, 1, 4, 0),
          value: 7
        },
      ]
    }]
  });
};
generateTrend();

Open in new window


But currently the label on the x-axis is in the format of "hh:mm". However, what I need is "hh:mm:ss". Although I tried
template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"

Open in new window

in the code, it does't seem to work.

Would you please let me know the right way of doing this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Full Stack Developer
Commented:
Add moment.js ()

Then amend your data lines as
date: moment(new Date(2013, 0, 1, 1, 1, 0)).format('hh:mm:ss'),
          value: 3

Open in new window

See your fiddle forked here http://jsfiddle.net/murfur/zjpw8056/

Author

Commented:
Sorry about the late confirmation. Thank you a lot!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial