[UPDATE] block graphs

public/site_assets/bootstrap/js/demo/flot-demo.js

@@ -40,10 +40,10 @@ $(document).ready(function() {
 
         var plotObj = $.plot($("#flot-line-chart"), [{
                 data: sin,
-                label: "sin(x)"
+                label: "test 1"
             }, {
                 data: cos,
-                label: "cos(x)"
+                label: "test 2"
             }],
             options);
     }

public/templates/bootstrap/master.tpl

@@ -72,7 +72,6 @@
     <script src="{$PATH}/js/jquery-1.10.2.js"></script>
     <script src="{$PATH}/js/bootstrap.min.js"></script>
     <script src="{$PATH}/js/plugins/metisMenu/jquery.metisMenu.js"></script>
-    <!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
     <script src="{$PATH}/js/plugins/flot/jquery.flot.js"></script>
     <script src="{$PATH}/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
     <script src="{$PATH}/js/plugins/flot/jquery.flot.resize.js"></script>
@@ -81,5 +80,8 @@
     <script src="{$PATH}/js/mpos.js"></script>
     <script type="text/javascript" src="{$PATH}/js/justgage.1.0.1.min.js"></script>
 
+    <!-- Page-Level Plugin Scripts - Flot -->
+    <!--[if lte IE 8]><script src="{$PATH}/js/excanvas.min.js"></script><![endif]-->
+
 </body>
 </html>

public/templates/bootstrap/statistics/blocks/block_overview_time.tpl

@@ -1,3 +1,4 @@
+<div class="row">
   <div class="col-lg-12">
     <div class="panel panel-info">
       <div class="panel-heading">
@@ -182,3 +183,4 @@
     </div>
     <!-- /.col-lg-12 -->
   </div>
+</div>

public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl

@@ -1,57 +1,86 @@
-<article class="module width_full">
+<script type="text/javascript">
-  <header><h3>Block Shares</h3></header>
+$(function() {
-  <table width="70%" class="visualize" rel="line">
+
-    <caption>Block Shares</caption>
+        var exp = [
-    <thead>
-      <tr>
                    {section block $BLOCKSFOUND step=-1}
-        <th scope="col">{$BLOCKSFOUND[block].height}</th>
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].estshares}],
                    {/section}
-      </tr>
+                  ];
-    </thead>
+        var act = [
-    <tbody>
-      <tr>
-        <th scope="row">Expected</th>
                    {section block $BLOCKSFOUND step=-1}
-        <td>{$BLOCKSFOUND[block].estshares}</td>
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].shares|default:"0"}],
                    {/section}
-      </tr>
+                  ];
-      <tr>
+        var avg = [
-        <th scope="row">Actual</th>
                    {section block $BLOCKSFOUND step=-1}
-        <td>{$BLOCKSFOUND[block].shares|default:"0"}</td>
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].block_avg}],
                    {/section}
-     </tr>
+                  ];
-    {if $GLOBAL.config.payout_system == 'pplns'}<tr>
+
-      <th scope="row">PPLNS</th>
+    function doPlot(position) {
-{section block $BLOCKSFOUND step=-1}
+        $.plot($("#block-line-chart"), [{
-      <td>{$BLOCKSFOUND[block].pplns_shares}</td>
+            data: exp,
-{/section}
+            label: "Expected Shares"
-   </tr>{/if}
+        }, {
-    {if $USEBLOCKAVERAGE}<tr>
+            data: avg,
-      <th scope="row">Average</th>
+            label: "Average Shares"
-{section block $BLOCKSFOUND step=-1}
+        }, {
-      <td>{$BLOCKSFOUND[block].block_avg}</td>
+            data: act,
-{/section}
+            label: "Actual Shares",
-   </tr>{/if}
+            yaxis: 2
-    </tbody>
+        }], {
-  </table>
+            xaxes: [{
-  <table class="tablesorter">
+                mode: 'time'
-    <tbody>
+            }],
-      <tr>
+            yaxes: [{
-        <td>
+                min: 0
-          <a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > ($BLOCKLIMIT - 1)}{$BLOCKSFOUND[$BLOCKLIMIT - 1].height}{/if}&prev=1"><i class="fa fa-chevron-left fa"></i></a>
+            }, {
-        </td>
+                // align if we are to the right
-        <td>
+                alignTicksWithAxis: position == "right" ? 1 : null,
-          <a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > 0}{$BLOCKSFOUND[0].height}{/if}&next=1"><i class="fa fa-chevron-right fa"></i></a>
+                position: position
-        </td>
+            }],
-      </tr>
+            grid: {
-    </tbody>
+                hoverable: true //IMPORTANT! this is needed for tooltip to work
-  </table>
+            },
-  <footer>
+            tooltip: true,
-    <p style="padding-left:30px; padding-redight:30px; font-size:10px;">
+            tooltipOpts: {
-    The graph above illustrates N shares to find a block vs. E Shares expected to find a block based on
+                content: "%s for %x was %y",
-    target and network difficulty and assuming a zero variance scenario.
+                xDateFormat: "%y-%0m-%0d",
-    </p>
+
-  </footer>
+                onHover: function(flotItem, $tooltipEl) {
-</article>
+                    // console.log(flotItem, $tooltipEl);
+                }
+            }
+
+        });
+    }
+
+    doPlot("right");
+
+    $("button").click(function() {
+        doPlot($(this).text());
+    });
+});
+</script>
+
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-info">
+      <div class="panel-heading">
+        Block Shares
+      </div>
+      <div class="panel-body">
+        <div class="panel-group">
+          <div class="panel panel-default">
+          
+            <div class="panel-body">
+              <div class="flot-chart">
+                <div class="flot-chart-content" id="block-line-chart"></div>
+              </div>
+            </div> 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl

@@ -1,3 +1,4 @@
+<div class="row">
   <div class="col-lg-12">
     <div class="panel panel-info">
       <div class="panel-heading">
@@ -78,3 +79,4 @@
     </div>
     <!-- /.col-lg-12 -->
   </div>
+</div>