add pie chart for showing services status
This commit is contained in:
parent
00509afc34
commit
bce596438f
|
@ -6,4 +6,31 @@ for (i = 0; i < acc.length; i++) {
|
|||
this.classList.toggle("active");
|
||||
this.nextElementSibling.classList.toggle("show");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw(data) {
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
var colors = ['#40ff00', '#ff0000'];
|
||||
var angles = [Math.PI * 1.5, Math.PI * data];
|
||||
var offset = 0;
|
||||
var beginAngle = 0;
|
||||
var endAngle = 0;
|
||||
var offsetX, offsetY, medianAngle;
|
||||
|
||||
for(var i = 0; i < angles.length; i = i + 1) {
|
||||
beginAngle = endAngle;
|
||||
endAngle = endAngle + angles[i];
|
||||
medianAngle = (endAngle + beginAngle) / 2;
|
||||
offsetX = Math.cos(medianAngle) * offset;
|
||||
offsetY = Math.sin(medianAngle) * offset;
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = colors[i % colors.length];
|
||||
ctx.moveTo(200 + offsetX, 200 + offsetY);
|
||||
ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle);
|
||||
ctx.lineTo(200 + offsetX, 200 + offsetY);
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
$def with (output, now)
|
||||
$ data = 0.5
|
||||
<html>
|
||||
<head>
|
||||
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body onload='draw($data);'>
|
||||
$ errors = 0
|
||||
$ color = "green"
|
||||
$for server in range(len(output)):
|
||||
|
@ -79,4 +85,6 @@ $for server in range(len(output)):
|
|||
Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
|
||||
<br><br>
|
||||
|
||||
<script src="static/monit-dashboard.js" type="text/javascript"></script>
|
||||
<canvas id="canvas" width="400" height="400"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue