CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by Miguel Roman

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {

var results = {
	'DEV_NO_CACHE': [
  	{ label: 'cars/', y: 100 },
    { label: 'cars/test', y: 150 }
  ],
  'DEV_SI_CACHE': [
  	{ label: 'cars/', y: 10 },
    { label: 'cars/test', y: 15 }
  ],
  'PROD_NOCACHE': [
  	{ label: 'cars/', y: 90 },
    { label: 'cars/test', y: 100 }
  ],
  'PROD_SICACHE': [
  	{ label: 'cars/', y: 5 },
    { label: 'cars/test', y: 10 }
  ]
};

var data = [];

for(var key in results) {
	var result = results[key];
  data.push({
		type: "line",
		name: key,
		showInLegend: true,
		dataPoints: result
	});
}


var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Response Times"
	},
	axisY: {
    includeZero: false,
		title: "milliseconds"
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		verticalAlign: "top",
		horizontalAlign: "center",
		dockInsidePlotArea: true,
		itemclick: toogleDataSeries
	},
	data: data
});
chart.render();

function toogleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else{
		e.dataSeries.visible = true;
	}
	chart.render();
}

}