Added logarithmic scaling into graph and smoothie.js.

1 files changed, 11 insertions, 7 deletions

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 645447f..d9ce816 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -21,7 +21,7 @@
 <script type="text/javascript">
 
 // Initialize the statistics chart at the bottom.
-var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter});
+var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter, yMaxFormatter: bytesToString, yMinFormatter: bytesToString, valueTransformFunction: logarithmicScaling});
 smoothie.streamTo(document.getElementById("traffic"), 2000);
 
 // For coloring the servers and the chart-lines.
@@ -32,6 +32,10 @@ function makeId(prefix, text) {
     return prefix + text.replace(/\./g, "-");
 }
 
+function logarithmicScaling(value) {
+    return Math.log(value/1000000+1);
+}
+
 function myGraph(el) {
 
     var changed = false;
@@ -332,16 +336,16 @@ function updateGraph(g, data){
 function bytesToString( bytes ) {
     var convertedValue;
     var unit;
-    if (bytes > 1099511627776 ) {
+    if (bytes >= 1099511627776 ) {
         convertedValue = Math.round( (bytes / 1099511627776) * 100 ) / 100 ;
         unit = " TiB";
-    } else if (bytes > 1073741824 ) {
+    } else if (bytes >= 1073741824 ) {
         convertedValue = Math.round( (bytes / 1073741824) * 100 ) / 100 ;
         unit = " GiB";
-    } else if (bytes > 1048576 ) {
+    } else if (bytes >= 1048576 ) {
         convertedValue = Math.round( (bytes / 1048576) * 100 ) / 100 ;
         unit = " MiB";
-    } else if ( bytes > 1024 ) {
+    } else if ( bytes >= 1024 ) {
         convertedValue = Math.round( (bytes / 1024) * 100 ) / 100 ;
 //        convertedValue = Math.round( ( convertedValue / 1024 ) * 100 ) / 100;
         unit = " KiB";
@@ -385,7 +389,7 @@ function updateTrafficGraph(stats, data){
         for (var i = 0; i < stats.length; ++i) {
             var server = servers[stats[i].address];
             if (!server) {
-                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
+                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
                 server.color = colorList(stats[i].address);
                 smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
 //              console.log("Added");
@@ -400,7 +404,7 @@ function updateTrafficGraph(stats, data){
                 // Upload rate in bytes/s
                 server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(data.timestamp - lastTime) * 1000;
                 // Rate in MiB/s
-                server['line'].append(new Date().getTime(), server['uploadRate']/( 1024 * 1024));
+                server['line'].append(new Date().getTime(), server['uploadRate']);
             } else {
                 server['uploadRate'] = 0;
             }