Highcharts ERDDAP with Running Average

Builds off the simpler example adding a date selector, a running average line, la egend and csv, excel export.

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>
<script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script>
<script src="https://highslide-software.github.io/export-csv/export-csv.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="info"></div>

JavaScript

$.ajax({
    url: 'https://erddap.cencoos.org/erddap/tabledap/org_mbari_m1.json?time%2Csea_water_temperature&time%3E=2022-05-13T17%3A00%3A00Z&z%3E=-3&z%3C=0',
    dataType: 'jsonp',
    jsonp: '.jsonp',
    cache: 'true',
    jsonpCallback: 'functionname',
    success: function (data) {
    		console.log('success')
        var response = data.table
        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 the chart
        var chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                type: 'line',
                zoomType: 'x'
            },
            navigator: {
                adaptToUpdatedData: false,
                series: {
                    data: dataForChart,
                    includeInCSVExport: false
                }
            },
            scrollbar: {
                liveRedraw: false
            },
            title: {
                text: 'M1 Water Temperature'
            },
            subtitle: {
                text: dataForChart.length + ' data points'
            },
            rangeSelector: {
                buttons: [{
                    type: 'day',
                    count: 2,
                    text: '2d'
                }, {
                    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',
                   ...