CODEWITHSUNDEEP
jqueryflot
superphonic
superphonic

Reputation: 8074

Flot - x-axes ticks not lined up with actual data

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.sstatic.net/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.

Upvotes: 0

Views: 1073

Answers (1)

Ryley
Ryley

Reputation: 21226

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

Upvotes: 1

Related Questions