Highcharts JSFiddle for Navigator

JSFiddle to show differences in navigator in Firefox and Edge

by halloleo

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="chart1Div"></div>

CSS

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

// JSFiddle to show differences in naviagtor in Firefox and Edge

// Stuff to add the categories into the navigator 
// This uses the data in the chart, so it needs to be ran in load event
function extract_categories_inner(data){
    return data.map(function (row) {
      return row[0];
    }).slice(1);
}

function extract_categories(data){
    res = extract_categories_inner(data)
    console.log(res)
    return res
}

function navigatorUpdate(chart, data) {
    chart.update({
         navigator: {
            xAxis: {
                categories: extract_categories(data),
            }
        },
    })
}

function applyNavigatorUpdate(chart) {
    try {
        hasRows = chart.userOptions.data.rows
    } catch (e) {
        hasRows = undefined
    }                	
    if (hasRows) {
        console.log("YES rows")
        navigatorUpdate(chart, chart.userOptions.data.rows)
    } else {
        console.log("NO rows")
        try {
            $.getJSON(chart.liveDataURL, function(data) {
                navigatorUpdate(chart, data)
            })
        } catch (e) {
            console.log("Unexpected Exception while loadingh chart.liveDataURL.")
        }                	
    }
}


var opts = {
    accessibility: {
        enabled: false
    },

    chart: {       
        type: 'spline',
    },
                
    data: {
        //rowsURL: dataUrl
        rows: [["Month", "Data1", "Data2", "Data3"], ["Aug 2016", 31.01, 24.23, 42.53], ["Oct 2016", null, null, null], ["Dec 2016", 31.33, 23.2, 33.53], ["Feb 2017", null, 23.23, null], ["Apr 2017", 26.33, 25.13, 23.61], ["Jun 2017", null, 18.53, null], ["Aug 2017", 28.38, 25.33, 32.43], ["Oct 2017", null, 22.86, null], ["Dec 2017", 31.22, 26.13, 40.21], ["Feb 2018", null, 25.06, null], ["Apr 2018", 34.02, 23.46, 44.34], ["Jun 2018", null, 20.35, null], ["Aug 2018", 31.06, 23.83, 44.32], ["Oct 2018", null, 22.86, null], ["Dec 2018", 32.63, 30.32, 51.2], ["Feb 2019", null, 24.26, null], ["Apr 2019", 45.15,...