RWIS Usage Samples

This page is generated with data from this RWIS link to JSON data. Try reloading the page if the visualizations below do not show up after a few seconds. Main JS Function to get RWIS data:
    var getJSON = function(url) 
    {
    	return new Promise(function(resolve, reject) 
    	{
    		var xhr = new XMLHttpRequest();
    		xhr.open('get', url, true);
    		xhr.responseType = 'json';
    		xhr.onload = function() 
    		{
    			var status = xhr.status;
    			if (status == 200) 
    			{ resolve(xhr.response); } 
    			else 
    			{ reject(status); }
    		};
    		xhr.send();
    	});
    };
Usage: In all the code examples below X is set to this link for RWIS data.
Y varies based on each visualization below.
getJSON('X').then(function(data) 
{	
	Y
});

With: 
X = Your URL to RWIS data
Y = Varying code shown below
Dygraph Data Plot:
Code & Dependencies
rel="stylesheet" href="https://www.usbr.gov/js/waterops/dygraph.css"
src="https://www.usbr.gov/js/waterops/dygraph.min.js"

getJSON('X').then(function(data) 
{	
	// TIMESERIES CHART USING DYGRAPHS
	var graphData = [];
	var timeSeriesData = data["and"].parameters["Day.Inst.ReservoirElevation.feet"]["timeinterval"]["Daily"];
	timeSeriesData.forEach(dataPiece => {
	    graphData.push([new Date(dataPiece.datetime), parseInt(dataPiece.value)]);
	});
	new Dygraph(document.getElementById("graphdiv1"),
	    graphData.reverse(), {
	        labels: ["Date", "Value"],
	        ylabel: 'Value',
	        fillGraph: true,
	        color: '#244A9F',
	        highlightCircleSize: 5,
	        pointSize: 1.5,
	        strokeWidth: 1.5
	    }
	);

});
D3 Fill Gauge: (based on data but % shown is non-sensical) Code & Dependencies
src="https://www.usbr.gov/js/waterops/d3.v3.min.js"
src="https://www.usbr.gov/js/waterops/liquidFillGauge.js"

getJSON('X').then(function(data) 
{	
	var fillVal = JSON.stringify(data["Lake Mead"].parameters[
		"Day.Inst.ReservoirElevation.feet"]["timeinterval"]
		["Daily"][0].value, null, 4).replaceAll("\"","");
	var config1 = liquidFillGaugeDefaultSettings();
	config1.circleColor = "#244A9F";
	config1.textColor = "#CB9F5B";
	config1.waveTextColor = "#CB9F5B";
	config1.waveColor = "#244A9F";
	config1.circleThickness = 0.2;
	config1.textVertPosition = 0.2;
	config1.waveAnimateTime = 1000;
	var gauge1 = loadLiquidFillGauge("fillgauge1", 
		Math.floor(fillVal/15), config1);
});
Displaying JSON Content:
Name:
Type:
Data:
Code & Dependencies
src="https://www.usbr.gov/js/lib/jquery.js"

getJSON('X').then(function(data) 
{	
	jsonName.innerText = JSON.stringify(data["Lake Mead"].description, 
		null, 4);
	jsonType.innerText = JSON.stringify(data["Lake Mead"].type, 
		null, 4);
	jsonData.innerText = JSON.stringify(data["Lake Mead"].parameters[
		"Day.Inst.ReservoirElevation.feet"]["timeinterval"]
		["Daily"][0], null, 4) + "," + JSON.stringify(data["Lake Mead"].
		parameters[Day.Inst.ReservoirElevation.feet"]["timeinterval"]
		["Daily"][1], null, 4) + ", ..., " + JSON.stringify(data[
		"Lake Mead"].parameters["Day.Inst.ReservoirElevation.feet"]
		["timeinterval"]["Daily"][data["Lake Mead"].parameters[
		"Day.Inst.ReservoirElevation.feet"]["timeinterval"]["Daily"]
		.length - 1], null, 4);
});
Leaflet Mapping:
Code & Dependencies
script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"

getJSON('X').then(function(data) 
{	
	var dataLat = JSON.stringify(data["Lake Mead"].latitude, null, 4)
		.replaceAll("\"","");
	var dataLon = JSON.stringify(data["Lake Mead"].longitude, null, 4)
		.replaceAll("\"","");
	mapLatLon.innerText = "JSON coordinates: " + dataLat + ", " + dataLon;
	var map = L.map('map').setView([dataLat, dataLon], 13);	
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	{
		maxZoom: 19,
		minZoom: 9
	}).addTo(map);
	var marker = L.marker([dataLat, dataLon]).addTo(map);
	marker.bindPopup(dataLat + ", " + dataLon).openPopup();	
});
Excel Macro Excel VBA Code
Sub RWIS_Query()
    	
    	' Build RWIS URL
    	' Template: https://water.usbr.gov/api/web/app.php/api/series?
    	'	sites=hdmlc¶meters=Day.Inst.ReservoirElevation.feet&
    	'	start=2017-01-01&end=2017-08-03&format=csv
    	tStart = "2017-01-01"
    	tEnd = "2017-07-01"
    	rwisUrl = "URL;https://water.usbr.gov/api/web/app.php/api/series?" & _
    		"sites=hdmlc¶meters=Day.Inst.ReservoirElevation.feet" & _
    		"&start=" & tStart & "&end=" & tEnd & "&format=csv"
    	
    	' Place data in sheet
    	Sheets("Sheet1").UsedRange.ClearContents
    	With ActiveSheet.QueryTables.Add(Connection:=rwisUrl, Destination:=Range("A1"))
    		.BackgroundQuery = True
    		.TablesOnlyFromHTML = True
    		.Refresh BackgroundQuery = True
    		.SaveData = True
    	End With
    	
    	' Split values using a comma delimiter
    	Columns("A:A").Select
    	Selection.TextToColumns Destination:=Range("A1"), DataType:=xlDelimited, _
    		TextQualifier:=xlDoubleQuote, ConsecutiveDelimiter:=False, Tab:=True, _
    		Semicolon:=False, Comma:=True, Space:=False, Other:=False, FieldInfo _
    		:=Array(Array(1, 1), Array(2, 1), Array(3, 1), Array(4, 1), Array(5, 1), Array(6, 1), _
    		Array(7, 1), Array(8, 1), Array(9, 1), Array(10, 1), Array(11, 1), Array(12, 1), Array(13, 1 _
    		), Array(14, 1), Array(15, 1), Array(16, 1), Array(17, 1)), TrailingMinusNumbers:= _
    		True
End Sub