How to convert JSON object to datetime
Question
I need to show JSON data in Kendo chart.
My code as follows,
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
$("#chart").kendoChart({
series: [{
data: [new Date(formatTime(360)).getTime(), // here 360 means seconds
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(146)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Blue",
name: "Average time",
type: "line"
},
{
data: [new Date(formatTime(760)).getTime(),
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(148)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Red",
name: "Wait time",
type: "bar",
}
]
,
valueAxis: {
labels: {
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
},
min: new Date("2018/02/01").getTime(),
majorUnit: 10 * 60 * 1000 // 20 minutes step
},
tooltip: {
visible: true,
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
}
});
function formatTime(time) {
var rootDate = new Date(new Date(2018, 1, 1, 0, 0, 0).setSeconds(time));
return rootDate;
}
here you can see, I set static chart data as data: [new Date(formatTime(360)).getTime()] I need to set dynamic JSOn object to chart data from JSON object.
I have the following JSON object.
[{
day: "YYY",
second: "100",
second2: "125"
}, {
day: "XXX",
second: "145",
second2: "117"
}, {
day: "TTT",
second: "565",
second2: "340"
}, {
day: "SSS",
second: "125",
second2: "250"
}]
I receiving separate JSON key from backend as second and second2 .I need to set those fields to Chart series as new date object. how can I do it
2 answers
solution1
2 2019-12-01 10:28:26
If you're thinking about getting a new javascript values parsing some string that contains js codes, Just run eval function and let it do it's magic. Check this code:
let x = 'new Date()';
console.log(eval(x))
solution2
1 ACCPTED 2019-12-01 09:53:32
Assuming that second should populate the first series (average time) and second2 the second series (wait time), you could do this:
series: [{
data: arr.map(function (o) {
return new Date(formatTime(o.second)).getTime();
}),
color: "Blue",
name: "Average time",
type: "line"
},
{
data: arr.map(function (o) {
return new Date(formatTime(o.second2)).getTime();
}),
color: "Red",
name: "Wait time",
type: "bar",
}]
...where arr is the array you get from your back-end (after conversion from JSON of course).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.