-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmultisiteDataUSGS.html
223 lines (195 loc) · 11.1 KB
/
multisiteDataUSGS.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE HTML PUBLIC >
<html>
<head>
<title>USGS Multi-Site Data</title>
<meta http-equiv="Cache-Control" content="no-store" />
<meta name="publisher" content="USGS - U.S. Geological Survey, Water Resources">
<meta name="author" content="David K.Yancey, CAWSC, dkyancey@usgs.gov">
<meta name="description" content="Tableau web data connector - multiple USGS sites in union table">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://water.usgs.gov/styles/common.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
<script src="data/sitenames.js" type="text/javascript" ></script>
<script src="data/parameters.js" type="text/javascript" ></script>
<script src="data/qualifiers.js" type="text/javascript" ></script>
<script src="js/isusgs.js" type="text/javascript" ></script>
<script type="text/javascript">
// Present internal parameters when on internal network
var scpt = "script";
if (isUSGS('<!--#echo var="REMOTE_ADDR"-->')){
document.writeln('<'+scpt+' src="data/siteparms.js" type="text/javascript" ></'+scpt+'>');
} else {
document.writeln('<'+scpt+' src="data/siteparms_0.js" type="text/javascript" ></'+scpt+'>');
}
function isUSGS(ip) {
for (var k = 0; k <= usgsIPs.length; k++) {
if (ip.indexOf(usgsIPs[k]) == 0 ) {
console.log("USGS");
return true;
}
}
console.log("Public");
return false;
}
</script>
<script src="js/multisiteDataUSGS.js" type="text/javascript"></script>
<!-- datepicker-->
<!--https://jqueryui.com/datepicker/-->
<link rel="stylesheet" type="text/css" href="tcal/1-simple-calendar/tcal.css" />
<script type="text/javascript" src="tcal/1-simple-calendar/tcal.js"></script>
</head>
<body>
<noscript>
<strong>Tableau web-data-connector requires that JavaScript be enabled. Please enable it to continue.</strong>
</noscript>
<div id="usgsbanner">
<img src="images/usgs_banner.png" height="72" width="100%" />
</div>
<div class="container container-table" style="position: relative;"
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<h3>USGS Multi-Site Data Connector for Tableau<sup style="font-size:small" >®</sup></h3>
<b>Choose format</b> <span class="infobox" style="z-index:5" ><sup><img src="images/questionmark.png" height="14" /></sup>
<div class="about" style="text-align: left;" >Union = all sites in one table<br>Tables = each site as a table.</div> </span>
<div id="format" >
<div style="width: 50%; height: 40px; float: left; padding: 5px 0; background-color:#dfdfdf" title="Union of site data in a single table" >
<img src="images/table.png" height="15" /><br>
<span style="color:navy;" > <img src="images/checkmark.png" height="10" /> <strong>Union</strong> </span>
</div>
<div style="width: 50%; height: 40px; margin-left: 50%;background-color:#fff " title="Each site in a separate table" >
<img src="images/table.png" height="15" />
<img src="images/table.png" height="15" />
<img src="images/table.png" height="15" /><br>
<a href="multitableDataUSGS.html" >
<span style="color:navy;" >Tables</span></a>
</div>
</div>
<br>
<form>
<div class="form-inline"> </div>
<div class="form-inline" id="usgsaccess">
<label for="site_no" class="text-center">Enter one or more USGS Gage Site(s)<span id="siteErrMsg" style="color:red" ></span></label>
<span class="infobox" style="z-index:5" ><sup><img src="images/questionmark.png" height="14" /></sup>
<div class="about">Enter comma-separated, 8- to 15-digit USGS site numbers. <br>Go to <a href="https://maps.waterdata.usgs.gov/mapper/" target="_blank" style="color:cyan" >NWISWeb Mapper</a> to locate gages.</div> </span><br>
<span id="siteInput" style="display:inline"><input id="site_no" style="width: 250px;" autocomplete="off" value="Comma-separated site numbers" type="text" onfocus=this.value="" onchange="getUniqSiteParms()" /></span> <span id="go"><a href="javascript:void(0)" onclick="getUniqSiteParms()" ><img src="images/dn-arrow.png" height="20" title="Populate parameters" alt="Submit" /></a></span><br>
<br>
<label for="site-parms" class="text-center">Available Parameters <span id="access"></span></label><br>
<!--<span id="selParms">Enter site(s) above to see the data parameters</span><br>-->
<span id="selParms"></span><br>
<p id="parmSelect" style="display:inline">
<select id="site-parms" size="5" multiple="true" />
</select>
</p><br>
<input type="checkbox" id="quals" >
<label for="quals"> Include data qualifiers</label><span class="infobox" style="z-index:5" >
<sup><img src="images/questionmark.png" height="14" /></sup>
<div class="about">Qualifiers describe the status of the data value. As in Approved, Provisional, Estimated, etc.</div> </span>
<br><br>
<script>
// Present internal parameters when on internal network (not used)
if (isUSGS('<!--#echo var="REMOTE_ADDR"-->')){
console.log("USGS");
//document.getElementById("access").innerHTML="(USGS internal)";
$('#access').html("(USGS internal)");
document.writeln('<input type="hidden" id="access_level" value="3" />');
} else {
document.writeln('<input type="hidden" id="access_level" value="3" />');
}
</script>
<!-- start date input -->
<label for="start-date-one" class="text-center">Start Date</span></label><span class="infobox" style="z-index:5" >
<sup><img src="images/questionmark.png" height="14" /></sup>
<div class="about">Select range carefully. Very large datasets may not load successfully into Tableau</div> </span><br>
<input autocomplete="off" type="text" id="start-date-one" name="start-date-one" class="tcal" value="" />
<!-- end date input -->
<br><label for="end-date-one" class="text-center">End Date</label><br>
<script>
// set To date = today
var toTime = new Date();
var toTimeIso = toTime.toISOString();
var toDT = toTimeIso.split("T");
var ymd = [];
ymd = toDT[0].split('-');
toDT[0] = ymd[1]+"/"+ymd[2]+"/"+ymd[0];
document.writeln('<input autocomplete="off" type="text" id="end-date-one" name="end-date-one" class="tcal" value="'+toDT[0]+'" />');
</script>
<div id="errorMsg" style="color:red" ></div>
</div>
</form>
<button onclick="location.reload()" type="button" id="reset" class="btn btn-default" style="margin: 10px;">Reset</button>
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get the Data</button>
<br /><br />
<script>
// Create the connector object
// Build parameter select list from all sites
function getUniqSiteParms() {
//$('#go').html("");
// clear the select elements
var s = document.getElementById("site-parms");
var numopts = s.options.length;
for (i = numopts-1; i >= 0; i--) {
s.options[i] = null;
}
// populate the select elements
// e.g. <option value="00020">00020 - Temperature, air (deg C)</option>
var v = document.getElementById("site_no").value;
v = v.replace(/ /g,'');
var sites = new Array();
sites = v.split(',');
// start with parameters of first site
var uniqParms = new Array();
uniqParms = parameters[sites[0]];
// add parameters of other sites that do not already exist
for (j=1; j<sites.length; j++) {
var parm_cds = parameters[sites[j]];
for (k=0; k<parm_cds.length; k++) {
if(typeof uniqParms[parm_cds[k]] === 'undefined') {
uniqParms.push = parm_cds[k];
}
}
}
for (j=0; j<uniqParms.length; j++) {
selectOpt = '<option value="' + uniqParms[j] + '">' + uniqParms[j] + ' - ' + parmcode[uniqParms[j]] + ', ' + parmunits[uniqParms[j]] + '</option>';
$( 'select[id="site-parms"]' ).append( selectOpt );
}
//document.getElementById("selParms").innerHTML="Select one or more:";
$('#selParms').html("Select one or more:");
}
</script>
</div>
</div>
</div>
<div id="usgsfooterbar">
<table border="0" width="100%" ><tr bgcolor="#132747" style="margin-right:1em" ><td width="90%">
<div style="color:white;font-size:12px;font-family:verdana">
<!-- footer nav links -->
<ul class="menu nav">
<span >
<a href="https://www.doi.gov/privacy" target="_blank" >DOI Privacy Policy</a>
</span>
<span >
<a href="https://www.usgs.gov/laws/policies_notices.html" target="_blank" >Legal</a >
</span>
<span >
<a href="https://www2.usgs.gov/laws/accessibility.html" target="_blank" >Accessibility</a >
</span>
<span >
<a href="https://answers.usgs.gov/" target="_blank" >Contact USGS</a>
</span>
<!--/ footer nav links -->
</div>
<!-- /.footer-attrib -->
</td><td align="left" style="padding:.5em">
<span style="color:white;font-size:15px;font-family:verdana">
USGS CAWSC <br />
David Yancey<br />
dkyancey<img src="images/at.png" height="14" alt="-at-" />usgs.gov
</span>
</td></tr></table>
</div>
</body>
</html>