flot xaxis ticks for stacked horizontal bar chart scale

Question

I am working with a sample here:

var startDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
var endDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
endDate.setHours(startDate.getHours() + 9);

var dataSet = [{"data":[[1469664000000,0]],"color":"#FF0700"},
{"data":[[1469667600000,0]],"color":"#FF0700"},
{"data":[[1469671200000,0]],"color":"#FF0700"},
{"data":[[1469674800000,0]],"color":"#FF0700"},
{"data":[[1469678400000,0]],"color":"#FF0700"},
{"data":[[1469682000000,0]],"color":"#FF0700"},
{"data":[[1469685600000,0]],"color":"#FF0700"},
{"data":[[1469689200000,0]],"color":"#FF7400"},
{"data":[[1469692800000,0]],"color":"#006900"}];

var options = {
series: {
    stack: true,
    bars: {
        show: true
    }
},
bars: {
    lineWidth: 0,
    align: "center",
    barWidth: 1,
    horizontal: true,
    fill: 1,
},
yaxis: {
    axisLabel: "MachineName",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
    ticks: []
},
 xaxis: {
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
    //ticks: [[0, "1:00"], [1, "2:00"], [2, "3:00"], [3, "4:00"], [4, "5:00"], [5, "6:00"], [6, "7:00"], [7, "8:00"], [8, "9:00"]],
    //labelWidth: 10,
    //tickLength: 10,
    //tickFormatter: formatXAxis,
    //tickSize: 360000,
    //minTickSize: 1,
    //min: 0,
    //max: 10
    //mode: "time",
    //timeformat: "%H:%M",
    //minTickSize: [1, "hour"],
    ////color: "black",
    //min: startDate.getTime(),
    //max: endDate.getTime()
}
};

$.plot($("#machineStatus"), dataset, options);

I end up with a graph where the xaxis labels are not anything like they should be. See below

The design is an hourly status of a machine (red = not running, green = running, etc.) So the intent was to have the last 9 hours of runtime showing and put x axis labels for the top of the hour (1:00, 2:00, etc.).

Since this is a horizontal stack of multiple data sets, this appears to really confuse the xaxis tick calculation. I tried setting the min/max to equal the start and end times of the dataset, but I would get no graph.

I stopped using the "time" mode, hoping I could use the ticks array and force a set of ticks and labels, but that doesn't work. I tried the tickFormatter to force calculating the ticks, but that didn't work either.

You can see all the things I've tried on the xaxis and have commented out. I actually don't want the ticks to have any relationship to the actual data. I am testing this graph at the hour and minute level, so theoretically my data sets are either 9 or 540 bits of granular information. I still want the xaxis ticks to stay at a fixed set of 9 values spread evenly. Any ideas how I can do that?

FYI, I apologize for no jsfiddle. I've never been able to get one to work.

Update. Selected answer works! Here's a screenshot of a 540 datapoint to the minute level. The dataset is too big to post. Thanks again Raidri

Answer 1

I got it to work with time mode and a vertical bar chart:

Relevant options:

    series: {
        stack: true,
        bars: {
            lineWidth: 0,
            align: "left",
            barWidth: 3600000,
            //horizontal: true,
            fill: 1,
            show: true,
        }
    },
    ...
    xaxis: {
        min: startDate.valueOf(),
        max: endDate.valueOf(),
        mode: "time",
        timeformat: "%H:%M",
        ...

Also the values for your datapoints are changed to 1 so the bars here have a height of one. If you change it to minute values, you have to change the barWidth option accordingly.

See this fiddle for the full example.