ERDDAP JSONP to text

Pulls latest data from ERDDAP tabledap for a real-time dashboard display. Uses AJAX and JSONP.

by Jenn Patterson Sevadjian

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="home-dash" id="tiburon-waterDash">
  <h2 class="dash-title">
    Tiburon</h2>
  <div id="timestamp">
    &nbsp;</div>
  <!-- BUTTONS - Nav tabs -->
  <ul class="nav nav-pills dash-pills nav-justified">
    <li>
      <div id="temperature-btn">
        Temperature
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="salinity-btn">
        Salinity
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="chl-btn">
        Chlorophyll
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="odo-btn">
        Oxygen
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
  </ul>
  <ul class="nav nav-pills dash-pills nav-justified" style="padding-top:26px;">
    <li>
      <div id="turbid-btn">
        Turbidity
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="TDS-btn">
        TDS
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="ph-btn">
        pH
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
  </ul>
</div>

<div class="home-dash" id="tiburon-weatherDash">
  <h2 class="dash-title">
    Weather Station</h2>
  <div id="timestamp">
    &nbsp;</div>
  <!-- BUTTONS - Nav tabs -->

  <ul class="nav nav-pills dash-pills nav-justified" style="padding-top:6px;">
    <li>
      <div id="AirT_AVG-btn">
        Air Temp
        <div class="btn-value">
          &nbsp;</div>
      </div>
    </li>
    <li>
      <div id="RH-btn">
        Humidity
        <div class="btn-value">
          &nbsp;</div>
      </div>
   ...

CSS

.home-dash {
  font-weight: 300;
  font-size: 12px;
  background: #335eea;
  padding: 10px 0px 25px 0px;
  color: rgba(255, 255, 255, 0.8);
}

h2.dash-title {
  color: #fff;
  font-weight: 300 !important;
  font-size: 2.6rem;
  margin: 6px 0px 6px 0px;
  text-align:center;
}

.dash-pills {
  padding-left: 0px;
  clear: both;
  margin-bottom: 6px;
}

.dash-pills>li {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

#timestamp {
  color: #fff;
  padding-bottom:10px;
  color: rgba(255, 255, 255, 0.7);
  text-align:center;
}

.btn-value {
  font-size: 2.5rem;
  vertical-align: text-top;
  line-height: 1;
  color: rgba(255, 255, 255, 1);
  cursor:default;
}

.units {
  vertical-align: text-top;
  font-size: 0.4em;
  display: inline-block;
  padding-top: 8px;
  color: rgba(255, 255, 255, 0.7);
}

JavaScript

function countDecimals(value) {
  valuestr = value.toString()
  if (valuestr.indexOf('.') !== -1) {
    if (Math.floor(value) !== value)
      return value.toString().split(".")[1].length || 0;
  } else {
    return 0
  }
}

var stations = [{
  'name': 'tiburon-water',
  'url': 'https://oceanview.pfeg.noaa.gov/erddap/tabledap/rtcctdRTCysirt.json?time%2Ctemperature%2csalinity%2Cchl%2cTDS%2cph%2cturbid%2codo&time>max(time)-10minutes&distinct()'
}, {
  'name': 'tiburon-weather',
  'url': 'https://oceanview.pfeg.noaa.gov/erddap/tabledap/rtcmetrt.json?time%2CAirT_AVG%2CRH%2CBP_AVG%2CSlrW_AVG%2CPAR_Den_AVG%2CRain_TOT%2CWS_S_WVT%2CWindDir_DU_WVT&time>max(time)-10minutes&distinct()'
}]

function makeDash(stations) {

  // Lookuptable for display name html
  var tooltipTitles = {
    'temperature': 'Temperature',
    'tempF': 'Temperature',
    'chl': 'Chlorophyll',
    'oxy_sat': 'Dissolved O<sub>2</sub>',
    'odo': 'Dissolved O<sub>2</sub>',
    'oxy_conc_mol': 'Dissolved O<sub>2</sub>',
    'salinity': 'Salinity',
    'ph': 'pH',
    'depth': 'Depth',
    'turbid': 'Turbidity',
    'TDS': 'TDS'
  };
  
  // Lookup table for units html
  var tooltipUnits = {
    'temperature': ' &deg;F',
    'tempF': ' &deg;F',
    'chl': ' &micro;g/L',
    'oxy_sat_opt': ' %',
    'oxy_conc_mg_opt': ' mg/L',
    'oxy_conc_mol_opt': '(mol/L)',
    'oxy_sat': '%',
    'odo': 'mg/L',
    'oxy_conc_mol': 'mol/L',
    'salinity': ' PSS',
    'ph': ' ',
    'depth': ' m',
    'turbid': ' NTU',
    'TDS': ' g/L',
    'AirT_AVG': ' &deg;F',
    'RH': ' %',
    'BP_AVG': ' mbar',
    'Rain_TOT': ' mm',
    'WS_S_WVT': ' m/s',
    'WindDir_DU_WVT': ' &deg;',
  };

  $.each(stations, function(si, s) {
    thisStationTimeEl = '#' + s.name + 'Dash #timestamp'
    var tempC = '';
    var sal = '';

    //for each parameter    
    $.each(s.table.columnNames, function(pi, p) {
      var thisLatestVal = '';
      var thislatestValStr = '';
      lastid = s.table.rows.length - 1

      if (pi == 0) {
...