reverse y-axis

3,820 views
Skip to first unread message

Kris Flint

unread,
Apr 9, 2008, 12:12:52 PM4/9/08
to flot-...@googlegroups.com
Hi there everyone,

Sorry about the confusing subject, I can't work out how to explain what I'm trying to do in very few words!

So here's the problem, I have a dataset where the y values range from (say) 1 to 30 and the x values are datetimes. This will probably seem very straightforward, the twist is that I want '1' to be at the top of the y-axis and 30 to be at the bottom. This might seem a bit odd but 1 represents where someone wants to be and so to have a graph which typically looks like it's declining isn't really representative of progress (I hope that was clear enough).

If I try telling the options to set the min: 1 and max: 30 fire bug throws me:

An invalid or illegal string was specified" code: "12
ctx.moveTo(0, Math.floor(tVert(v)) + ctx.lineWidth/2);

I've thought about other alternatives like negating all the values and then doing something clever to do with the y-axis labelling, is this possible.

I guess what I really need to know is what are my options, has this ever come up before, am I going to have to try doing a patch type thing?

Many thanks,

Kristian

Woody Gilk

unread,
Apr 9, 2008, 12:14:06 PM4/9/08
to flot-...@googlegroups.com
Label them to fake it.

-Woody

On Wed, Apr 9, 2008 at 11:12 AM, Kris Flint <kgf...@gmail.com> wrote:
> Hi there everyone,
>
> Sorry about the confusing subject, I can't work out how to explain what I'm
> trying to do in very few words!
>
> So here's the problem, I have a dataset where the y values range from (say)
> 1 to 30 and the x values are datetimes. This will probably seem very
> straightforward, the twist is that I want '1' to be at the top of the y-axis
> and 30 to be at the bottom. This might seem a bit odd but 1 represents where
> someone wants to be and so to have a graph which typically looks like it's
> declining isn't really representative of progress (I hope that was clear
> enough).
>
> If I try telling the options to set the min: 1 and max: 30 fire bug throws
> me:
>
> An invalid or illegal string was specified" code: "12

Kristian

unread,
Apr 9, 2008, 12:21:57 PM4/9/08
to Flot graphs
Thanks Woody,

So I'm guessing by the immediate (thank you) and straightforward
nature of your reply this must be in the docs... I'll have to admit
being a little confused at exactly which bit in the docs pertains to
this (I only started looking at flot yesterday but I have read the
docs). I haven't played or got my head around the nature of 'ticks'
I'm assume they're points on the graph.
Should I be playing with this functionality, in around:


Or like this (you can mix the two if you like):
ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]]</pre>

OR

The axis object has "min" and "max" with the range of the axis,
"tickDecimals" with the number of decimals to round the value to and
"tickSize" with the size of the interval between ticks as calculated
by the automatic axis scaling algorithm (or specified by you). Here's
an example of a custom formatter:

function suffixFormatter(val, axis) {
if (val > 1000000)
return (val / 1000000).toFixed(axis.tickDecimals) + " MB";
else if (val > 1000)
return (val / 1000).toFixed(axis.tickDecimals) + " kB";
else
return val.toFixed(axis.tickDecimals) + " B";
}

Many thanks,

Kristian

Woody Gilk

unread,
Apr 9, 2008, 12:24:28 PM4/9/08
to flot-...@googlegroups.com
Ticks would be what you want:

ticks: [[1, "30"], [2, "29"]] (etc)

Kristian

unread,
Apr 9, 2008, 12:26:57 PM4/9/08
to Flot graphs
Brilliant, thanks v.much for your help, I'll plug away at that before
I ask anything else.

Kristian
Reply all
Reply to author
Forward
0 new messages