Display tooltip with correct Time zone using Flot

问题:

I have a little problem with the Flot plugin while displaying the xaxis labels in the graph. They are 'mode: "time"'. Currently I use Flot with the tooltip function and the tooltip contains a date and time. I supply JSON to the plugin which contains timestamps. Afterwards I convert the timestamp and I display it in the tooltip. The problem is that while displaying the data in the graph, the times from the tooltips don't correspond to the xaxis labels generated by the plugin due to a difference between the timezones. My JSON timestamps are +2 GMT, but the xaxis labels in Flot are +0 GMT. So I wonder if there is a possibility to set an offset to the time zone or something similar.

My JSON (generated by AJAX)

 [1300087800000,29],
 [1300088700000,39],
 [1300089600000,46],
 [1300090500000,53],
 [1300091400000,68],
 [1300092300000,95],
 ...

My tooltip function

$(placeholder).bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();

     var x = item.datapoint[0].toFixed(2);
     var y = item.datapoint[1].toFixed(2);

     var currDate   = new Date(Math.floor(x));
     var hour       = currDate.getHours();
     var minute     = String("") + currDate.getMinutes();

     var tooltip = hour + ":" +
                   ((minute.length < 2) ? "0" + minute : minute) + " " +
                   (Math.round(y * 100)/100) + "Wh"
     showTooltip(item.pageX, item.pageY, tooltip);
 });  

The Flot options

 var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
         mode:   "time",  
         tickLength: 5,  
         timeZoneOffset: (new Date()).getTimezoneOffset()  
     },  
     selection: { mode: "x", color: "#BCBCBC" },
     grid:      { hoverable: true, clickable: false }
};

but unfortunately timeZoneOffset doesn't work and I have still differences between the xaxis and the tooltips.

Do you have any ideas how I should resolve my problem?

回答1:

You can try to use timezone instead of timeZoneOffset. your options look like:

var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
          mode:   "time",  
          tickLength: 5,  
          timezone: "browser" // "browser" for local to the client or timezone for timezone-js  
          },  
    selection: { mode: "x", color: "#BCBCBC" },
    grid:      { hoverable: true, clickable: false }
    };

My flot version is 0.7

回答2:

If you look at the flot issue database, issue 141 addresses timezones. Issue 484 suggesting the syntax you use was merged into this issue.

The documentation says:

Normally you want the timestamps to be displayed according to a certain time zone, usually the time zone in which the data has been produced. However, Flot always displays timestamps according to UTC. It has to as the only alternative with core Javascript is to interpret the timestamps according to the time zone that the visitor is in, which means that the ticks will shift unpredictably with the time zone and daylight savings of each visitor.

So given that there's no good support for custom time zones in Javascript, you'll have to take care of this server-side.

So the correct solution is to make your data look like UTC server-side (even if it isn't). If you cannot alter your data source you may want to consider proxying it. Server-side languages should allow timezone manipulation.

Alternatively follow issue 141 and watch for patches or plugins.

回答3:

for UTC timeStamps, use UTC time functions:

var hour = currDate.getUTCHours();  // instead of getHours()
var minute = String("") + currDate.getUTCMinutes(); // instead of getMinutes()

and remove xaxis timezone.