MaxWaterSystem-Lite/HTML/Overview.html

<div class="row row-flex box-me">
    <div class='col-xs-6 text-center box-me'>
        <h2>GPM Flow</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-gpm_flow"
            data-chart="solidgauge"
            data-nodename="flowmonitor.gpm_flow"
            data-units="GPM"
            data-min="0"
            data-max="100"
            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['flowmonitor.gpm_flow'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="gpm_flow">
                <%= channels["flowmonitor.gpm_flow"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-6 text-center box-me'>
        <h2>BPD Flow</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-bpd_flow"
            data-chart="solidgauge"
            data-nodename="flowmonitor.bpd_flow"
            data-units="BPD"
            data-min="0"
            data-max="5000"
            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['flowmonitor.bpd_flow'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="bpd_flow">
                <%= channels["flowmonitor.bpd_flow"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-3 text-center box-me'>
        <h2>Gallons Today</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-gal_total"
            data-chart="solidgauge"
            data-nodename="flowmonitor.gal_total"
            data-units="Gal."
            data-min="0"
            data-max="150000"
            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['flowmonitor.gal_total'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="gal_total">
                <%= channels["flowmonitor.gal_total"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-3 text-center box-me'>
        <h2>Gallons Yesterday</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-gal_total_yesterday"
            data-chart="solidgauge"
            data-nodename="flowmonitor.gal_total_yesterday"
            data-units="Gal."
            data-min="0"
            data-max="150000"
            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['flowmonitor.gal_total_yesterday'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="gal_total_yesterday">
                <%= channels["flowmonitor.gal_total_yesterday"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-3 text-center box-me'>
        <h2>Barrels Today</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-bbl_total"
            data-chart="solidgauge"
            data-nodename="flowmonitor.bbl_total"
            data-units="BBL"
            data-min="0"
            data-max="5000"
            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['flowmonitor.bbl_total'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="bbl_total">
                <%= channels["flowmonitor.bbl_total"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-3 text-center box-me'>
        <h2>Barrels Yesterday</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-bbl_total_yesterday"
            data-chart="solidgauge"
            data-nodename="flowmonitor.bbl_total_yesterday"
            data-units="BBL"
            data-min="0"
            data-max="5000"
            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['flowmonitor.bbl_total_yesterday'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="bbl_total_yesterday">
                <%= channels["flowmonitor.bbl_total_yesterday"].timestamp %>
            </span>
        </div>
    </div>
</div>
<div class="row box-me">
    <div class='col-xs-12'>
        <div style="height:300px"
        id="chart-overview"
        data-chart="chart"
        data-nodename1="flowmonitor.bpd_flow"
        data-datalabel1="Flow Rate (BPD)"
        data-daysofhistory="2"
        data-chartlabel="Last 48 Hours"
        data-ylabel=""
        data-xlabel="Date"
        data-units=""></div>
    </div>
</div>