Question

I have the following problem as seen in the image below where the horizontal ticks just seem random and do not try to line up with data. My data, and code are also below. Any help with this appreciated.

Image located at https://i.stack.imgur.com/WMfu7.jpg (sorry can’t attach images yet)

Code:

    $.plot(placeholder,
            data, 
            {
               yaxes: [ { tickFormatter: centFormatter, max: 101, min: -0.1, tickSize: 20 }, { position: "right", min: -0, } ],
               xaxes: [ { mode: "time", minTickSize: [1, "day"],  } ],
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
    });

Data for the blue line:

[2012-08-19] => 3612220
[2012-08-26] => 3570080
[2012-09-02] => 3576040
[2012-09-09] => 3597380
[2012-09-16] => 3593040
[2012-09-23] => 3579480
[2012-09-30] => 3638840
[2012-10-21] => 13

I have tried various options for the ticks, minTickSize etc.. no luck.

Answer 1

The problem is that your date data is coming from your server’s timezone, and then being rendered in UTC by flot in the browser. You need to carefully read the Time series data section of the documentation.

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.

Imagine that your server’s timezone is UTC+8 hours. When you create your timestamp on the server for 2012-08-19, what you actually get is 8am on 2012-08-19. The simplest way to fix this is to generate your timestamps in UTC (which is possible in many languages, and examples are given in the flot documentation). If that isn’t possible, simply add the correct number of milliseconds to your generated timestamp, in our example’s case, that would look like this (in pseudocode):

myTz = new Date('2012-08-19').toTimestamp(); //this is 8am on the 19th in milliseconds
myTz = myTz - 8*60*60*1000; //this is 8 hours