add legend in chart
This commit is contained in:
parent
35520528e4
commit
097ea5b351
|
@ -73,6 +73,7 @@ def getMonit():
|
|||
|
||||
print(datetime.datetime.now())
|
||||
output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 32), (u'monitoring1', 0)]), 's_rate': {'green': 70.0, 'red': 30.0}, 'name': u'MY Environment2'})
|
||||
output.append({'url': u'https://monit.xxx.xxx', 'result': OrderedDict([(u'staging', 0), (u'monitoring1', 0)]), 's_rate': {'green': 100.0, 'red': 0.0}, 'name': u'MY Environment3'})
|
||||
return(output)
|
||||
|
||||
# Classes
|
||||
|
|
|
@ -11,6 +11,7 @@ for (i = 0; i < acc.length; i++) {
|
|||
function draw(rate) {
|
||||
console.log(rate)
|
||||
var percentage = [rate['green'], rate['red']];
|
||||
var status = ['Ok', 'Error'];
|
||||
var green = (percentage[0]*2)/100;
|
||||
var red = (percentage[1]*2)/100;
|
||||
var canvas = document.getElementById("canvas");
|
||||
|
@ -22,6 +23,7 @@ function draw(rate) {
|
|||
var endAngle = 0;
|
||||
var offsetX, offsetY, medianAngle;
|
||||
|
||||
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||
for(var i = 0; i < angles.length; i = i + 1) {
|
||||
beginAngle = endAngle;
|
||||
endAngle = endAngle + angles[i];
|
||||
|
@ -31,11 +33,20 @@ function draw(rate) {
|
|||
|
||||
ctx.beginPath();
|
||||
|
||||
if(percentage[i] !== 0) {
|
||||
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();
|
||||
|
||||
ctx.rect(canvas.width - 105, i * 20 + 10, 10, 10);
|
||||
ctx.fill();
|
||||
ctx.font = "13px sans-serif";
|
||||
//ctx.font = "20px Georgia";
|
||||
ctx.fillText(status[i] + " - " + Number(percentage[i]).toFixed(1) + " %",
|
||||
canvas.width - 85, i * 20 + 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue