From bce596438fffeb51d0928045315b9e89a4b96c10 Mon Sep 17 00:00:00 2001 From: saravanan30erd Date: Fri, 16 Aug 2019 18:36:40 +0400 Subject: [PATCH] add pie chart for showing services status --- static/monit-dashboard.js | 29 ++++++++++++++++++++++++++++- templates/index.html | 10 +++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/static/monit-dashboard.js b/static/monit-dashboard.js index 3971677..9f116f4 100644 --- a/static/monit-dashboard.js +++ b/static/monit-dashboard.js @@ -6,4 +6,31 @@ for (i = 0; i < acc.length; i++) { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } -} \ No newline at end of file +} + +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(); + } +} diff --git a/templates/index.html b/templates/index.html index 28512df..ea73870 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,5 +1,11 @@ $def with (output, now) +$ data = 0.5 + + + + + $ 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

- + + +