Search code examples
javascriptchartsflot

Flot is interpreting timestamps incorrectly: displays different hours as same hour


I have following points on my graph:

data = [
            [1450825200, 3],
            [1450828800, 9],
            [1450832400, 8],
            [1450836000, 7],
            [1450839600, 6]
        ];

First value (data[0][0]) is the timestamp, second one (data[0][1]) is the amount of clicks. According to this converter, in my timezone GMT+1:00, the very first 1450825200 is equal to current date and 12:00 AM, next timestamp in the array (1450828800) holds 1:00 PM, third one 2:00 PM, etc.

But according to flotcharts, all my timestamps represent 7 PM. When I hover on points each one of them display 19:00 and my x-axis is gone (because tickSize is set to 1 hour and there are no other hours).

I'm initializing the graph this way:

$.plot('#graphDashboard', dataSet, // dataSet[0] contains data example I've shown above
        {
            plot: true,
            xaxes: [{
                mode: "time", timeformat: "%H:%M",
                tickSize: [1, "hour"]
            }],
            yaxes: [{
                position: 'left',
                tickFormatter: function (val, axis) {
                    return val.toLocaleString();
                }
            },
                {
                    position: 'left',
                    autoscaleMargin: 0.2,
                    tickFormatter: function (val, axis) {
                        return val.toLocaleString();
                    }
                }
            ],
            tooltipOpts: {
                content: "%s (%x, %y)",
                shifts: {
                    x: -100,
                    y: -50
                },
                dateFormat: "%H:%M",
                defaultTheme: false
            },
            series: {
                stack: false,
                lines: {
                    show: true,
                    fill: false
                }
            },
            legend: {
                show: false
            }
        });

Solution

  • The Flot time plugin is based on Javascript timestamps. A Javascript timestamp is the number of milliseconds since January 1, 1970 00:00:00 UTC. You need to multiply your timestamps (currently in seconds) by 1000 for everything to display properly.