customize the chart legent texts

bin/monit-dashboard.py

@@ -25,8 +25,8 @@ output = []
 
 # Functions
 
-def calculate_percentage(data):
-    perc = {}
+def calculate_count(data):
+    count = {}
     ls = data.values()
     z, nz = 0,0
     for v in ls:
@@ -34,9 +34,9 @@ def calculate_percentage(data):
             z += 1
         else:
             nz += 1
-    perc['green'] = (float(z)*100)/len(ls)
-    perc['red'] = (float(nz)*100)/len(ls)
-    return perc
+    count['green'] = z
+    count['red'] = nz
+    return count
 
 
 def getMonit():
@@ -65,9 +65,8 @@ def getMonit():
 
             sorted_checks = OrderedDict()
             sorted_checks = OrderedDict(sorted(checks.iteritems(), key=itemgetter(1), reverse=True))
-            perc = calculate_percentage(sorted_checks)
-            print perc
-            server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=perc)
+            count = calculate_count(sorted_checks)
+            server = dict(name=site, url=s['url'], result=sorted_checks, s_rate=count)
 
             output.append(server)
 

static/monit-dashboard.js

@@ -9,8 +9,11 @@ for (i = 0; i < acc.length; i++) {
 }
 
 function draw(rate) {
-  console.log(rate)
-  var percentage = [rate['green'], rate['red']];
+  var count = [rate['green'], rate['red']];
+  var percentage = [
+    (count[0]*100)/(count[0]+count[1]),
+    (count[1]*100)/(count[0]+count[1])
+  ]
   var status = ['Ok', 'Error'];
   var green = (percentage[0]*2)/100;
   var red = (percentage[1]*2)/100;
@@ -41,12 +44,13 @@ function draw(rate) {
       ctx.stroke();
       ctx.fill();
 
-      ctx.rect(canvas.width - 105, i * 20 + 10, 10, 10);
+      ctx.rect(canvas.width - 129, 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);
+      ctx.fillText(status[i] + " - " + count[i] + " (" +
+        Number(percentage[i]).toFixed(1) + "%)",
+        canvas.width - 109, i * 20 + 20);
     }
   }
 }