Question

i’m trying to display a date field in flot:

Data:

    var data = [
            [parseInt(1309150800.0)*1000, 220],
            [parseInt(1309064400.0)*1000, 230],
    ];

Flot creation:

    $.plot($("#graph"), [ data ], {
        grid: {
            hoverable: true
        },
        xaxis: {
            mode: "time",
            timeformat: "%d.%m.%y"
        },
        yaxis: {
            mode: "number",
            tickSize: 2
        },
        series: {
            lines: { show: true },
            points: { show: true }
        }
    });

According to this site http://tools.semsym.com/index.php?tool=timestamp&timestamp=1309150800 the timestamp is Jun 26, 2011 10:00:00 PM.
But the graph looks like: https://i.stack.imgur.com/NUayx.png

The dots are a bit off. The first one should be at 26, but is at 25,5. I played a bit with timestamp formatting but wasn’t able to get it to the specific point.

What am i missing?

Also it shows “26.06.2011” about 6 times. What config is needed to keep it at 1?

Answer 1

Make sure you set a minTickSize. Here is an example at http://jsfiddle.net/hAXHq/ where I have set minTickSize to 1 day and set the min/max values explicitly. You should be able to set your own min/max programmatically depending on your data.

Here is the code:

    var data =  [
        [parseInt(1309150800.0)*1000, 220],
        [parseInt(1309064400.0)*1000, 230]
    ];

    $.plot($("#placeholder"), [ data ], {
    grid: {
        hoverable: true
    },
    xaxis: {
        mode: "time",
        timeformat: "%d.%m.%y",
            minTickSize: [1,"day"],
        min: (new Date(2011,5,25)).getTime(),
        max: (new Date(2011, 5, 28)).getTime()
    },
    yaxis: {
        mode: "number",
        tickSize: 2
    },
    series: {
        lines: { show: true },
        points: { show: true }
    }
});