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?
4 Answers, 1 is accepted
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 } });
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
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.
});
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