04.html 1.56 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">	
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Server Performance"
	},
	axisX: {
		title:"Server Load (in TPS)"
	},
	axisY:{
		title: "Response Time (in ms)"
	},
	data: [{
		type: "scatter",
		toolTipContent: "<span style='color:#4F81BC '><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
		name: "Server Pluto",
		showInLegend: true,
		dataPoints: [
			{ x: 23, y: 330 },
			{ x: 28, y: 390 },
			{ x: 39, y: 400 },
			{ x: 34, y: 430 },
			{ x: 24, y: 321 },
			{ x: 29, y: 250 },
			{ x: 29, y: 370 },
			{ x: 23, y: 290 },
			{ x: 27, y: 250 },
			{ x: 34, y: 380 },
			{ x: 36, y: 320 },
			{ x: 33, y: 405 },
			{ x: 32, y: 453 },
			{ x: 21, y: 292 }
		]
	},
	{
		type: "scatter",
		name: "Server Mars",
		showInLegend: true, 
		toolTipContent: "<span style='color:#C0504E '><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
		dataPoints: [
			{ x: 19, y: 200 },
			{ x: 27, y: 300 },
			{ x: 35, y: 330 },
			{ x: 32, y: 190 },
			{ x: 29, y: 189 },
			{ x: 22, y: 150 },
			{ x: 27, y: 200 },
			{ x: 26, y: 190 },
			{ x: 24, y: 225 },
			{ x: 33, y: 330 },
			{ x: 34, y: 250 },
			{ x: 30, y: 120 },
			{ x: 37, y: 153 },
			{ x: 24, y: 196 }
		]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>
</html>