JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<div id="datascan-history-view" style="margin-top:10px">
<div id="nss-scanTimes">
<div data-role="chart"
data-chart-area="{height:350}"
data-legend="{ position: 'bottom' }"
data-tooltip="{visible: 'true', template:kendo.template($('\#ScanTimesTooltipTemplate').html())}"
data-series-defaults="{ type: 'line' }"
data-value-axis="{labels: {format: 'n0'}}"
data-category-axis="{
field:'StartTime', baseUnit:'seconds', baseUnitStep:'auto', maxDateGroups:20,
labels: {template:kendo.template($('\#ScanTimesTemplate').html()),rotation:-45}
}"
data-series="[
{ field: 'ID', name:'ID' },
{ field: 'TotalTime', name:'Total Time' },
{ field: 'PrepareTime', name:'Prepare Time' },
{ field: 'ScanTime', name:'Scan Time'},
{ field: 'StoreTime', name:'Storing Time'},
{ field: 'PostProcessTime', name:'Post Processing Time'},
{ field: 'IndexRebuildTime', name:'Index Rebuild Time' }
]"
data-bind="source: chartDS">
</div>
</div>
</div>
<script type="text/x-kendo-template" id="ScanTimesTooltipTemplate">
<div>
<table>
<tr>
<td>
<b>#=series.name#:</b>
</td>
<td>
<b>#=value#</b>
</td>
</tr>
<tr>
<td>
<b>#='Start Time:'#</b>
</td>
<td>
#=kendo.toString(dataItem.StartTime,'F')#
</td>
</tr>
</table>
</div>
</script>
<script type="text/x-kendo-template" id="ScanTimesTemplate">
#=kendo.toString(value,'d')#
</script>
CSS
.k-grid-excel {
float: right;
}
.k-header {
color: #333;
}
JavaScript
(function () {
'use strict';
var data = {
"Data":[
{
"ID":2446,
"HostName":"WWP-SAES",
"JobName":"Host Scan",
"StartTime": new Date(2015,11,20,15,15,15), //"\/Date(1459278001000)\/",
"StopTime":"\/Date(1459278091280)\/",
"PathCount":"7",
"TotalTime":90,
"FilesPerSecond":0,
"StoredRowsPerSecond":0,
"PrepareTime":3,
"ScanTime":0,
"StoreTime":0,
"PostProcessTime":79,
"ScannedDirs":18,
"ScannedFiles":156,
"StoredRows":422,
"DeletedRows":0,
"PeakMemoryUsage":74776576,
"PeakThreadCount":0,
"Aborted":false,
"Resumed":false,
"Merged":false,
"Version":"4009.70.19894.1603",
"PostScanStoreTime":0,
"IndexRebuildTime":0,
"ErrorCount":7,
"DBRetryCount":0,
"TotalItems":447
},
{
"ID":2445,
"HostName":"WWP-SAES",
"JobName":"Host Scan",
//"StartTime":"\/Date(1459259599000)\/",
"StartTime": new Date(2015,11,19,15,15,15),
"StopTime":"\/Date(1459259681627)\/",
"PathCount":"7",
"TotalTime":82,
"FilesPerSecond":0,
"StoredRowsPerSecond":0,
"PrepareTime":0,
"ScanTime":0,
"StoreTime":0,
"PostProcessTime":78,
"ScannedDirs":18,
"ScannedFiles":156,
"StoredRows":422,
"DeletedRows":0,
"PeakMemoryUsage":73158656,
"PeakThreadCount":0,
"Aborted":false,
"Resumed":false,
"Merged":false,
"Version":"4009.70.19894.1603",
"PostScanStoreTime":0,
"IndexRebuildTime":2,
"ErrorCount":7,
"DBRetryCount":0,
"TotalItems":447
},
{
"ID":2444,
"HostName":"WWP-SAES",
"JobName":"Host Scan",
//"StartTime":"\/Date(1458747405000)\/",
"StartTime": new...