Question

I have a dynamic Flot graph with dates on the x-axis and numbers on the y-axis. To get the Flot-plugin to read the date object correctly, I had to convert the dates to ticks (with getTime()). My problem is that I can’t revers the ticks back to a normal date in my tooltip hover on the graph.

I’ve tried to revers it with this:

dateTimeObject = new Date((jsTicks - 621355968000000000) / 10000);

All I get, no matter what jsTicks is, is “Jan 02 0001 hh:mm:ss (almost current time)”

What am I doing wrong?

Answer 1

This somewhat depends on whether you accounted for the browser’s timezone or not when you were creating the data. A simplistic way to deal with this in a plotclick or plothover event is like so:

$("#placeholder").bind("plotclick", function(event, pos, item) {
    var x = item.datapoint[0],
    y = item.datapoint[1].toFixed(2);
    var dt = new Date(x);
    var label = 'At '+dt.toLocaleTimeString()+' ';
    //now display this label
}

If you are accounting for timezone in your data, you’d need to have one that looks more like this:

$("#placeholder").bind("plotclick", function(event, pos, item) {
    var x = item.datapoint[0],
    y = item.datapoint[1].toFixed(2);
    var userTZ = new Date();
    userTZ = userTZ.getTimezoneOffset()*60*1000;
    var dt = new Date(x+userTZ);
    var label = 'At '+dt.toLocaleTimeString()+' ';
    //now display this label
}

An example with timezones in place: http://jsfiddle.net/ryleyb/utNaJ/