Mostrar información sobre herramientas con el huso horario correcto con el plugin de FlQ jQuery

Question

Tengo un pequeño problema con el plugin Flot mientras se muestran las etiquetas xaxis en el gráfico. Ellos son 'mode: "time"'. Actualmente utilizo Flot con la función de información sobre herramientas y la información sobre herramientas contiene una fecha y hora. Suministro JSON al complemento que contiene marcas de tiempo. Después, convierto la marca de tiempo y la visualizo en la información sobre herramientas. El problema es que, al mostrar los datos en el gráfico, los tiempos de los tooltips no se corresponden con las etiquetas xaxis generadas por el complemento debido a una diferencia entre las zonas horarias. Mis marcas de tiempo JSON son +2 GMT, pero las etiquetas xaxis en Flot son +0 GMT. Entonces me pregunto si existe la posibilidad de establecer un desplazamiento a la zona horaria o algo similar.

Mi JSON (generada por AJAX)

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

Mi función de información sobre herramientas

$(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); 
}); 

opciones La Flot

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 } 
}; 

pero lamentablemente timeZoneOffset no funciona y todavía tengo diferencias entre el xaxis y la información sobre herramientas.

¿Tiene alguna idea de cómo debería resolver mi problema?

Answer 1

Si mira la base de datos de problemas de flot, issue 141 aborda las zonas horarias. Issue 484 sugiriendo que la sintaxis que usa se combinó en este problema.

El documentation dice:

Normalmente las marcas de tiempo que desea que se muestren de acuerdo a una determinada zona tiempo, por lo general la zona horaria en la que los datos han sido producido. Sin embargo, Flot siempre muestra las marcas de tiempo de acuerdo con UTC. Tiene que ser la única alternativa con core Javascript para interpretar las marcas de tiempo de acuerdo con la zona horaria en la que se encuentra el visitante, lo que significa que los tics cambiarán impredeciblemente con la zona horaria y los ahorros de luz diurnos de cada visitante.

Así que teniendo en cuenta que no hay un buen apoyo para las zonas horarias personalizadas en Javascript, que tendrá que hacerse cargo de este lado del servidor.

Así que la solución correcta es hacer que sus datos se vean como como UTC en el lado del servidor (aunque no lo sea). Si no puede modificar su fuente de datos, le recomendamos que la consulte. Los lenguajes del lado del servidor deben permitir la manipulación de la zona horaria.

También puede seguir el problema 141 y ver si hay parches o complementos.

Answer 2

Puede intentar utilizar la zona horaria en lugar de timeZoneOffset. sus opciones se parecen:

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 } 
    }; 

Mi versión Flot es 0.7

Answer 3

para UTC marcas de tiempo, funciones de tiempo UTC uso:

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

y eliminar eje x zona horaria.