forked from pspc-spac/avadepth
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hydrograph-hydrogramme-eng.html
109 lines (100 loc) · 4.53 KB
/
hydrograph-hydrogramme-eng.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!--#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/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="scripts/flot/jquery.flot.stack.js"></script>
<script type="text/javascript" src="scripts/hydrograph-hydrogramme.js"></script>
<h1 class="print_hide">Fraser River Hydrograph</h1>
<div class="grid-12">
<div class="wet-boew-tabbedinterface animate slide-horz tabs-style-1">
<ul class="tabs">
<li class="default"><a href="#graph">Graph</a></li>
<li><a href="#help">Help</a></li>
</ul>
<div class="summary tabs-panel filled" style="border: 2px solid #eee">
<div id="graph" style="height:521px">
<div class="span-2 print_hide">
<form id="daily_depth">
<label for="date">Date:</label>
<select id="month"
class="date"
name="month">
<option value="2">January</option>
<option value="3">February</option>
<option value="4">March</option>
<option value="5">April</option>
<option value="6">May</option>
<option value="7">June</option>
<option value="8">July</option>
<option value="9">August</option>
<option value="10">September</option>
<option value="11">October</option>
<option value="12">November</option>
<option value="1">December</option>
</select>
<select id="year"
name="year"
class="date">
</select>
<input id="alt-date" type="hidden" />
<label for="period">Period:</label>
<select id="period">
<option value="3">12 Months</option>
<option value="2">6 Months</option>
<option value="1">2 Months</option>
<option value="0">1 Month</option>
</select>
<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<br />
<button id="submit"
type="button"
class="button button-accent"
style="margin-top:2.5em;"
name="submit">Apply</button>
<button id="print_hydrograph"
class="button button-accent"
style="display:block;margin-top:1em">Print</button>
</form>
</div>
<div id="hydrograph_report" class="span-9">
<div style="margin-left:58px;color:#555;">
<h2 style="">Fraser River Hydrograph at Hope - 08MF005</h2>
<div style="font-size: 15px; font-weight: bold;">
From <span id="static-month"></span>
<span id="static-year"></span> to
<span id="static-period"></span>
</div>
<div id="loading" style="margin-left: 10px;">
<span class="float:left;">Please wait while we fetch your results...</span>
<img class="spinner" src="images/spinner.gif" alt="" style="width: 30px;height: 30px; margin: -3px 0 0 0; position: absolute;"/>
</div>
<div id="legend_container" style=""></div>
</div>
<div id="hydrograph_chart" style="width:100%"></div>
</div>
</div>
<div id="help">
<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>
<div class="clear"></div>
<!--#include virtual="/includes/footer-eng.html" -->