Spray Glider Profile Plot Demo

by Jenn Patterson Sevadjian

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div id="container"></div>

CSS

#container {
    height: 400px;
    min-width: 310px;
    max-width: 900px;
    margin: 0 auto;
}

JavaScript

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

$.ajax({
  url: 'https://spraydata.ucsd.edu/erddap/tabledap/binnedCUGN90.json?profile%2Cdepth%2Ctemperature&time%3E=2023-07-04T00%3A00%3A00Z&time%3C=2023-07-11T16%3A35%3A50Z&orderBy(%22profile%22)',
  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) {
     
      rowForChart = [row[0], row[1], row[2]];
      dataForChart.push(rowForChart);
    });
   
    // Create a timer
    var start = +new Date();

    Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        zoomType: 'xy', // only works without boost
        events: {
      	redraw: function () {
        	const data = this.series[0].data
        	const xe = this.xAxis[0].getExtremes()
          const ye = this.yAxis[0].getExtremes()
          // Filter data
          const filteredData = data.filter((point) => {
          	return point.x <= xe.max && point.x >= xe.min && point.y <= ye.max && point.y >= ye.min
          })
          //console.log(filteredData)
        }
        }
    },
   
    title: {
        text: 'Spray Glider Data',
        align: 'left',
        x: 40
    },
    subtitle: {
        text: 'Test Highcharts heatmap rendering data from ERDDAP',
        align: 'left',
        x: 40
    },
    xAxis: {
    },
    yAxis: {
        title: {
            text: 'Depth'
        },
        reversed: true,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 100, 200, 400, 500],
        tickWidth: 1,
        min: 0,
        max: 500
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a'],
            [1, '#c4463a']
        ],
        min: 10,
        max: 20,
       ...