CODEWITHSUNDEEP
javascriptjquerychartshighcharts
kkudi
kkudi

Reputation: 1645

Highcharts tooltip is always the same

I have a chart which shows the correct chart ( that is the input are correct).

Whether I use the default tooltip behaviour or I create my own function for the formatting, There's some weird behaviour which I don't get. Wherever I put my mouse on the chart, the values of the tooltip are always the same.

The graph is correct, and I'm 100% sure the values are not the same. Below is the code I use for the settings of the Chart. 

function graphUtilPing(utilGws) {
var options = {
    chart : {
        renderTo : 'ping_util',
        type : 'spline',
        width:'900'
    },
    series:[],
    title : {
        text : 'Utilisation'
    },
    xAxis : {
        type:'datetime',
        title : {
            text : 'Time of the day'
        }
    },
    yAxis : {
        title : {
            text : 'Percentage (%)',
        },
    },
    tooltip:{ 
    shared:false,
    formatter : 
        function() {
        var d = new Date(this.x);
        var hrs = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        var ds =  (hrs < 9 ? "0"+hrs : hrs) + ":" + (minutes < 9 ? "0"+minutes : minutes) + ":" + (seconds < 9 ? "0"+seconds : seconds);
            return '<b>' + this.series.name + '</b><br/>'
                + ds + ": " + this.point.y.toFixed(2) + '%';
    }
}
};
for (var key in utilGws) {
    var gw = utilGws[key];
    var gwUtilValues = gw[0];
    var gwMsTimes = gw[2];
    var chartObj = {
        name: key,
        data: array_combine(gwMsTimes, gwUtilValues)
    };
    options.series.push(chartObj);
}

chart = new Highcharts.Chart(options);
return chart;

}

I'm using Chrome and the issue is reproducible on IE as well.

Even without changing the tooltip object, the behaviour I get is the same.

Any ideas what the issue might be?

UPDATE: Example where the issue is reproducible: http://jsfiddle.net/Htj74/3/

Upvotes: 0

Views: 601

Answers (1)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

The problem is that your data time is reversed. It comes from 05 Dec 2012 23:45:00 to 05 Dec 2012 00:00:00. It should be 05 Dec 2012 00:00:00 to 05 Dec 2012 23:45:00.

The problem is arrayCombine. It should be the following.

function array_combine (a1, a2) {
    var data = [];
    for (var i = 0, length = a1.length; i < length ; i++) {
      data.push([ a1[i], a2[i] ]);
    }
    return data;
}

demo

Upvotes: 1

Related Questions