CODEWITHSUNDEEP
javascripthighcharts
NibblyPig
NibblyPig

Reputation: 52922

Navigator in highcharts graph does not work

The rest of the chart functions correctly, and the navigator updates when I change the time scale, but resizing the navigator and scrolling left/right doesn't do anything (doesn't update the graph).

enter image description here

To initialise the graph I do this:

Highcharts.stockChart('highchartLineChart', {
    title: {
        text: 'MyTitle'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Time (days)'
        },
        type: 'datetime',
    },
    yAxis: {
        title: {
            text: 'Value'
        },
    },
    navigator: {
        enabled: true,
        series: {
            id: 'navigator',
        }
    },
    series: []
});

Then I have an ajax method to populate it, which looks like this:

var highchartLineData = [];

for (var i = 0; i < result.length; i++) {

    var parsedDate = new Date(result[i].MyDate.match(/\d+/)[0] * 1);

    var lineItem = {
        x: parsedDate,
        y: parseFloat(result[i].Value)
    };

    highchartLineData.push(lineItem);
}

 $('#highchartLineChart').highcharts().addSeries({
     name: "My Chart",
     data: highchartLineData
 });

Then I tried adding this, just playing around with various attempts to fix it

var nav = $('#highchartLineChart').highcharts().get('navigator');
nav.setData(highchartLineData);
$('#highchartLineChart').highcharts().xAxis[0].setExtremes();

However it did not work. Although you can drag the navigator left and right, nothing updates. Sometimes it breaks it and the top graph disappears, but it comes back if you press 1m 3m etc.

There are no errors in the console. Any ideas?

Upvotes: 0

Views: 422

Answers (1)

ewolden
ewolden

Reputation: 5803

In your code you do the following operation:

var parsedDate = new Date(result[i].MyDate.match(/\d+/)[0] * 1);

var lineItem = {
    x: parsedDate,
    y: parseFloat(result[i].Value)
};

Setting x to be a Date object.

According to Highcharts API on x values (for a line) it should be in milliseconds.

x: Number

The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.

So if instead you would do the following:

var lineItem = {
    x: result[i].MyDate.match(/\d+/)[0] * 1,
    y: parseFloat(result[i].Value)
};

it should work. (Assuming result[i].MyDate.match(/\d+/)[0] * 1 gives you the time in milliseconds.

Upvotes: 2

Related Questions