CODEWITHSUNDEEP
jqueryflotpanning
Jorg
Jorg

Reputation: 7250

jQuery Flot time-based axis panning issue

I've been tinkering, making a little chart with Flot and some of it's plugins. The purpose is to provide a chart tracking basal body temperature, with the date per day on the x axis, degrees on the y axis. Panning will shift the x axis, so you can see previous dates etc, clicking will result in a new point, snapped to grid.

The grid on a time based axis when panning does not move. It does when I change the axis type to normal. I really want to have the entire grid move, because now the line series sort of 'floats around' on the grid. Does anyone know how to make that work? Am I missing something in the options?

This is harder to explain than it is to see, so fsfiddle provided: http://jsfiddle.net/jorgthuijls/caM3q/1/

Triggering the change in behaviour is the option mode: 'time' on the x axis option (line 24 of the fiddle).

The bit of code to pay attention to:

        xaxis: {
            show: true,
            min: firstDay,
            max: lastDay,
            ticks: 31,
            mode: 'time',
            timezone: 'browser',
            timeformat: '%d. %m'
        },

change this to 

        xaxis: {
            show: true,
            min: firstDay,
            max: lastDay,
            ticks: 31,
        },

and see what happens moving the graph after adding a few points.

Much appreciated!

Upvotes: 2

Views: 2552

Answers (1)

DNS
DNS

Reputation: 38189

It's a combination of two things:

  1. There was a bug in 0.8.0 that we just fixed, so if you try with jquery.flot.time.js from master, you'll immediately notice an improvement.

  2. Even with the fix, the ticks will still jump around a bit. That's because you have a large enough range that the ticks only appear every ~3 days. Internally, however, the tick generator still sees one day as the minimum interval. It therefore recalculates as soon as you pan by a day, even if that was only a third of the tick interval's size.

You can usually work around that problem by assigning a suitably high minTickSize; [5, 'day'], for example, to convince the tick generator that it doesn't need to recalculate. This works best when you know the plot's dimensions ahead of time.

Upvotes: 1

Related Questions