glenwood linear gage

by grant

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.3.2/highcharts.js"></script>
<div id="iceText"></div>
<div id="station"></div>
<div id="updated"></div>
<div id="riverIcon"></div>
<div id="container"></div>

CSS

body {
  font-size: 0.8em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#riverIcon {
  margin: 2px;
}

JavaScript

// usgs

usgsNumber = 13206000;  // glenwood
//usgsNumber = 13339500; // lolo
//usgsNumber = 13266000;  //weiser
url = `https://waterservices.usgs.gov/nwis/iv/?format=json&sites=${usgsNumber}&parameterCd=00060`;

var getCfs = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
	var status = xhr.status;
	if (status === 200) {
	  callback(null, xhr.response);
	 
	} else {
	  callback(status, xhr.response);
	  console.log(status);
    $("#station").html('Something went wrong: ' + status);
	}
  };
  xhr.send();
};
getCfs(url, function(err, result) {
	if (err !== null) {
	  console.log('Something went wrong: ' + err);
	} else {
// set some values	   
stationName = result.value.timeSeries[0].sourceInfo.siteName.trim();
updated = result.value.timeSeries[0].values[0].value[0].dateTime;
cfs = result.value.timeSeries[0].values[0].value[0].value;
shortname = stationName.split(" ").splice(0,2).join(" "); // remove trailing crap
stationNameTitleCase = toTitleCase(shortname) //title case function below
editedTime = updated.slice(0, -13) //'abcde'
updated = editedTime.replace("T", "&nbsp;&nbsp;");
// filter the ice error
//cfs = 499
	if (cfs == -999999) {
  cfs = 0; // for the graph as int.
  iceText = 'Ice'
  $("#iceText").html(iceText);
  $("#riverIcon").html(getRiverIcon(iceText));
} else {
  cfs = cfs;
  iceText = ' cfs'
  $("#iceText").html(cfs + " cfs");
  $("#riverIcon").html(getRiverIcon(cfs));// icon function
}
console.log(cfs)

	$("#updated").html("Updated: " + updated);
	$("#station").html(stationNameTitleCase);
  
  if (cfs < 100) {max = 200 } else
if (cfs < 200) {max = 300 } else
if (cfs < 300) {max = 400 } else
if (cfs < 400) {max = 500 } else
if (cfs < 500) {max = 600 } else
if (cfs < 1000) {max = 1100 } else
{ max = 10000}
// cfs = (json[i].value.timeSeries[0].values[0].value[0].value);
//console.log({cfs});

//===============================================
//chart...