Example shows multiple Python charts with tooltip, crosshair & range synchronized across charts. i.e. When you interact with one chart using mouse to show crosshair, tooltip, zoom / pan, etc. other charts also respond the same way.
<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
window.onload = function () {
var data = {{ server_metrics|safe }};
var charts = [];
var toolTip = {
shared: true
},
legend = {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
};
var systemDps = [], userDps=[], waitDps = [], buffersDps = [], cacheDps = [], usedDps=[], inboundDps = [], outboundDps = [], writeDps = [], readDps = [];
var cpuChartOptions = {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "CPU Utilization"
},
toolTip: toolTip,
axisY: {
valueFormatString: "#0.#%",
},
legend: legend,
data: [{
type: "splineArea",
showInLegend: "true",
name: "User",
yValueFormatString: "#0.#%",
color: "#64b5f6",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
legendMarkerType: "square",
dataPoints: userDps
},{
type: "splineArea",
showInLegend: "true",
name: "System",
yValueFormatString: "#0.#%",
color: "#2196f3",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
legendMarkerType: "square",
dataPoints: systemDps
},{
type: "splineArea",
showInLegend: "true",
name: "Wait",
yValueFormatString: "#0.#%",
color: "#1976d2",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
legendMarkerType: "square",
dataPoints: waitDps
}]
};
var memoryChartOptions = {
animationEnabled: true,
theme: "light2",
title:{
text: "Memory Usage"
},
axisY: {
suffix: " GB"
},
toolTip: toolTip,
legend: legend,
data: [{
type: "splineArea",
showInLegend: "true",
name: "Cache",
color: "#e57373",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## GB",
legendMarkerType: "square",
dataPoints: cacheDps
},{
type: "splineArea",
showInLegend: "true",
name: "Buffers",
color: "#f44336",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## GB",
legendMarkerType: "square",
dataPoints: buffersDps
},{
type: "splineArea",
showInLegend: "true",
name: "Used",
color: "#d32f2f",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## GB",
legendMarkerType: "square",
dataPoints: usedDps
}]
}
var networkChartOptions = {
animationEnabled: true,
theme: "light2",
title:{
text: "Network Traffic"
},
axisY: {
suffix: " Kb/s"
},
toolTip: toolTip,
legend: legend,
data: [{
type: "splineArea",
showInLegend: "true",
name: "Outbound",
color: "#81c784",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## Kb/s",
legendMarkerType: "square",
dataPoints: outboundDps
},{
type: "splineArea",
showInLegend: "true",
name: "Inbound",
color: "#388e3c",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## Kb/s",
legendMarkerType: "square",
dataPoints: inboundDps
}]
}
var diskChartOptions = {
animationEnabled: true,
theme: "light2",
title:{
text: "Disk I/O (IOPS)"
},
axisY: {},
toolTip: toolTip,
legend: legend,
data: [{
type: "splineArea",
showInLegend: "true",
name: "Write",
color: "#ffb74d",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## ops/second",
legendMarkerType: "square",
dataPoints: writeDps
},{
type: "splineArea",
showInLegend: "true",
name: "Read",
color: "#f57c00",
xValueType: "dateTime",
xValueFormatString: "DD MMM YY HH:mm",
yValueFormatString: "#.## ops/second",
legendMarkerType: "square",
dataPoints: readDps
}]
}
charts.push(new CanvasJS.Chart("chartContainer1", cpuChartOptions));
charts.push(new CanvasJS.Chart("chartContainer2", memoryChartOptions));
charts.push(new CanvasJS.Chart("chartContainer3", networkChartOptions));
charts.push(new CanvasJS.Chart("chartContainer4", diskChartOptions));
for (var i = 1; i < data.length; i++) {
systemDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].system)});
userDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].user)});
waitDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].wait)});
buffersDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].buffers)});
cacheDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].cache)});
usedDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].used)});
inboundDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].inbound)});
outboundDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].outbound)});
writeDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].write)});
readDps.push({x: parseInt(data[i].time), y: parseFloat(data[i].read)});
}
for( var i = 0; i < charts.length; i++){
charts[i].options.axisX = {
labelAngle: 0,
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: "HH:mm"
}
}
}
syncCharts(charts, true, true, true); // syncCharts(charts, syncToolTip, syncCrosshair, syncAxisXRange)
for( var i = 0; i < charts.length; i++){
charts[i].render();
}
function syncCharts(charts, syncToolTip, syncCrosshair, syncAxisXRange) {
if(!this.onToolTipUpdated){
this.onToolTipUpdated = function(e) {
for (var j = 0; j < charts.length; j++) {
if (charts[j] != e.chart)
charts[j].toolTip.showAtX(e.entries[0].xValue);
}
}
}
if(!this.onToolTipHidden){
this.onToolTipHidden = function(e) {
for( var j = 0; j < charts.length; j++) {
if(charts[j] != e.chart)
charts[j].toolTip.hide();
}
}
}
if(!this.onCrosshairUpdated){
this.onCrosshairUpdated = function(e) {
for(var j = 0; j < charts.length; j++) {
if(charts[j] != e.chart)
charts[j].axisX[0].crosshair.showAt(e.value);
}
}
}
if(!this.onCrosshairHidden){
this.onCrosshairHidden = function(e) {
for( var j = 0; j < charts.length; j++) {
if(charts[j] != e.chart)
charts[j].axisX[0].crosshair.hide();
}
}
}
if(!this.onRangeChanged){
this.onRangeChanged = function(e) {
for (var j = 0; j < charts.length; j++) {
if (e.trigger === "reset") {
charts[j].options.axisX.viewportMinimum = charts[j].options.axisX.viewportMaximum = null;
charts[j].options.axisY.viewportMinimum = charts[j].options.axisY.viewportMaximum = null;
charts[j].render();
} else if (charts[j] !== e.chart) {
charts[j].options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
charts[j].options.axisX.viewportMaximum = e.axisX[0].viewportMaximum;
charts[j].render();
}
}
}
}
for(var i = 0; i < charts.length; i++) {
//Sync ToolTip
if(syncToolTip) {
if(!charts[i].options.toolTip)
charts[i].options.toolTip = {};
charts[i].options.toolTip.updated = this.onToolTipUpdated;
charts[i].options.toolTip.hidden = this.onToolTipHidden;
}
//Sync Crosshair
if(syncCrosshair) {
if(!charts[i].options.axisX)
charts[i].options.axisX = { crosshair: { enabled: true }};
charts[i].options.axisX.crosshair.updated = this.onCrosshairUpdated;
charts[i].options.axisX.crosshair.hidden = this.onCrosshairHidden;
}
//Sync Zoom / Pan
if(syncAxisXRange) {
charts[i].options.zoomEnabled = true;
charts[i].options.rangeChanged = this.onRangeChanged;
}
}
}
}
</script>
<style>
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 50%;
height: 270px;
}
</style>
</head>
<body>
<div class="row">
<div class="col"id="chartContainer1"></div>
<div class="col" id="chartContainer2"></div>
</div>
<div class="row">
<div class="col" id="chartContainer3"></div>
<div class="col" id="chartContainer4"></div>
</div>
<script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>
from django.shortcuts import render
import json
import os
def index(request):
dir_path = os.path.dirname(os.path.realpath(__file__))
data = open(dir_path + "/static/server-metrics.json").read()
server_metrics = json.loads(data)
return render(request, "index.html", { "server_metrics": server_metrics})
[
{ "read":0.9,"time":1548959400000,"used":1.32,"user":0.042,"wait":0.007,"cache":5.19,"write":6.81,"system":0.015,"buffers":2.12,"inbound":221,"outbound":350 },
{ "read":1.21,"time":1548963000000,"used":1.323,"user":0.073,"wait":0.005,"cache":6.22,"write":6.31,"system":0.034,"buffers":2.15,"inbound":245,"outbound":450 },
{ "read":2.5,"time":1548966600000,"used":1.331,"user":0.055,"wait":0.006,"cache":7.12,"write":6.51,"system":0.023,"buffers":2.25,"inbound":225,"outbound":380 },
{ "read":2.4,"time":1548970200000,"used":1.334,"user":0.061,"wait":0.003,"cache":7.97,"write":6.91,"system":0.026,"buffers":2.29,"inbound":247,"outbound":420 },
{ "read":2.1,"time":1548973800000,"used":1.335,"user":0.072,"wait":0.002,"cache":8.71,"write":6.82,"system":0.029,"buffers":2.36,"inbound":235,"outbound":442 },
{ "read":2.3,"time":1548977400000,"used":1.339,"user":0.078,"wait":0.005,"cache":5.67,"write":7.12,"system":0.035,"buffers":2.2,"inbound":249,"outbound":489 },
{ "read":1.9,"time":1548981000000,"used":1.339,"user":0.084,"wait":0.006,"cache":6.44,"write":7.21,"system":0.038,"buffers":2.24,"inbound":290,"outbound":495 },
{ "read":1.76,"time":1548984600000,"used":1.342,"user":0.081,"wait":0.004,"cache":7.21,"write":7.31,"system":0.031,"buffers":2.26,"inbound":280,"outbound":474 },
{ "read":1.68,"time":1548988200000,"used":1.345,"user":0.087,"wait":0.006,"cache":7.87,"write":7.25,"system":0.035,"buffers":2.29,"inbound":285,"outbound":503 },
{ "read":1.62,"time":1548991800000,"used":1.365,"user":0.089,"wait":0.008,"cache":8.45,"write":7.5,"system":0.034,"buffers":2.33,"inbound":254,"outbound":510 },
{ "read":1.69,"time":1548995400000,"used":1.375,"user":0.091,"wait":0.004,"cache":5.45,"write":7.61,"system":0.036,"buffers":2.35,"inbound":235,"outbound":550 },
{ "read":1.6,"time":1548999000000,"used":1.375,"user":0.095,"wait":0.005,"cache":6.7,"write":7.65,"system":0.038,"buffers":2.18,"inbound":275,"outbound":594 },
{ "read":1.58,"time":1549002600000,"used":1.345,"user":0.083,"wait":0.006,"cache":7.44,"write":7.73,"system":0.04,"buffers":2.25,"inbound":290,"outbound":545 },
{ "read":1.54,"time":1549006200000,"used":1.321,"user":0.092,"wait":0.009,"cache":7.98,"write":7.76,"system":0.043,"buffers":2.32,"inbound":273,"outbound":535 },
{ "read":1.02,"time":1549009800000,"used":1.296,"user":0.055,"wait":0.006,"cache":4.48,"write":7.24,"system":0.039,"buffers":2.31,"inbound":252,"outbound":445 },
{ "read":1.06,"time":1549013400000,"used":1.32,"user":0.036,"wait":0.002,"cache":3.94,"write":7.21,"system":0.034,"buffers":2.24,"inbound":266,"outbound":500 },
{ "read":1.08,"time":1549017000000,"used":1.35,"user":0.086,"wait":0.009,"cache":5.2,"write":7.13,"system":0.038,"buffers":2.17,"inbound":249,"outbound":453 },
{ "read":1.17,"time":1549020600000,"used":1.34,"user":0.077,"wait":0.003,"cache":3.95,"write":7.09,"system":0.035,"buffers":2.34,"inbound":276,"outbound":424 },
{ "read":1.1,"time":1549024200000,"used":1.32,"user":0.089,"wait":0.006,"cache":3.37,"write":6.98,"system":0.033,"buffers":2.32,"inbound":223,"outbound":392 },
{ "read":1.16,"time":1549027800000,"used":1.317,"user":0.084,"wait":0.004,"cache":1.71,"write":6.73,"system":0.031,"buffers":2.28,"inbound":233,"outbound":439 },
{ "read":1.24,"time":1549031400000,"used":1.314,"user":0.082,"wait":0.006,"cache":0.94,"write":6.78,"system":0.029,"buffers":2.25,"inbound":236,"outbound":370 },
{ "read":1.38,"time":1549035000000,"used":1.31,"user":0.08,"wait":0.005,"cache":4.17,"write":6.68,"system":0.03,"buffers":2.23,"inbound":266,"outbound":330 },
{ "read":1.48,"time":1549038600000,"used":1.309,"user":0.075,"wait":0.004,"cache":2.21,"write":6.6,"system":0.026,"buffers":2.19,"inbound":258,"outbound":300 },
{ "read":1.58,"time":1549042200000,"used":1.306,"user":0.065,"wait":0.003,"cache":3.46,"write":6.3,"system":0.033,"buffers":2.35,"inbound":275,"outbound":400 },
{ "read":1.38,"time":1549045800000,"used":1.298,"user":0.078,"wait":0.007,"cache":3.62,"write":6.39,"system":0.03,"buffers":2.28,"inbound":260,"outbound":485 },
{ "read":1.58,"time":1549049400000,"used":1.295,"user":0.072,"wait":0.005,"cache":4.72,"write":5.99,"system":0.024,"buffers":2.24,"inbound":220,"outbound":495 },
{ "read":0.69,"time":1549053000000,"used":1.341,"user":0.049,"wait":0.003,"cache":3.69,"write":5.78,"system":0.02,"buffers":2.14,"inbound":239,"outbound":544 },
{ "read":0.38,"time":1549056600000,"used":1.343,"user":0.066,"wait":0.005,"cache":8.01,"write":6.28,"system":0.025,"buffers":2.11,"inbound":270,"outbound":500 },
{ "read":1.63,"time":1549060200000,"used":1.351,"user":0.077,"wait":0.004,"cache":7.93,"write":7.53,"system":0.029,"buffers":2.14,"inbound":265,"outbound":460 },
{ "read":1.94,"time":1549063800000,"used":1.355,"user":0.059,"wait":0.002,"cache":7.78,"write":7.03,"system":0.033,"buffers":2.17,"inbound":275,"outbound":453 },
{ "read":2.83,"time":1549067400000,"used":1.355,"user":0.082,"wait":0.005,"cache":6.52,"write":7.24,"system":0.029,"buffers":2.27,"inbound":234,"outbound":424 },
{ "read":2.63,"time":1549071000000,"used":1.359,"user":0.088,"wait":0.004,"cache":8.49,"write":7.64,"system":0.024,"buffers":2.31,"inbound":220,"outbound":445 },
{ "read":2.83,"time":1549074600000,"used":1.363,"user":0.076,"wait":0.006,"cache":5.26,"write":7.55,"system":0.028,"buffers":2.38,"inbound":232,"outbound":439 },
{ "read":2.73,"time":1549078200000,"used":1.365,"user":0.085,"wait":0.005,"cache":6.02,"write":7.85,"system":0.034,"buffers":2.22,"inbound":210,"outbound":392 },
{ "read":2.63,"time":1549081800000,"used":1.386,"user":0.091,"wait":0.007,"cache":7.68,"write":7.93,"system":0.037,"buffers":2.26,"inbound":230,"outbound":370 },
{ "read":2.49,"time":1549085400000,"used":1.396,"user":0.093,"wait":0.008,"cache":8.27,"write":8.04,"system":0.03,"buffers":2.28,"inbound":206,"outbound":330 },
{ "read":2.41,"time":1549089000000,"used":1.365,"user":0.095,"wait":0.005,"cache":8.26,"write":7.98,"system":0.034,"buffers":2.31,"inbound":239,"outbound":400 },
{ "read":2.35,"time":1549092600000,"used":1.341,"user":0.099,"wait":0.004,"cache":8.8,"write":8.23,"system":0.033,"buffers":2.35,"inbound":263,"outbound":300 },
{ "read":2.42,"time":1549096200000,"used":1.304,"user":0.087,"wait":0.007,"cache":4.83,"write":8.34,"system":0.035,"buffers":2.37,"inbound":243,"outbound":377 },
{ "read":2.33,"time":1549099800000,"used":1.328,"user":0.096,"wait":0.008,"cache":4.29,"write":8.38,"system":0.037,"buffers":2.2,"inbound":265,"outbound":477 },
{ "read":2.31,"time":1549103400000,"used":1.358,"user":0.046,"wait":0.006,"cache":5.55,"write":8.46,"system":0.039,"buffers":2.27,"inbound":253,"outbound":407 },
{ "read":2.27,"time":1549107000000,"used":1.348,"user":0.065,"wait":0.008,"cache":4.3,"write":8.49,"system":0.041,"buffers":2.34,"inbound":267,"outbound":447 },
{ "read":1.39,"time":1549110600000,"used":1.328,"user":0.06,"wait":0.006,"cache":3.72,"write":7.6,"system":0.038,"buffers":2.31,"inbound":298,"outbound":469 },
{ "read":1.43,"time":1549114200000,"used":1.325,"user":0.041,"wait":0.007,"cache":2.06,"write":7.58,"system":0.032,"buffers":2.24,"inbound":272,"outbound":516 },
{ "read":1.45,"time":1549117800000,"used":1.322,"user":0.091,"wait":0.008,"cache":1.29,"write":7.5,"system":0.035,"buffers":2.17,"inbound":253,"outbound":522 },
{ "read":1.54,"time":1549121400000,"used":1.318,"user":0.082,"wait":0.005,"cache":4.52,"write":7.46,"system":0.033,"buffers":2.34,"inbound":293,"outbound":501 },
{ "read":1.47,"time":1549125000000,"used":1.317,"user":0.094,"wait":0.007,"cache":2.56,"write":7.35,"system":0.031,"buffers":2.32,"inbound":291,"outbound":530 },
{ "read":1.53,"time":1549128600000,"used":1.314,"user":0.09,"wait":0.005,"cache":3.82,"write":7.1,"system":0.029,"buffers":2.28,"inbound":299,"outbound":537 },
{ "read":1.61,"time":1549132200000,"used":1.306,"user":0.088,"wait":0.006,"cache":3.97,"write":7.15,"system":0.027,"buffers":2.25,"inbound":269,"outbound":577 },
{ "read":1.75,"time":1549135800000,"used":1.303,"user":0.086,"wait":0.008,"cache":5.07,"write":7.06,"system":0.028,"buffers":2.23,"inbound":266,"outbound":572 },
{ "read":1.85,"time":1549139400000,"used":1.33,"user":0.08,"wait":0.009,"cache":4.04,"write":6.97,"system":0.024,"buffers":2.19,"inbound":256,"outbound":562 },
{ "read":1.95,"time":1549143000000,"used":1.333,"user":0.071,"wait":0.005,"cache":7.34,"write":6.67,"system":0.031,"buffers":2.35,"inbound":282,"outbound":477 },
{ "read":1.75,"time":1549146600000,"used":1.341,"user":0.083,"wait":0.006,"cache":8.37,"write":6.76,"system":0.028,"buffers":2.28,"inbound":299,"outbound":377 },
{ "read":1.95,"time":1549150200000,"used":1.344,"user":0.077,"wait":0.002,"cache":7.27,"write":6.35,"system":0.022,"buffers":2.24,"inbound":285,"outbound":407 },
{ "read":1.06,"time":1549153800000,"used":1.345,"user":0.054,"wait":0.005,"cache":7.11,"write":6.15,"system":0.018,"buffers":2.14,"inbound":240,"outbound":447 },
{ "read":0.75,"time":1549157400000,"used":1.349,"user":0.072,"wait":0.003,"cache":5.85,"write":6.65,"system":0.023,"buffers":2.11,"inbound":254,"outbound":516 },
{ "read":1.19,"time":1549161000000,"used":1.352,"user":0.077,"wait":0.006,"cache":7.82,"write":7.1,"system":0.027,"buffers":2.14,"inbound":237,"outbound":469 },
{ "read":1.5,"time":1549164600000,"used":1.355,"user":0.059,"wait":0.004,"cache":4.59,"write":6.6,"system":0.03,"buffers":2.17,"inbound":264,"outbound":501 },
{ "read":2.39,"time":1549168200000,"used":1.375,"user":0.082,"wait":0.006,"cache":5.35,"write":6.8,"system":0.026,"buffers":2.27,"inbound":211,"outbound":530 },
{ "read":2.19,"time":1549171800000,"used":1.385,"user":0.088,"wait":0.005,"cache":7.02,"write":7.2,"system":0.02,"buffers":2.31,"inbound":221,"outbound":577 },
{ "read":2.39,"time":1549175400000,"used":1.355,"user":0.076,"wait":0.004,"cache":7.6,"write":7.11,"system":0.024,"buffers":2.38,"inbound":224,"outbound":522 },
{ "read":2.29,"time":1549179000000,"used":1.331,"user":0.085,"wait":0.003,"cache":8.85,"write":7.41,"system":0.031,"buffers":2.22,"inbound":254,"outbound":461 },
{ "read":2.19,"time":1549182600000,"used":1.301,"user":0.091,"wait":0.007,"cache":7.59,"write":7.5,"system":0.034,"buffers":2.26,"inbound":246,"outbound":516 },
{ "read":2.05,"time":1549186200000,"used":1.325,"user":0.093,"wait":0.009,"cache":8.13,"write":7.6,"system":0.027,"buffers":2.28,"inbound":263,"outbound":469 },
{ "read":1.97,"time":1549189800000,"used":1.355,"user":0.095,"wait":0.003,"cache":4.88,"write":7.54,"system":0.031,"buffers":2.31,"inbound":248,"outbound":440 },
{ "read":1.91,"time":1549193400000,"used":1.345,"user":0.099,"wait":0.005,"cache":4.34,"write":7.79,"system":0.03,"buffers":2.35,"inbound":208,"outbound":408 },
{ "read":1.98,"time":1549197000000,"used":1.325,"user":0.087,"wait":0.004,"cache":5.6,"write":7.9,"system":0.032,"buffers":2.37,"inbound":227,"outbound":455 },
{ "read":1.89,"time":1549200600000,"used":1.322,"user":0.096,"wait":0.002,"cache":4.35,"write":7.94,"system":0.034,"buffers":2.2,"inbound":258,"outbound":386 },
{ "read":1.87,"time":1549204200000,"used":1.319,"user":0.046,"wait":0.005,"cache":3.77,"write":8.02,"system":0.036,"buffers":2.27,"inbound":253,"outbound":346 },
{ "read":1.83,"time":1549207800000,"used":1.315,"user":0.065,"wait":0.004,"cache":2.11,"write":8.04,"system":0.038,"buffers":2.34,"inbound":263,"outbound":316 },
{ "read":1.35,"time":1549211400000,"used":1.314,"user":0.057,"wait":0.006,"cache":1.33,"write":7.56,"system":0.035,"buffers":2.29,"inbound":222,"outbound":416 },
{ "read":1.39,"time":1549215000000,"used":1.311,"user":0.039,"wait":0.005,"cache":4.57,"write":7.54,"system":0.037,"buffers":2.22,"inbound":208,"outbound":501 },
{ "read":1.41,"time":1549218600000,"used":1.303,"user":0.089,"wait":0.007,"cache":2.61,"write":7.46,"system":0.04,"buffers":2.15,"inbound":220,"outbound":511 },
{ "read":1.5,"time":1549222200000,"used":1.3,"user":0.08,"wait":0.008,"cache":3.86,"write":7.42,"system":0.038,"buffers":2.32,"inbound":198,"outbound":560 },
{ "read":1.43,"time":1549225800000,"used":1.338,"user":0.092,"wait":0.005,"cache":4.02,"write":7.31,"system":0.036,"buffers":2.3,"inbound":218,"outbound":516 },
{ "read":1.49,"time":1549229400000,"used":1.341,"user":0.088,"wait":0.004,"cache":5.11,"write":7.06,"system":0.034,"buffers":2.26,"inbound":194,"outbound":476 },
{ "read":1.57,"time":1549233000000,"used":1.349,"user":0.086,"wait":0.007,"cache":4.09,"write":7.11,"system":0.032,"buffers":2.23,"inbound":240,"outbound":469 },
{ "read":1.71,"time":1549236600000,"used":1.352,"user":0.083,"wait":0.008,"cache":7.54,"write":7.02,"system":0.033,"buffers":2.21,"inbound":264,"outbound":440 },
{ "read":1.81,"time":1549240200000,"used":1.353,"user":0.078,"wait":0.006,"cache":8.57,"write":6.93,"system":0.029,"buffers":2.17,"inbound":244,"outbound":461 },
{ "read":1.91,"time":1549243800000,"used":1.357,"user":0.068,"wait":0.008,"cache":7.47,"write":6.63,"system":0.036,"buffers":2.33,"inbound":266,"outbound":455 },
{ "read":1.71,"time":1549247400000,"used":1.36,"user":0.081,"wait":0.006,"cache":7.32,"write":6.72,"system":0.033,"buffers":2.26,"inbound":254,"outbound":408 },
{ "read":1.91,"time":1549251000000,"used":1.363,"user":0.075,"wait":0.007,"cache":6.06,"write":6.31,"system":0.026,"buffers":2.22,"inbound":268,"outbound":386 },
{ "read":1.02,"time":1549254600000,"used":1.383,"user":0.052,"wait":0.008,"cache":8.02,"write":6.11,"system":0.022,"buffers":2.12,"inbound":299,"outbound":346 },
{ "read":0.71,"time":1549258200000,"used":1.393,"user":0.069,"wait":0.005,"cache":4.79,"write":6.61,"system":0.027,"buffers":2.09,"inbound":273,"outbound":416 },
{ "read":1.33,"time":1549261800000,"used":1.363,"user":0.078,"wait":0.007,"cache":5.56,"write":7.23,"system":0.032,"buffers":2.16,"inbound":254,"outbound":316 },
{ "read":1.64,"time":1549265400000,"used":1.339,"user":0.06,"wait":0.005,"cache":7.22,"write":6.73,"system":0.027,"buffers":2.19,"inbound":294,"outbound":368 },
{ "read":2.53,"time":1549269000000,"used":1.309,"user":0.083,"wait":0.006,"cache":7.8,"write":6.93,"system":0.022,"buffers":2.29,"inbound":292,"outbound":468 },
{ "read":2.33,"time":1549272600000,"used":1.333,"user":0.089,"wait":0.008,"cache":7.79,"write":7.34,"system":0.016,"buffers":2.33,"inbound":270,"outbound":398 },
{ "read":2.53,"time":1549276200000,"used":1.363,"user":0.077,"wait":0.009,"cache":8.33,"write":7.25,"system":0.02,"buffers":2.4,"inbound":267,"outbound":438 },
{ "read":2.43,"time":1549279800000,"used":1.353,"user":0.086,"wait":0.005,"cache":3.69,"write":7.55,"system":0.028,"buffers":2.24,"inbound":257,"outbound":460 },
{ "read":2.33,"time":1549283400000,"used":1.333,"user":0.092,"wait":0.004,"cache":3.15,"write":7.64,"system":0.03,"buffers":2.28,"inbound":283,"outbound":507 },
{ "read":2.19,"time":1549287000000,"used":1.33,"user":0.094,"wait":0.003,"cache":4.41,"write":7.73,"system":0.024,"buffers":2.3,"inbound":286,"outbound":513 },
{ "read":2.11,"time":1549290600000,"used":1.327,"user":0.096,"wait":0.004,"cache":3.16,"write":7.68,"system":0.028,"buffers":2.33,"inbound":258,"outbound":492 },
{ "read":2.05,"time":1549294200000,"used":1.323,"user":0.081,"wait":0.002,"cache":2.58,"write":7.93,"system":0.027,"buffers":2.37,"inbound":272,"outbound":521 },
{ "read":2.12,"time":1549297800000,"used":1.322,"user":0.088,"wait":0.004,"cache":0.91,"write":8.04,"system":0.029,"buffers":2.39,"inbound":255,"outbound":528 },
{ "read":2.03,"time":1549301400000,"used":1.319,"user":0.097,"wait":0.003,"cache":0.14,"write":8.08,"system":0.03,"buffers":2.22,"inbound":282,"outbound":568 },
{ "read":2.01,"time":1549305000000,"used":1.311,"user":0.047,"wait":0.002,"cache":3.38,"write":8.16,"system":0.033,"buffers":2.29,"inbound":229,"outbound":563 },
{ "read":1.97,"time":1549308600000,"used":1.308,"user":0.066,"wait":0.005,"cache":1.42,"write":8.19,"system":0.035,"buffers":2.36,"inbound":239,"outbound":553 },
{ "read":1.36,"time":1549312200000,"used":1.296,"user":0.057,"wait":0.003,"cache":2.67,"write":7.58,"system":0.032,"buffers":2.29,"inbound":242,"outbound":468 },
{ "read":1.4,"time":1549315800000,"used":1.32,"user":0.039,"wait":0.003,"cache":2.83,"write":7.55,"system":0.038,"buffers":2.22,"inbound":272,"outbound":368 },
{ "read":1.42,"time":1549319400000,"used":1.35,"user":0.089,"wait":0.002,"cache":3.92,"write":7.47,"system":0.041,"buffers":2.15,"inbound":264,"outbound":398 },
{ "read":1.51,"time":1549323000000,"used":1.34,"user":0.08,"wait":0.003,"cache":2.9,"write":7.43,"system":0.039,"buffers":2.32,"inbound":281,"outbound":438 },
{ "read":1.44,"time":1549326600000,"used":1.32,"user":0.092,"wait":0.002,"cache":7.34,"write":7.32,"system":0.037,"buffers":2.3,"inbound":266,"outbound":507 },
{ "read":1.5,"time":1549330200000,"used":1.317,"user":0.088,"wait":0.004,"cache":8.37,"write":7.07,"system":0.035,"buffers":2.26,"inbound":226,"outbound":460 },
{ "read":1.58,"time":1549333800000,"used":1.314,"user":0.086,"wait":0.008,"cache":7.27,"write":7.13,"system":0.033,"buffers":2.23,"inbound":245,"outbound":492 },
{ "read":1.72,"time":1549337400000,"used":1.31,"user":0.083,"wait":0.006,"cache":7.11,"write":7.03,"system":0.034,"buffers":2.21,"inbound":276,"outbound":521 },
{ "read":1.82,"time":1549341000000,"used":1.309,"user":0.078,"wait":0.007,"cache":5.85,"write":6.94,"system":0.03,"buffers":2.17,"inbound":271,"outbound":568 },
{ "read":1.92,"time":1549344600000,"used":1.306,"user":0.068,"wait":0.004,"cache":7.82,"write":6.64,"system":0.037,"buffers":2.33,"inbound":281,"outbound":513 },
{ "read":1.72,"time":1549348200000,"used":1.298,"user":0.081,"wait":0.003,"cache":4.59,"write":6.73,"system":0.034,"buffers":2.26,"inbound":240,"outbound":468 },
{ "read":1.92,"time":1549351800000,"used":1.295,"user":0.075,"wait":0.006,"cache":5.35,"write":6.33,"system":0.027,"buffers":2.22,"inbound":226,"outbound":523 },
{ "read":1.03,"time":1549355400000,"used":1.341,"user":0.052,"wait":0.007,"cache":7.02,"write":6.13,"system":0.023,"buffers":2.12,"inbound":238,"outbound":476 },
{ "read":0.72,"time":1549359000000,"used":1.343,"user":0.069,"wait":0.005,"cache":7.6,"write":6.63,"system":0.028,"buffers":2.09,"inbound":216,"outbound":447 },
{ "read":1.63,"time":1549362600000,"used":1.351,"user":0.078,"wait":0.007,"cache":8.85,"write":7.53,"system":0.033,"buffers":2.13,"inbound":236,"outbound":415 },
{ "read":1.94,"time":1549366200000,"used":1.355,"user":0.06,"wait":0.005,"cache":7.59,"write":7.03,"system":0.029,"buffers":2.15,"inbound":212,"outbound":462 },
{ "read":2.83,"time":1549369800000,"used":1.355,"user":0.083,"wait":0.005,"cache":8.13,"write":7.24,"system":0.024,"buffers":2.26,"inbound":238,"outbound":393 },
{ "read":2.63,"time":1549373400000,"used":1.359,"user":0.089,"wait":0.006,"cache":4.48,"write":7.64,"system":0.019,"buffers":2.3,"inbound":262,"outbound":353 },
{ "read":2.83,"time":1549377000000,"used":1.363,"user":0.077,"wait":0.007,"cache":3.94,"write":7.55,"system":0.023,"buffers":2.36,"inbound":242,"outbound":323 },
{ "read":2.73,"time":1549380600000,"used":1.365,"user":0.086,"wait":0.008,"cache":5.2,"write":7.85,"system":0.03,"buffers":2.21,"inbound":264,"outbound":423 },
{ "read":2.63,"time":1549384200000,"used":1.386,"user":0.092,"wait":0.006,"cache":3.95,"write":7.93,"system":0.032,"buffers":2.25,"inbound":252,"outbound":508 },
{ "read":2.49,"time":1549387800000,"used":1.396,"user":0.094,"wait":0.008,"cache":3.37,"write":8.04,"system":0.026,"buffers":2.26,"inbound":266,"outbound":518 },
{ "read":2.41,"time":1549391400000,"used":1.365,"user":0.096,"wait":0.005,"cache":1.71,"write":7.98,"system":0.03,"buffers":2.3,"inbound":297,"outbound":567 },
{ "read":2.35,"time":1549395000000,"used":1.341,"user":0.081,"wait":0.007,"cache":0.94,"write":8.23,"system":0.029,"buffers":2.34,"inbound":271,"outbound":523 },
{ "read":2.42,"time":1549398600000,"used":1.304,"user":0.088,"wait":0.004,"cache":4.17,"write":8.34,"system":0.031,"buffers":2.36,"inbound":252,"outbound":483 },
{ "read":2.33,"time":1549402200000,"used":1.328,"user":0.097,"wait":0.008,"cache":2.21,"write":8.38,"system":0.032,"buffers":2.19,"inbound":292,"outbound":476 },
{ "read":2.31,"time":1549405800000,"used":1.358,"user":0.047,"wait":0.009,"cache":3.46,"write":8.46,"system":0.034,"buffers":2.26,"inbound":290,"outbound":447 },
{ "read":2.27,"time":1549409400000,"used":1.348,"user":0.066,"wait":0.004,"cache":3.62,"write":8.49,"system":0.037,"buffers":2.32,"inbound":298,"outbound":468 },
{ "read":1.27,"time":1549413000000,"used":1.328,"user":0.077,"wait":0.002,"cache":4.72,"write":7.49,"system":0.033,"buffers":2.31,"inbound":268,"outbound":462 },
{ "read":1.31,"time":1549416600000,"used":1.325,"user":0.081,"wait":0.005,"cache":3.69,"write":7.46,"system":0.04,"buffers":2.24,"inbound":265,"outbound":415 },
{ "read":1.33,"time":1549420200000,"used":1.322,"user":0.088,"wait":0.003,"cache":8.01,"write":7.38,"system":0.044,"buffers":2.17,"inbound":255,"outbound":393 },
{ "read":1.42,"time":1549423800000,"used":1.318,"user":0.086,"wait":0.005,"cache":7.93,"write":7.34,"system":0.041,"buffers":2.34,"inbound":281,"outbound":353 },
{ "read":1.35,"time":1549427400000,"used":1.317,"user":0.074,"wait":0.004,"cache":7.78,"write":7.23,"system":0.039,"buffers":2.32,"inbound":298,"outbound":423 },
{ "read":1.41,"time":1549431000000,"used":1.314,"user":0.062,"wait":0.003,"cache":6.52,"write":6.98,"system":0.038,"buffers":2.28,"inbound":284,"outbound":323 },
{ "read":1.49,"time":1549434600000,"used":1.306,"user":0.071,"wait":0.002,"cache":8.49,"write":7.03,"system":0.036,"buffers":2.25,"inbound":251,"outbound":363 },
{ "read":1.63,"time":1549438200000,"used":1.303,"user":0.077,"wait":0.006,"cache":5.26,"write":6.93,"system":0.037,"buffers":2.23,"inbound":265,"outbound":463 },
{ "read":1.73,"time":1549441800000,"used":1.33,"user":0.074,"wait":0.004,"cache":6.02,"write":6.85,"system":0.033,"buffers":2.19,"inbound":248,"outbound":393 },
{ "read":1.83,"time":1549445400000,"used":1.333,"user":0.066,"wait":0.002,"cache":7.68,"write":6.55,"system":0.039,"buffers":2.35,"inbound":275,"outbound":433 },
{ "read":1.63,"time":1549449000000,"used":1.341,"user":0.061,"wait":0.004,"cache":8.27,"write":6.64,"system":0.037,"buffers":2.28,"inbound":222,"outbound":455 },
{ "read":1.83,"time":1549452600000,"used":1.344,"user":0.053,"wait":0.003,"cache":8.26,"write":6.24,"system":0.03,"buffers":2.24,"inbound":232,"outbound":502 },
{ "read":0.94,"time":1549456200000,"used":1.345,"user":0.071,"wait":0.004,"cache":8.8,"write":6.03,"system":0.026,"buffers":2.14,"inbound":235,"outbound":508 },
{ "read":0.63,"time":1549459800000,"used":1.349,"user":0.047,"wait":0.003,"cache":4.83,"write":6.53,"system":0.031,"buffers":2.11,"inbound":265,"outbound":487 },
{ "read":1.01,"time":1549463400000,"used":1.352,"user":0.053,"wait":0.005,"cache":4.29,"write":6.92,"system":0.036,"buffers":2.14,"inbound":257,"outbound":516 },
{ "read":1.32,"time":1549467000000,"used":1.355,"user":0.077,"wait":0.004,"cache":5.55,"write":6.42,"system":0.027,"buffers":2.17,"inbound":274,"outbound":523 },
{ "read":2.21,"time":1549470600000,"used":1.375,"user":0.059,"wait":0.008,"cache":4.3,"write":6.62,"system":0.022,"buffers":2.27,"inbound":259,"outbound":563 },
{ "read":2.01,"time":1549474200000,"used":1.385,"user":0.066,"wait":0.005,"cache":3.72,"write":7.02,"system":0.016,"buffers":2.31,"inbound":219,"outbound":558 },
{ "read":2.21,"time":1549477800000,"used":1.355,"user":0.073,"wait":0.006,"cache":2.06,"write":6.93,"system":0.02,"buffers":2.38,"inbound":238,"outbound":548 },
{ "read":2.11,"time":1549481400000,"used":1.331,"user":0.079,"wait":0.005,"cache":1.29,"write":7.23,"system":0.028,"buffers":2.22,"inbound":269,"outbound":463 },
{ "read":2.01,"time":1549485000000,"used":1.301,"user":0.083,"wait":0.008,"cache":4.52,"write":7.32,"system":0.03,"buffers":2.26,"inbound":264,"outbound":363 },
{ "read":1.87,"time":1549488600000,"used":1.325,"user":0.077,"wait":0.009,"cache":2.56,"write":7.42,"system":0.024,"buffers":2.28,"inbound":274,"outbound":393 },
{ "read":1.79,"time":1549492200000,"used":1.355,"user":0.068,"wait":0.007,"cache":3.82,"write":7.36,"system":0.028,"buffers":2.31,"inbound":233,"outbound":433 },
{ "read":1.73,"time":1549495800000,"used":1.345,"user":0.081,"wait":0.005,"cache":3.97,"write":7.61,"system":0.027,"buffers":2.35,"inbound":219,"outbound":502 },
{ "read":1.8,"time":1549499400000,"used":1.325,"user":0.092,"wait":0.006,"cache":5.07,"write":7.72,"system":0.029,"buffers":2.37,"inbound":231,"outbound":455 },
{ "read":1.71,"time":1549503000000,"used":1.322,"user":0.094,"wait":0.007,"cache":4.04,"write":7.76,"system":0.03,"buffers":2.2,"inbound":209,"outbound":487 },
{ "read":1.69,"time":1549506600000,"used":1.319,"user":0.088,"wait":0.008,"cache":7.34,"write":7.84,"system":0.033,"buffers":2.27,"inbound":229,"outbound":516 },
{ "read":1.02,"time":1549510200000,"used":1.315,"user":0.083,"wait":0.005,"cache":8.37,"write":7.87,"system":0.035,"buffers":2.34,"inbound":205,"outbound":563 },
{ "read":1.06,"time":1549513800000,"used":1.314,"user":0.079,"wait":0.007,"cache":7.27,"write":7.24,"system":0.032,"buffers":2.31,"inbound":229,"outbound":508 },
{ "read":1.08,"time":1549517400000,"used":1.311,"user":0.083,"wait":0.008,"cache":7.11,"write":7.21,"system":0.043,"buffers":2.24,"inbound":253,"outbound":477 },
{ "read":1.17,"time":1549521000000,"used":1.303,"user":0.091,"wait":0.007,"cache":5.85,"write":7.13,"system":0.046,"buffers":2.17,"inbound":233,"outbound":532 },
{ "read":1.1,"time":1549524600000,"used":1.3,"user":0.088,"wait":0.007,"cache":7.82,"write":7.09,"system":0.044,"buffers":2.34,"inbound":255,"outbound":485 },
{ "read":1.16,"time":1549528200000,"used":1.338,"user":0.076,"wait":0.005,"cache":4.59,"write":6.98,"system":0.041,"buffers":2.32,"inbound":243,"outbound":456 },
{ "read":1.24,"time":1549531800000,"used":1.341,"user":0.064,"wait":0.006,"cache":5.35,"write":6.73,"system":0.04,"buffers":2.28,"inbound":257,"outbound":424 },
{ "read":1.38,"time":1549535400000,"used":1.349,"user":0.073,"wait":0.003,"cache":7.02,"write":6.78,"system":0.038,"buffers":2.25,"inbound":298,"outbound":471 },
{ "read":1.48,"time":1549539000000,"used":1.352,"user":0.079,"wait":0.005,"cache":7.6,"write":6.68,"system":0.039,"buffers":2.23,"inbound":288,"outbound":402 },
{ "read":1.58,"time":1549542600000,"used":1.353,"user":0.076,"wait":0.004,"cache":8.85,"write":6.6,"system":0.035,"buffers":2.19,"inbound":293,"outbound":362 },
{ "read":1.38,"time":1549546200000,"used":1.357,"user":0.068,"wait":0.007,"cache":7.59,"write":6.3,"system":0.041,"buffers":2.35,"inbound":262,"outbound":332 },
{ "read":1.58,"time":1549549800000,"used":1.36,"user":0.062,"wait":0.009,"cache":8.13,"write":6.39,"system":0.039,"buffers":2.28,"inbound":243,"outbound":432 },
{ "read":0.69,"time":1549553400000,"used":1.363,"user":0.055,"wait":0.005,"cache":4.88,"write":5.99,"system":0.032,"buffers":2.24,"inbound":283,"outbound":517 },
{ "read":0.38,"time":1549557000000,"used":1.383,"user":0.073,"wait":0.004,"cache":4.34,"write":5.78,"system":0.027,"buffers":2.14,"inbound":298,"outbound":527 },
{ "read":1.63,"time":1549560600000,"used":1.393,"user":0.048,"wait":0.006,"cache":5.6,"write":6.28,"system":0.033,"buffers":2.11,"inbound":281,"outbound":576 }
]
In the above example, we are using following events and methods which you can further customize if required.
Chart - rangeChanging, rangeChanged
ToolTip - updated, hidden, showAtX, hide
Crosshair - updated, hidden, showAt, hide