Strange Y-Axis on Flot Js

Question

I'm using Flot Js to generate this graph:

My problem is on Y-Axis, it starts at 23:00:00 and ends in 23:00:00 too. My goal is Y-Axis start at 00:00:00 and ends at 23:59:59.

My js code is:

$(function() {
    var data1 = [
    ["Pedro",gt(2015,05,13,20,01,00)],["João",gt(2015,05,13,07,09,00)],["José",gt(2015,05,13,00,00,00)],["Gustavo",gt(2015,05,13,13,00,00)],["Tenico Hotel",gt(2015,05,13,01,00,00)],["Gualter",gt(2015,05,13,23,25,00)],["Joao",gt(2015,05,13,02,30,00)],["José",gt(2015,05,13,00,00,00)],["Maria",gt(2015,05,13,00,00,00)],["Avatar",gt(2015,05,13,00,00,00)]     ];

    function gt(year, month, day,hours,min,secs){
        return new Date(year, month-1, day,hours,min, secs).getTime();
    }

    var chart = $("#chart");

    $.plot(chart, [data1],{
        series: {
            bars: {
                show: true,
                barWidth: 0.3,
                align: "center"
            }
        },
        xaxis: {
            mode: "categories",
            tickLength: 0
        },
        yaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            min: (new Date("2015/05/13 00:00:00")).getTime(),
            max: (new Date("2015/05/13 23:59:59")).getTime(),
            tickSize: [1,"hour"]
        }
    });
    chart.resize();
});

Already had searched and don't find any clue why this happen.

Thanks in advance.

Answer 1

You're running into timezone issues.

If you add 'UTC' to your min and max date strings, your y-axis goes from 00:00:00 to 23:59:59.

I've created a JS fiddle to demonstrate. You'll have to work with the dates in your data array to get them into UTC as well.

Flot's API.md elaborates on how it handles dates:

Default behavior is that Flot always displays timestamps according to UTC. The reason being that the core Javascript Date object does not support other fixed time zones. Often your data is at another time zone, so it may take a little bit of tweaking to work around this limitation.

You could also set the timezone of your axis by specifying (from the Flot API.md):

yaxis: {
    mode: "time"
    timezone: null, "browser" or timezone (only makes sense for mode: "time")
}