CODEWITHSUNDEEP
jquerydatetimeflot
Kevin Simper
Kevin Simper

Reputation: 1687

Showing hours on y axis in jQuery flot

I have made a chart where i show hours on y axis. But now i have to convert the time to a decimal.

2:30 would be 2.5

As it is looking now

I know that you can set y axis to time mode, but I can not get it to work:

        yaxis: {
            mode: "time",
            timeformat: "%H:%M"

        },

But how should i deliver the hours to jQuery Plot: "1:40" do not work

I would like to make it look this way with just hours instead of minutes

Analytics example

I have search the internet for help and the jQuery API do not explain it properly: http://flot.googlecode.com/svn/trunk/API.txt

Thank you very much for your help!

Upvotes: 1

Views: 3179

Answers (1)

Ryley
Ryley

Reputation: 21226

What you want to do is just fake it up using the axis tickFormatter. The "time" mode should really be called something like "date" mode, because it's about dates not times. The time is just incidental really. So if you're already doing the work to convert the times to a decimal, just use a javascript function to convert them back to the format you want:

function timeTickFormatter(val,axis) {
  var hours = Math.floor(val);
  var minutes = (val - hours) * 60;

  return hours+":"+minutes;
}

That doesn't cover all the permutations obviously (i.e. leading zeros if you want them), but that's the idea. If you don't know how to put this into flot, it's like this in your plot options:

$.plot(placeholder, data, {
  ..,
  yaxis: {
    ..,
    tickFormatter:timeTickFormatter,
    ..
  }
});

Upvotes: 1

Related Questions