Merge pull request #13 from johndoe75/devel

Added graph auto update per extra config option.  Updated documentation.

README.md

@@ -37,6 +37,7 @@ var config = {
   myself : [],
   host : "http://p2pool.org:9332",
   reload_interval : 30,
+  reload_chart_interval : 600,
   use_fontawesome : true
 }
 ```
@@ -59,6 +60,7 @@ var config = {
   ],
   host : "",
   reload_interval : 30,
+  reload_chart_interval : 600,
   use_fontawesome : true
 }
 ```
@@ -73,6 +75,7 @@ var config = {
   myself : [],
   host : "http://p2pool.org:9332",
   reload_interval : 30,
+  reload_chart_interval : 600,
   use_fontawesome : true
 }
 ```
@@ -86,11 +89,16 @@ var config = {
   myself : [],
   host : "",
   reload_interval : 20,
+  reload_chart_interval : 1200,
   use_fontawesome : true
 }
 ```
 
-to set it to 20 seconds for example.  **Beware** that each API query puts network and CPU load on your p2pool installation.  Avoid decreasing this value too much.  In my tests, 20 to 30 seconds seem to be fair enough.
+to set it to 20 seconds for example.
+
+`reload_chart_interval` sets the amount of seconds until the hashrate graph is reloaded.  In above example, it's configured to 1200 seconds (20 minutes).
+
+**Beware** that each API query puts network and CPU load on your p2pool installation.  Avoid decreasing this value too much.  In my tests, 20 to 30 seconds seem to be fair enough.
 
 ### Disable Fontawesome Bitcoin icon
 
@@ -101,6 +109,7 @@ var config = {
   myself : [],
   host : "",
   reload_interval : 30,
+  reload_chart_interval : 600,
   use_fontawesome : false
 }
 ```
@@ -111,7 +120,7 @@ If this variable is set to `false`, the UI displays the p2pool currency symbol (
 
 ## Roadmap
 
-- Auto update node graph.
+- ~~Auto update node graph.~~
 
 - Replace HighCharts by another graph lib which can still be used on nodes having a fee (nodes considered as commercial)
 

index.html

@@ -250,6 +250,13 @@ <h4>Recent blocks</h4>
       fetchdata();
     });
 
+    $(document).on('update_graph', function(e, eventInfo) {
+      fetchBlocks();
+      console.log(chart.title.text);
+      graphPeriod= chart.title.text.match(/\((.+)\)/)[1] || 'day';
+      fetchGraph(graphPeriod);
+    });
+
     // Fills the list of active miners on this node.  I know, there are
     // zillions of people out there on p2pool.  But I'm typically only
     // interested to see, who is mining on my node.
@@ -512,7 +519,7 @@ <h4>Recent blocks</h4>
             graph_doa_hashrate.push(el);
           });
           graph_doa_hashrate.sort();
-          draw(graph_hashrate, graph_doa_hashrate, 'chart', 800);
+          draw(graph_hashrate, graph_doa_hashrate, 'chart', interval);
         });
       });
     };
@@ -525,10 +532,18 @@ <h4>Recent blocks</h4>
       });
     }, 10 * 1000);
 
+    // update tables and miner data
+
     setInterval(function() {
       $(document).trigger('update');
     }, config.reload_interval * 1000);
 
+    // update blocks and graph
+
+    setInterval(function() {
+      $(document).trigger('update_graph');
+    }, config.reload_chart_interval * 1000);
+
     </script>
   </body>
 </html>

js/charts.js

@@ -1,13 +1,13 @@
-var draw= function(hashrate, doarate, renderTo) {
-  char= new Highcharts.Chart({
+var draw= function(hashrate, doarate, renderTo, interval) {
+  chart= new Highcharts.Chart({
     chart: {
       renderTo: renderTo,
       animation: true,
       borderWidth: 0,
     },
     credits: { enabled: false },
     exporting: { enabled: false },
-    title: { text: 'Node Hash/DOA-Rate' },
+    title: { text: 'Hashrate/DOA rate (' + interval + ')' },
     xAxis: {
       type: 'datetime',
       maxZoom: 24 * 3600,

js/config.example.json

@@ -4,6 +4,9 @@ var config = {
     "LSRfZJf75MtwzrbAUfQgqzdK4hHpY4oMW3"
   ],
   host : "http://localhost:8888",
+  // data reload interval in seconds
   reload_interval : 30,
+  // chart reload interval in seconds
+  reload_chart_interval : 600,
   use_fontawesome: true
 }

js/config.json

@@ -2,6 +2,9 @@ var config = {
   myself : [
   ],
   host : "",
+  // data reload interval in seconds
   reload_interval : 30,
+  // chart reload interval in seconds
+  reload_chart_interval : 600,
   use_fontawesome: true
 }