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