JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/release/sugar-edge.min.js"></script>
<div id="chart"></div>
<script type="text/javascript">
var data = [{
"AppName": "AppOne",
"Time": "\/Date(1325491200000)\/",
"Count": 8},
{
"AppName": "AppTwo",
"Time": "\/Date(1325491200000)\/",
"Count": 35},
{
"AppName": "AppThree",
"Time": "\/Date(1325491200000)\/",
"Count": 23},
{
"AppName": "AppFour",
"Time": "\/Date(1325494800000)\/",
"Count": 1},
{
"AppName": "AppTwo",
"Time": "\/Date(1325494800000)\/",
"Count": 27},
{
"AppName": "AppThree",
"Time": "\/Date(1325494800000)\/",
"Count": 38},
{
"AppName": "AppFour",
"Time": "\/Date(1325498400000)\/",
"Count": 7},
{
"AppName": "AppOne",
"Time": "\/Date(1325498400000)\/",
"Count": 4},
{
"AppName": "AppTwo",
"Time": "\/Date(1325498400000)\/",
"Count": 55},
{
"AppName": "AppThree",
"Time": "\/Date(1325498400000)\/",
"Count": 79},
{
"AppName": "AppFour",
"Time": "\/Date(1325502000000)\/",
"Count": 2},
{
"AppName": "AppOne",
"Time": "\/Date(1325502000000)\/",
"Count": 15},
{
"AppName": "AppSix",
"Time": "\/Date(1325502000000)\/",
"Count": 2},
{
"AppName": "AppTwo",
"Time": "\/Date(1325502000000)\/",
"Count": 71},
{
"AppName": "AppThree",
"Time": "\/Date(1325502000000)\/",
"Count": 86},
{
"AppName": "AppFour",
"Time": "\/Date(1325505600000)\/",
"Count": 7},
{
"AppName": "AppOne",
"Time": "\/Date(1325505600000)\/",
"Count": 1},
{
"AppName": "AppSix",
"Time": "\/Date(1325505600000)\/",
"Count": 2},
{
"AppName": "AppTwo",
...
JavaScript
function parseData(data) {
for(var i = 0; i < data.length; i++) {
data[i].Time = Date.create(data[i].Time);
console.log(data[i].Time.format('{hh}:00'));
}
return data;
}
var dataSource = new kendo.data.DataSource({
data: parseData(data)
});
dataSource.group({
field: "AppName",
dir: "asc"
});
dataSource.read();
var view = dataSource.view();
var chartSeries = [];
for (var groupIx = 0; groupIx < view.length; groupIx++) {
var group = view[groupIx];
chartSeries.push({
data: group.items,
field: "Count",
name: group.value
});
}
$("#chart").kendoChart({
theme: "black",
seriesDefaults: {
type: "line"
},
legend: {
position: 'bottom'
},
tooltip: {
visible: true
},
categoryAxis: {
field: "Time",
labels: {
rotation: 90,
template: '#= value #'
//template: '#=value.format("{HH}:00")#'
}
},
series: chartSeries
});