Jquery AJAX ERDDAP and Highcharts

Calls ERDDAP json output using jQuery ajax to ERDDAP url. Parses returned data for loading into a high charts line plot

by Jenn Patterson Sevadjian

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="info"></div>

JavaScript

var ajaxstart = new Date().getTime();

//https://erddap.cencoos.org/erddap/tabledap/org_mbari_m1.json?time%2Csea_water_temperature&time%3E=2018-04-28T00%3A00%3A00Z&time%3C=2018-07-05T19%3A04%3A20Z&distinct()
$.ajax({
  url: 'https://erddap.cencoos.org/erddap/tabledap/org_mbari_m1.json?time%2Csea_water_temperature&time%3E=2022-08-03T17%3A00%3A00Z&z%3E=-1&z%3C=0',
  dataType: 'jsonp',
  jsonp: '.jsonp',
  cache: 'true',
  success: function(data) {

    var ajaxend = new Date().getTime();
    console.log('milliseconds passed', ajaxend - ajaxstart);

    var response = data.table
    console.log(response)
    var dataForChart = [];

    $.each(response.rows, function(index, row) {
      var isoDate = new Date(row[0]);
      var jsdate = isoDate.getTime();
      rowForChart = [jsdate, row[1]];
      dataForChart.push(rowForChart);
    });

    // Create a timer
    var start = +new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {
      chart: {
        events: {
          load: function() {
            if (!window.isComparing) {
              this.setTitle(null, {
                text: 'Built chart in ' + (new Date() - start) + 'ms'
              });
            }
          }
        },
        zoomType: 'x'
      },

      rangeSelector: {

        buttons: [{
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'month',
          count: 6,
          text: '6m'
        }, {
          type: 'year',
          count: 1,
          text: '1y'
        }, {
          type: 'all',
          text: 'All'
        }],
        selected: 5
      },

      yAxis: {
        title: {
          text: 'Temperature (°C)'
        }
      },

      title: {
        text: 'M1 Water Temperature'
      },

      subtitle: {
        text: 'Built chart in ...' // dummy...