I'm using jQuery Flot plugin and I would like to have 24 hour x-axis. But how to acplish that? I included necessary time plugin (jquery.flot.time.js) and tried something like this:

xaxis: {
    mode: "time",
    timeformat: "%H",
    tickSize: [1, "day"],
    twelveHourClock: true
}

but nothing is showing up. What am I doing wrong?

I'm using jQuery Flot plugin and I would like to have 24 hour x-axis. But how to acplish that? I included necessary time plugin (jquery.flot.time.js) and tried something like this:

xaxis: {
    mode: "time",
    timeformat: "%H",
    tickSize: [1, "day"],
    twelveHourClock: true
}

but nothing is showing up. What am I doing wrong?

• javascript
• flot

• What do you mean by a "24 hour x-axis"? One that is limited to just 24 hours? How would the ticks be labeled, etc...? – Mark Commented Jan 27, 2014 at 16:54
• I want to have on x-asix time every 1 hour (24-hour clock), like this: 00:00, 01:00, 02:00 etc. – Indy Commented Jan 27, 2014 at 17:03
• 1 Wouldn't you want to use tickSize: [1, "hour"] instead of "day"? – mechenbier Commented Jan 27, 2014 at 17:33

1 Answer 1

You are looking for something like this:

xaxis: {
    mode: "time",
    timeformat: "%I:%M %p", // HH:MM am/pm
    tickSize: [1, "hour"], // tick every hour
    twelveHourClock: true,
    min: 1390780800000, // start of today
    max: 1390863600000 // end of today
},

Very contrived example here.

EDITS

To show last 24 hours use:

var epochT = (new Date).getTime(); // time right now in js epoch

$.plot($("#placeholder"), [data], {
xaxis: {
    mode: "time",
    timeformat: "%I:%M %p",
    tickSize: [1, "hour"],
    twelveHourClock: true,
    min: epochT - 86400000, // time right now - 24 hours ago in milliseonds
    max: epochT,
    timezone: "browser" // switch to using local time on plot
},

Updated fiddle.