[Solved] Line chart showing time, how to do?

[Luiz]

I'd like to show the average attendance time in a line graph.
How can I feed the graph via javascript with these values (string or timestmap)?
I am sending an image with the type of graphic i want.
Can you help me?

[Luiz]

more explanation: the seriesdata as the values that i need to show only the time

var seriesData = [            { day: "Seg", sales1:  new Date("2018/01/01 08:40:56").getTime()/1000, sales2: new Date("2018/01/01 06:33:58").getTime()/1000 },            { day: "Ter", sales1:  new Date("2018/01/01 08:40:05").getTime()/1000, sales2: new Date("2018/01/01 06:59:55").getTime()/1000 },            { day: "Qua", sales1:  new Date("2018/01/01 08:05:33").getTime()/1000, sales2: new Date("2018/01/01 07:38:29").getTime()/1000 },            { day: "Qui", sales1:  new Date("2018/01/01 09:42:34").getTime()/1000, sales2: new Date("2018/01/01 08:32:18").getTime()/1000 },            { day: "Sex", sales1:  new Date("2018/01/01 09:48:15").getTime()/1000, sales2: new Date("2018/01/01 08:25:27").getTime()/1000 },            { day: "Sab", sales1:  new Date("2018/01/01 08:33:26").getTime()/1000, sales2: new Date("2018/01/01 09:02:39").getTime()/1000 },            { day: "Dom", sales1:  new Date("2018/01/01 07:55:10").getTime()/1000, sales2: new Date("2018/01/01 08:10:47").getTime()/1000 },            { day: "Doma", sales1: new Date("2018/01/01 08:10:11").getTime()/1000, sales2: new Date("2018/01/01 07:24:50").getTime()/1000 },             ];

$("#CompGraficoTMAC").kendoChart({                title: {                    text: "TMAC - Tempo Médio Atendimento ao Cliente(horas)"                },                legend: {                    position: "bottom"                },                seriesDefaults: {                    labels: {                        visible: true                    }                },                series: [                    {                        name: "TMAC FÁBRICA",                        type: "line",                        color: "Blue",                        data: seriesData,                        field: "sales1"                    }, {                        name: "TMAC CLIENTE",                        type: "line",                        color: "#ff0000",                        data: seriesData,                        field: "sales2"                    }],                categoryAxis: {                    categories: [lbl01, lbl02, lbl03, lbl04, lbl05, lbl06, lbl07, lbl08]                },                tooltip: {                    visible: true                }            });

[Tsvetina]

Hello Luiz,

If you remove the division by 1000 from the dates, you can get the time to show by using a label template like this:

series: [
  {
    name: "TMAC FÁBRICA",
    type: "line",
    color: "Blue",
    data: seriesData,
    field: "sales1",
    labels: {
      template: "#:getTime(value)#"
    }
  }, {
    name: "TMAC CLIENTE",
    type: "line",
    color: "#ff0000",
    data: seriesData,
    field: "sales2",
    labels: {
      template: "#:getTime(value)#"
    }
  }]

function getTime(value){
  var minutes = value.getMinutes().toString().length == 2 ? value.getMinutes(): "0" + value.getMinutes();
  var seconds = value.getSeconds().toString().length == 2 ? value.getSeconds(): "0" + value.getSeconds();
  return value.getHours() + ":" + minutes + ":" + seconds;
}

Here is a Dojo demonstrating the result:
http://dojo.telerik.com/@tsveti/iRaLew/2

Regards,
Tsvetina
Progress Telerik

[Luiz]

Thank you very much for your reply.
I did it this way:

01.$("#CompGraficoTMAC").kendoChart({
02.    title: {
03.        text: "TMAC - Tempo Médio Atendimento ao Cliente(horas)"
04.    },
05.    legend: {
06.        position: "bottom"
07.    },
08.    seriesDefaults: {
09.        labels: {
10.            visible: true,
11.            template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
12.        }
13.    },
14.    series: [
15.        {
16.            name: "TMAC FÁBRICA",
17.            type: "line",
18.            color: "Blue",
19.            data: seriesData,
20.            field: "sales1"
21.        }, {
22.            name: "TMAC CLIENTE",
23.            type: "line",
24.            color: "#ff0000",
25.            data: seriesData,
26.            field: "sales2"
27.        }],
28.    valueAxis: {
29.        labels: {
30.            template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
31.        },
32.        min: new Date("2018/01/01").getTime(),
33.        majorUnit: 60 * 60 * 1000 // 60 minutes step
34.    },
35.    tooltip: {
36.        visible: true,
37.        template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
38.
39.    },
40.    categoryAxis: {
41.        categories: [lbl01, lbl02, lbl03, lbl04, lbl05, lbl06, lbl07, lbl08]
42.    }
43.});

[Tsvetina]

Hello Luiz,

Indeed, your approach is cleaner. Now when I though about formats, for the series specifically you don't even need to use a template:

seriesDefaults: {
    labels: {
      visible: true,
      format: "{0:hh:mm:ss}"
    }
}

Regards,
Tsvetina
Progress Telerik