CODEWITHSUNDEEP
javascriptjqueryflot
NekoLopez
NekoLopez

Reputation: 609

Error showing info in Flot chart line tooltip

I have a chart line with tooltip using Flot plugin getting data from mysql database via AJAX.

I get chart lines established over a period of time, but the problem is when, for example, I select a certain date from January 2014 (01/2014) to December 2014 (12/2014), chart is showing me correct values but incorrect dates in tooltip (12/2013) like this:

enter image description here

I checked timestamps, for example, this is the timestamp of January 1th 2014: 1388534400000 (it's already multiplied by 1000).

So I show info like this:

$("#graph").bind("plothover", function (event, pos, item) {

    if (item) {
        var x = item.datapoint[0],
        y = item.datapoint[1];

        var date = new Date(x); //1388534400000 = 2014-01-01
        var amount = $.number(y,2);

        $("#tooltip").html("<b>"+item.series.label+"</b>"+"<br>Fecha: " + ('0' + (date.getMonth()+1)).slice(-2) + '/'+ date.getFullYear()+ " | Amount: S/ "+amount).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);                   
        } else {
            $("#tooltip").hide();
        }

    });

But it's still showing from one month ago:

enter image description here

And sequence is continuing one month ago but months in xaxis are correct.

How can I fix it? I'd like some help.

Upvotes: 0

Views: 119

Answers (1)

Syntactic Fructose
Syntactic Fructose

Reputation: 20076

This is likely because of the javascript Date object using your local timezone. Remember that 1388534400000 is December in any timezones < the UTC default.

I usually dislike recommending libraries as a valid answer, but timezones with the default JS Date object really suck. https://momentjs.com/ is a good alternative if you're looking for universal times.

EDIT: Actually, you can call getUTCMonth() + 1 to return the correct month

Upvotes: 2

Related Questions