From 3341ddd392d1c13168736c45eb2907926a92d6a4 Mon Sep 17 00:00:00 2001
From: Patrick McDonagh <pmcdonagh@henry-pump.com>
Date: Wed, 14 Dec 2016 14:35:39 -0600
Subject: [PATCH] Updated limits and added Charger Voltage

---
 History.html  |   2 +-
 Overview.html | 510 ++++++++++++++++++++++++++------------------------
 2 files changed, 269 insertions(+), 243 deletions(-)

diff --git a/History.html b/History.html
index 0f9bf4d..ce9a032 100644
--- a/History.html
+++ b/History.html
@@ -1,4 +1,4 @@
-<div class='clearfix col-xs-12' style='height: 450px' id="dynamicChart" data-chart="dynamicchart" data-daysofhistory="7"  data-chartlabel="Data" data-ylabel="" data-xlabel="Date" data-units=""  data-channelnames="abbflow.battery_voltage,abbflow.volume_flow,abbflow.today_volume,abbflow.yesterday_volume,abbflow.accumulated_volume,abbflow.last_calculation_period_volume,abbflow.differential_pressure,abbflow.static_pressure,abbflow.temperature"></div>
+<div class='clearfix col-xs-12' style='height: 450px' id="dynamicChart" data-chart="dynamicchart" data-daysofhistory="7"  data-chartlabel="Data" data-ylabel="" data-xlabel="Date" data-units=""  data-channelnames="abbflow.volume_flow,abbflow.today_volume,abbflow.yesterday_volume,abbflow.accumulated_volume,abbflow.last_calculation_period_volume,abbflow.differential_pressure,abbflow.static_pressure,abbflow.temperature,abbflow.battery_voltage,abbflow.charger_voltage"></div>
 <style>
 .dynamic-chart-form {
     background-color: whiteSmoke;
diff --git a/Overview.html b/Overview.html
index a6bb31c..ae353e1 100644
--- a/Overview.html
+++ b/Overview.html
@@ -1,322 +1,348 @@
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Volume Flow</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-volume_flow"
-      data-chart="solidgauge"
-      data-nodename="abbflow.volume_flow"
-      data-units="MCF/Day"
-      data-min="0"
-      data-max="1000"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Volume Flow</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-volume_flow"
+            data-chart="solidgauge"
+            data-nodename="abbflow.volume_flow"
+            data-units="MCF/Day"
+            data-min="0"
+            data-max="1000"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.volume_flow'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="volume_flow">
+            <%= channels["abbflow.volume_flow"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.volume_flow'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="volume_flow">
-      <%= channels["abbflow.volume_flow"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-volume_flow" data-chart="chart" data-nodename1="abbflow.volume_flow" data-datalabel1="Volume Flow" data-daysofhistory="2"  data-chartlabel="Volume Flow" data-ylabel="" data-xlabel="Date" data-units=" MCF/Day"></div>
+    <div style="height:300px" id="chart-volume_flow" data-chart="chart" data-nodename1="abbflow.volume_flow" data-datalabel1="Volume Flow" data-daysofhistory="2"  data-chartlabel="Volume Flow" data-ylabel="" data-xlabel="Date" data-units=" MCF/Day"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Today Volume</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-today_volume"
-      data-chart="solidgauge"
-      data-nodename="abbflow.today_volume"
-      data-units="MCF"
-      data-min="0"
-      data-max="1000"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Today Volume</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-today_volume"
+            data-chart="solidgauge"
+            data-nodename="abbflow.today_volume"
+            data-units="MCF"
+            data-min="0"
+            data-max="1000"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.today_volume'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="today_volume">
+            <%= channels["abbflow.today_volume"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.today_volume'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="today_volume">
-      <%= channels["abbflow.today_volume"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-today_volume" data-chart="chart" data-nodename1="abbflow.today_volume" data-datalabel1="Today Volume" data-daysofhistory="2"  data-chartlabel="Today Volume" data-ylabel="" data-xlabel="Date" data-units=" MCF"></div>
+    <div style="height:300px" id="chart-today_volume" data-chart="chart" data-nodename1="abbflow.today_volume" data-datalabel1="Today Volume" data-daysofhistory="2"  data-chartlabel="Today Volume" data-ylabel="" data-xlabel="Date" data-units=" MCF"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Accumulated Volume</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-accumulated_volume"
-      data-chart="solidgauge"
-      data-nodename="abbflow.accumulated_volume"
-      data-units="MCF"
-      data-min="0"
-      data-max="1000"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Differential Pressure</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-differential_pressure"
+            data-chart="solidgauge"
+            data-nodename="abbflow.differential_pressure"
+            data-units="PSIA"
+            data-min="0"
+            data-max="75"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.differential_pressure'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="differential_pressure">
+            <%= channels["abbflow.differential_pressure"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.accumulated_volume'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="accumulated_volume">
-      <%= channels["abbflow.accumulated_volume"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-accumulated_volume" data-chart="chart" data-nodename1="abbflow.accumulated_volume" data-datalabel1="Accumulated Volume" data-daysofhistory="2"  data-chartlabel="Accumulated Volume" data-ylabel="" data-xlabel="Date" data-units=" MCF"></div>
+    <div style="height:300px" id="chart-differential_pressure" data-chart="chart" data-nodename1="abbflow.differential_pressure" data-datalabel1="Differential Pressure" data-daysofhistory="2"  data-chartlabel="Differential Pressure" data-ylabel="" data-xlabel="Date" data-units=" inH2O"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Differential Pressure</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-differential_pressure"
-      data-chart="solidgauge"
-      data-nodename="abbflow.differential_pressure"
-      data-units="PSIA"
-      data-min="0"
-      data-max="500"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Static Pressure</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-static_pressure"
+            data-chart="solidgauge"
+            data-nodename="abbflow.static_pressure"
+            data-units="PSIA"
+            data-min="0"
+            data-max="150"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.static_pressure'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="static_pressure">
+            <%= channels["abbflow.static_pressure"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.differential_pressure'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="differential_pressure">
-      <%= channels["abbflow.differential_pressure"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-differential_pressure" data-chart="chart" data-nodename1="abbflow.differential_pressure" data-datalabel1="Differential Pressure" data-daysofhistory="2"  data-chartlabel="Differential Pressure" data-ylabel="" data-xlabel="Date" data-units=" inH2O"></div>
+    <div style="height:300px" id="chart-static_pressure" data-chart="chart" data-nodename1="abbflow.static_pressure" data-datalabel1="Static Pressure" data-daysofhistory="2"  data-chartlabel="Static Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSIA"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Static Pressure</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-static_pressure"
-      data-chart="solidgauge"
-      data-nodename="abbflow.static_pressure"
-      data-units="PSIA"
-      data-min="0"
-      data-max="500"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Temperature</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-temperature"
+            data-chart="solidgauge"
+            data-nodename="abbflow.temperature"
+            data-units="deg F"
+            data-min="0"
+            data-max="150"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.temperature'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="temperature">
+            <%= channels["abbflow.temperature"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.static_pressure'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="static_pressure">
-      <%= channels["abbflow.static_pressure"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-static_pressure" data-chart="chart" data-nodename1="abbflow.static_pressure" data-datalabel1="Static Pressure" data-daysofhistory="2"  data-chartlabel="Static Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSIA"></div>
+    <div style="height:300px" id="chart-temperature" data-chart="chart" data-nodename1="abbflow.temperature" data-datalabel1="Temperature" data-daysofhistory="2"  data-chartlabel="Temperature" data-ylabel="" data-xlabel="Date" data-units=" deg F"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Temperature</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-temperature"
-      data-chart="solidgauge"
-      data-nodename="abbflow.temperature"
-      data-units="deg F"
-      data-min="0"
-      data-max="300"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Battery Voltage</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-battery_voltage"
+            data-chart="solidgauge"
+            data-nodename="abbflow.battery_voltage"
+            data-units="V"
+            data-min="0"
+            data-max="25"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.battery_voltage'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="battery_voltage">
+            <%= channels["abbflow.battery_voltage"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.temperature'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="temperature">
-      <%= channels["abbflow.temperature"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-temperature" data-chart="chart" data-nodename1="abbflow.temperature" data-datalabel1="Temperature" data-daysofhistory="2"  data-chartlabel="Temperature" data-ylabel="" data-xlabel="Date" data-units=" deg F"></div>
+    <div style="height:300px" id="chart-battery_voltage" data-chart="chart" data-nodename1="abbflow.battery_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2"  data-chartlabel="Battery Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center'>
-    <h2>Battery Voltage</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-battery_voltage"
-      data-chart="solidgauge"
-      data-nodename="abbflow.battery_voltage"
-      data-units="deg F"
-      data-min="0"
-      data-max="300"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center'>
+        <h2>Charger Voltage</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-charger_voltage"
+            data-chart="solidgauge"
+            data-nodename="abbflow.charger_voltage"
+            data-units="V"
+            data-min="0"
+            data-max="25"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.charger_voltage'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="charger_voltage">
+            <%= channels["abbflow.charger_voltage"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.battery_voltage'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="battery_voltage">
-      <%= channels["abbflow.battery_voltage"].timestamp %>
-    </span>
-  </div>
 </div>
 <div class='col-xs-8'>
-  <div style="height:300px" id="chart-battery_voltage" data-chart="chart" data-nodename1="abbflow.battery_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2"  data-chartlabel="Battery Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
+    <div style="height:300px" id="chart-charger_voltage" data-chart="chart" data-nodename1="abbflow.charger_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2"  data-chartlabel="Charger Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
 </div>
 </div>
 
 <div class='row row-flex box-me'>
-  <div class='col-xs-4 text-center box-me'>
-    <h2>Yesterday Volume</h2>
-    <div class="gauge-box">
-      <div data-labelheight="10"
-      style="height: 170px; background: transparent; margin: 0 auto;"
-      id="gauge-yesterday_volume"
-      data-chart="solidgauge"
-      data-nodename="abbflow.yesterday_volume"
-      data-units="MCF"
-      data-min="0"
-      data-max="1000"
-      data-decimalplaces="2"
-      data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-      data-valuefontsize="18px">
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Yesterday Volume</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-yesterday_volume"
+            data-chart="solidgauge"
+            data-nodename="abbflow.yesterday_volume"
+            data-units="MCF"
+            data-min="0"
+            data-max="1000"
+            data-decimalplaces="2"
+            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+            data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.yesterday_volume'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="yesterday_volume">
+            <%= channels["abbflow.yesterday_volume"].timestamp %>
+        </span>
     </div>
-    <div class="timestamp-box">
-      <a href="#" data-channelId="<%= channels['abbflow.yesterday_volume'].channelId %>" class="data-table" title="Download Channel History">
-        <i class="fa fa-download"></i>
-      </a>
-    </div>
-    <span data-timeupdate="yesterday_volume">
-      <%= channels["abbflow.yesterday_volume"].timestamp %>
-    </span>
-  </div>
 </div>
 
 <div class='col-xs-4 text-center box-me'>
-  <h2>Last Calc. Period Volume</h2>
-  <div class="gauge-box">
-    <div data-labelheight="10"
-    style="height: 170px; background: transparent; margin: 0 auto;"
-    id="gauge-last_calculation_period_volume"
-    data-chart="solidgauge"
-    data-nodename="abbflow.last_calculation_period_volume"
-    data-units="SCF"
-    data-min="0"
-    data-max="1000"
-    data-decimalplaces="2"
-    data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
-    data-valuefontsize="18px">
-  </div>
-  <div class="timestamp-box">
-    <a href="#" data-channelId="<%= channels['abbflow.last_calculation_period_volume'].channelId %>" class="data-table" title="Download Channel History">
-      <i class="fa fa-download"></i>
-    </a>
-  </div>
-  <span data-timeupdate="last_calculation_period_volume">
-    <%= channels["abbflow.last_calculation_period_volume"].timestamp %>
-  </span>
+    <h2>Last Calc. Period Volume</h2>
+    <div class="gauge-box">
+        <div data-labelheight="10"
+        style="height: 170px; background: transparent; margin: 0 auto;"
+        id="gauge-last_calculation_period_volume"
+        data-chart="solidgauge"
+        data-nodename="abbflow.last_calculation_period_volume"
+        data-units="SCF"
+        data-min="0"
+        data-max="1000"
+        data-decimalplaces="2"
+        data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+        data-valuefontsize="18px">
+    </div>
+    <div class="timestamp-box">
+        <a href="#" data-channelId="<%= channels['abbflow.last_calculation_period_volume'].channelId %>" class="data-table" title="Download Channel History">
+            <i class="fa fa-download"></i>
+        </a>
+    </div>
+    <span data-timeupdate="last_calculation_period_volume">
+        <%= channels["abbflow.last_calculation_period_volume"].timestamp %>
+    </span>
 </div>
 </div>
+
+<div class='col-xs-4 text-center'>
+    <h2>Accumulated Volume</h2>
+    <div class="gauge-box">
+        <div data-labelheight="10"
+        style="height: 170px; background: transparent; margin: 0 auto;"
+        id="gauge-accumulated_volume"
+        data-chart="solidgauge"
+        data-nodename="abbflow.accumulated_volume"
+        data-units="MCF"
+        data-min="0"
+        data-max="1000000"
+        data-decimalplaces="2"
+        data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+        data-valuefontsize="18px">
+        </div>
+        <div class="timestamp-box">
+            <a href="#" data-channelId="<%= channels['abbflow.accumulated_volume'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="accumulated_volume">
+            <%= channels["abbflow.accumulated_volume"].timestamp %>
+        </span>
+    </div>
+</div>
 </div>
 
 <style>
 .box-me {
-  position: relative;
-  padding: 0.5em;
-  padding-bottom: 1.5em;
-  border: 1px solid #eee;
-  /*margin: 1em 0;*/
+    position: relative;
+    padding: 0.5em;
+    padding-bottom: 1.5em;
+    border: 1px solid #eee;
+    /*margin: 1em 0;*/
 }
 .box-me .gauge-box {
-  margin-top: -0.25em;
+    margin-top: -0.25em;
 }
 
 .pad15 {
-  margin: 15px 15px;
+    margin: 15px 15px;
 }
 
 .box-me h2 {
-  text-transform: uppercase;
-  font-size: 14px;
-  color: #666;
-  font-weight: 400;
-  letter-spacing: 1px;
-  z-index: 100;
+    text-transform: uppercase;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
 }
 .dynamic-chart-form {
-  background-color: whiteSmoke;
-  padding: 1em 0.5em;
-  margin-top: 1em;
+    background-color: whiteSmoke;
+    padding: 1em 0.5em;
+    margin-top: 1em;
 }
 
 .row-flex {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display:         flex;
-  flex-wrap: wrap;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display:         flex;
+    flex-wrap: wrap;
 }
 .row-flex > [class*='col-'] {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 #systemStatusTimelineContainer h2 {
-  text-transform: uppercase;
-  font-size: 14px;
-  color: #666;
-  font-weight: 400;
-  letter-spacing: 1px;
-  z-index: 100;
+    text-transform: uppercase;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
 }
 </style>