Display tooltip with correct Time zone using Flot jQuery plugin

Question

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?

Answer 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