CODEWITHSUNDEEP
highcharts
user2064553
user2064553

Reputation: 23

HighCharts.StockChart tooltip lables on hover of datapoints is incorrect

I am trying to add new points to chart in a progressive manner. After adding new points and setting new min/max, the tooltip labels are displayed incorrectly.

fiddle: http://jsfiddle.net/aAFLX/

$(function() {
    Highcharts.setOptions({
        global : {
            useUTC : false
        },
        scrollbar:{
            enabled: true
        },
        lang: {
            rangeSelectorZoom: ' '
        }
    });

    var dataPoints = [[1293820200000, 45], [1293733800000, 25], [1293647400000, 65]]
    var counter = 0;

    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        rangeSelector: {
           enabled: false
        },
        navigator: {
          enabled: false
        },
        scrollbar : {
            enabled : false
        },        
        yAxis: {
            min: 0,
            max: null
        },
        xAxis: {
            type: 'datetime',
            linecolor: '#bbccdd',
            gridLineColor:'#bbccdd',
            tickInterval: 86400000,
            min: 1293820200000,
            max: 1294079400000
        },
        series: [{
            name: 'Count',
            data : [[1293906600000, 56]],
            type : 'column',
        }]
    });

    $('#button').click(function() {
        if(counter == dataPoints.length) {
            return;
        }
        var point = dataPoints[counter++];
        var d = new Date(point[0]);
        var min = d.setDate(d.getDate() - 1);

        chart.xAxis[0].setExtremes(min,null);
        chart.series[0].addPoint(point);
    });
});

Any idea what is wrong? Am I missing something or using API incorrectly?

Upvotes: 2

Views: 294

Answers (1)

eolsson
eolsson

Reputation: 12727

Highstock does not do automatic sorting of the input data, so it must be sorted when given to Highstock. I think this is what is causing the problems.

So when adding new points, the added point must be later in time compared to the last one.

I have modified your jsfiddle by sorting the datapoints:

dataPoints.sort(function (a, b) {
    return a[0] - b[0];
});

and moving the first point back in time. (Also removed the call to setExtremes to keep all points in view, but that is not connected to the problem).

Upvotes: 1

Related Questions