JSFiddle - React, Tailwind, and code Playground
by JSDavi
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
</body>
JavaScript
$("#chart3").kendoChart({
title: {
text: "Server I/O Speed(Mb/s)",
position:"bottom"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",
style: "smooth"
},
series: [{
name: "Server1 I/O",
data: [3.907, 27.943, 17.848, 39.284, 9.263, 8.238, 19.552, 36.855]
},{
name: "Server2 I/O",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 14.339, 12.727]
},{
name: "Server3 I/O",
data: [24.743, 37.295, 27.175, 26.376, 38.153, 48.535, 54.3, 84.3]
},{
name: "Server4 I/O",
data: [40.253, 30.362, 53.519, 71.799, 22.252, 43.343, 50.843, 95.590]
}],
valueAxis: {
labels: {
format: "{0}Mb/s"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [
new Date("2014/04/01 08:00:00"),
new Date("2014/04/01 10:00:00"),
new Date("2014/04/01 12:00:00"),
new Date("2014/04/01 14:00:00"),
new Date("2014/04/01 16:00:00"),
new Date("2014/04/01 18:00:00"),
new Date("2014/04/01 20:00:00"),
new Date("2014/04/01 22:00:00")],
majorGridLines: {
visible: false
},
baeUint:"fit",
baseUnitStep: "auto",
autoBaseUnitSteps: {
days: [3]
}
},
tooltip: {
visible:...