jQuery Flot won't show months in X axis as labels

Question

As said, X axis label is not showing months as expected. What I doing wrong ?

Here is my example code HTML:

<div id="placeholder"></div>

CSS:

    #placeholder {
    height: 300px;
}

Javascript:

    var d1 = [
    [1388530800, 4],
    [1393542000, 8],
    [1396216800, 3],
    [1398808800, 16],
    [1401487200, 2],
    [1404079200, 2],
    [1406757600, 28],
    [1409436000, 24],
    [1412028000, 0],
    [1414710000, 18],
    [1417302000, 0],
    [1419980400, 11]
];
var d2 = null;
var d3 = null;
var d4 = null;
var d5 = null;
var d6 = [
    [1388530800, 2],
    [1396303200, 2],
    [1398895200, 1],
    [1401573600, 1],
    [1406844000, 1],
    [1409522400, 1],
    [1417388400, 1]
];

var data1 = [{
    data: d1,
    points: {
        fillColor: "#d1e399"
    },
    color: '#d1e399'
}, {
    data: d2,
    points: {
        fillColor: "#ecc0ce"
    },
    color: '#ecc0ce'
}, {
    data: d3,
    points: {
        fillColor: "#daeaed"
    },
    color: '#daeaed'
}, {
    data: d4,
    points: {
        fillColor: "#e6ceea"
    },
    color: '#e6ceea'
}, {
    data: d5,
    points: {
        fillColor: "#edb9a6"
    },
    color: '#edb9a6'
}, {
    data: d6,
    points: {
        fillColor: "#92e48a"
    },
    color: '#92e48a'
}];

$.plot($("#placeholder"), data1, {
    xaxis: {
        mode: "time",
        minTickSize: [1, "month"],
        tickLength: 1,
        ticks: 12
    },
    yaxis: {
        tickSize: 5
    },
    grid: {
        hoverable: true,
        borderWidth: 1
    },
    series: {
        lines: {
            show: true,
            lineWidth: 1,
            fill: true,
            fillColor: {
                colors: [{
                    opacity: 0.1
                }, {
                    opacity: 0.13
                }]
            }
        },
        points: {
            show: true,
            lineWidth: 2,
            radius: 3
        },
        shadowSize: 0,
        stack: true
    },
    clickable: true,
    hoverable: true
});

Code in JSFiddle -> http://jsfiddle.net/v5M9L/11/

Thanks for your help !

Answer 1

I suspect your problem is that your timestamps are in seconds rather than milliseconds. Multiply all your data by 1000 appears to give the result you want:

{ data: d1.map(function(d) { return [d[0] * 1000, d[1]]; }), points: { fillColor: "#d1e399" }, color: '#d1e399'}

http://jsfiddle.net/v5M9L/12/