JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>


<div id="outer-container" style="position: relative; width: 850px; margin: 0 auto">
<div id="container" style="height: 405px;width: 800px;">

</div>
</div>

</html>


<script>


var obj1 = jQuery.parseJSON(jsonData);



var i = 0;
TEMP = [];
TEMP[i] = obj1['DLEW']['11-JAN-2018 19:35']['Air Temperature']['Value'];
current_temp = [];
current_dew = [];
current_rh = [];
current_hi = [];
current_ws = [];
current_wdir = [];
current_precip = [];


for (var i = 0; i < 288; i++) {
  var current_timestamp = Object.keys(obj1['DLEW'])[i]; //Provides the time
  current_temp[i] = obj1['DLEW'][current_timestamp]['Air Temperature']['Value'];
  current_dew[i] = obj1['DLEW'][current_timestamp]['Dew Point Temperature']['Value'];
  current_rh[i] = obj1['DLEW'][current_timestamp]['Relative humidity']['Value'];
  current_ws[i] = obj1['DLEW'][current_timestamp]['Wind Speed']['Value']; //ms to mph
  current_wdir[i] = obj1['DLEW'][current_timestamp]['Wind Direction']['Value'] * 57.2958; // rad to deg
  current_precip[i] = obj1['DLEW'][current_timestamp]['Gage Precipitation (5)']['Value'];

  if (obj1['DLEW'][current_timestamp]['Heat Index']) {
    current_hi[i] = obj1['DLEW'][current_timestamp]['Heat Index']['Value'];
  }

}

function toggleWindBarb(filterOff) {

  if (wind == 'true') {
    wind = 'false'
  } else {
    wind = 'true';
  }

  var meteogram = new Meteogram('container', wind, filterOff);
}



function Meteogram(container, wind, filterOff) {



  this.symbols = [];
  this.symbolNames = [];
 ...