Flot rotateTicks xaxis date displaying an extra da

Question

I'm using Flot for displaying usage per day but I don't understand why an extra day, that is not in provided data is added in the graph?

Code snippet:

<script>
var statement = [
    [gd(2018, 6, 1), 0],
    [gd(2018, 6, 2), 2000000],
    [gd(2018, 6, 3), 240000000],
    [gd(2018, 6, 4), 260000000],
    [gd(2018, 6, 5), 280000000],
    [gd(2018, 6, 6), 300000000],
    [gd(2018, 6, 7), 320000000],
    [gd(2018, 6, 8), 0],
    [gd(2018, 6, 9), 0],
    [gd(2018, 6, 10), 0],
    [gd(2018, 6, 11), 0],
    [gd(2018, 6, 12), 0],
    [gd(2018, 6, 13), 0],
    [gd(2018, 6, 14), 0],
    [gd(2018, 6, 15), 0],
    [gd(2018, 6, 16), 0],
    [gd(2018, 6, 17), 0],
    [gd(2018, 6, 18), 0],
    [gd(2018, 6, 19), 0],
    [gd(2018, 6, 20), 0],
    [gd(2018, 6, 21), 0],
    [gd(2018, 6, 22), 0],
    [gd(2018, 6, 23), 0],
    [gd(2018, 6, 24), 0],
    [gd(2018, 6, 25), 0],
    [gd(2018, 6, 26), 0],
    [gd(2018, 6, 27), 0],
    [gd(2018, 6, 28), 0],
    [gd(2018, 6, 29), 0],
    [gd(2018, 6, 30), 0]
];
var dataset = [{
    label: "Electricity Consumption",
    data: statement,
    color: "#ffa500",
    bars: {
        show: true,
        align: "center",
        barWidth: 24 * 60 * 60 * 600,
        lineWidth: 1
    }
}];


var options = {
    xaxis: {
        mode: "time",
        tickSize: [1, "day"],
        timeformat: "%d %b",
        tickLength: 0,
        rotateTicks: 135,
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 8,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 5,
        color: "black"
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "Usage",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: "Verdana, Arial",
        axisLabelPadding: 3,
        tickDecimals: 0,
        tickFormatter: function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        }
    }],
    legend: {
        container: $("#legendContainer"),
        noColumns: 2,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 1,
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    }
};
$(document).ready(function() { $.plot($("#graph-placeholder"), dataset, options); }); 
function gd(year, month, day) { return new Date(year, month -1, day).getTime(); }
</script>

Displayed graph: May 31 is displayed but is not in provided data.

I don't understand where and why May 31 is displayed.

Answer 1

This a a timezone problem, all of your dates are shifted by one day (or some hours which leads to a day change). Change your gd() function to use UTC time and the plot looks fine:

function gd(year, month, day) { return Date.UTC(year, month - 1, day); }

See this fiddle for a full example and the documentation for more information. The most important part:

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.