15.html 2.04 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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				animationEnabled: true,
				title: {
					text: "Hourly Average CPU Utilization"
				},
				axisX: {
					title: "Time"
				},
				axisY: {
					title: "Percentage",
					suffix: "%"
				},
				data: [{
					type: "line",
					name: "CPU Utilization",
					connectNullData: true,
					//nullDataLineDashType: "solid",
					xValueType: "dateTime",
					xValueFormatString: "DD MMM hh:mm TT",
					yValueFormatString: "#,##0.##'%'",
					dataPoints: [{
							x: 1501048673000,
							y: 35.939
						},
						{
							x: 1501052273000,
							y: 40.896
						},
						{
							x: 1501055873000,
							y: 56.625
						},
						{
							x: 1501059473000,
							y: 26.003
						},
						{
							x: 1501063073000,
							y: 20.376
						},
						{
							x: 1501066673000,
							y: 19.774
						},
						{
							x: 1501070273000,
							y: 23.508
						},
						{
							x: 1501073873000,
							y: 18.577
						},
						{
							x: 1501077473000,
							y: 15.918
						},
						{
							x: 1501081073000,
							y: null
						}, // Null Data
						{
							x: 1501084673000,
							y: 10.314
						},
						{
							x: 1501088273000,
							y: 10.574
						},
						{
							x: 1501091873000,
							y: 14.422
						},
						{
							x: 1501095473000,
							y: 18.576
						},
						{
							x: 1501099073000,
							y: 22.342
						},
						{
							x: 1501102673000,
							y: 22.836
						},
						{
							x: 1501106273000,
							y: 23.220
						},
						{
							x: 1501109873000,
							y: 23.594
						},
						{
							x: 1501113473000,
							y: 24.596
						},
						{
							x: 1501117073000,
							y: 31.947
						},
						{
							x: 1501120673000,
							y: 31.142
						}
					]
				}]
			});
			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>