hydrograph-hydrogramme-eng.html

<!--#include virtual="/includes/header-eng.html" -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="scripts/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="scripts/flot/jshashtable-2.1.js"></script>    
<script type="text/javascript" src="scripts/flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="scripts/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="scripts/flot/jquery.flot.stack.js"></script>
<script type="text/javascript">
var data = [];
var data2 = [];
var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
var dataset;
var totalPoints = 60;
var updateInterval = 500;
var now = new Date();
var now2 = new Date();
var date_inc = 0;


function GetData() {
    data.shift();

    while (data.length < totalPoints) {     
        var y = Math.random() * 1000 + 1250;
        var temp = [new Date(now), y];
        now.setDate(now.getDate()+1);

        data.push(temp);
    }

    data2.shift();

    while (data2.length < totalPoints) {
        var y = Math.random() * 800 + 500;
        var temp = [new Date(now2), y];
        now2.setDate(now2.getDate()+1);

        data2.push(temp);
    }
}

var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 1.2,
            fill: true
        },
        stack: true,
        points: {
          show:false
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [1, "day"],
        minTickSize: [2, "month"],
        tickFormatter: function (v, axis) {
          var date = new Date(v);

          if (date.getDate() % 10 == 0) {
            //var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            //var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            //var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return monthNames[date.getMonth()] + " " + date.getDate();
          } else {
            return "";
          }
        },
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxis: {
        min: 0,
        max: 3170,
        tickSize: 5,
        tickFormatter: function (v, axis) {
            if (v % 500 == 0) {
                return v;
            } else {
                return "";
            }
        },
        axisLabel: "Hope Discharge (m3s)",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 6
    },
    legend: {        
    },
    grid: {                
    }
};

$(document).ready(function () {
    GetData();

    dataset = [
        { data: data2 },
        { data: data }

    ];

    $.plot($("#flot-placeholder1"), dataset, options);

    function update() {
        GetData();

        $.plot($("#flot-placeholder1"), dataset, options)
        setTimeout(update, updateInterval);
    }

    update();
});
</script>

<h1>Fraser River Hydrograph at Hope, B.C</h1>
<div class="wet-boew-tabbedinterface animate slide-horz tabs-style-1 auto-height">
  <ul class="tabs">
    <li class="default"><a href="#parameters">Parameters</a></li>
    <li><a href="#help">Help</a></li>
  </ul>

  <div class="summary tabs-panel" style="border: 2px solid #eee">
    <div id="parameters">
      <form id="daily_depth">
        <div class="span-4">
          <label for="date">Date:</label>
          <input id="date" type="text" name="date" class="datepicker" />

          <label for="period">Period:</label>
          <select id="period">
            <option value="6 Months">3 Months</option>
            <option value="6 Months">6 Months</option>
            <option value="6 Months">9 Months</option>
            <option value="6 Months">12 Months</option>
          </select>
        </div>

        <div class="span-3">
          <label for="plot">Plot:</label>
          <input id="actual" type="checkbox" name="actual" checked="checked" /> Actual<br />
          <input id="predicted" type="checkbox" name="predicted" checked="checked" /> Predicted
        </div>
      </form>
    </div>

    <div id="help" style="height: 150px">
      <p>
      Avadepth generates hydrographic charts to illustrate the seasonal variations of flow-rates. Each graph contains coloured lines representing actual and predicted flow rates, as well as lines for corresponding periods in two other years (designated flood year and drought year).
      </p>

      <p>
      To create a hydrograph,
      </p>

      <ul>
        <li>Enter a date.  Click on the date text to choose using a calendar.</li>
        <li>Select the time-span for the plot</li>
        <li>Click on any of the check boxes to disable the display of a hydrograph line.</li>
      </ul>
    </div>
  </div>
</div>

<div class="clear"></div>
<div class="span-12 demo-container">
<div id="flot-placeholder1" style="width:550px;height:300px;margin:0 auto"></div>
</div> 
<!--#include virtual="/includes/footer-eng.html" -->