Inverting The Y-Axis On jQuery Flot Graph

February 13th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Flot is one of my favourite plotting libraries out there on the web at the moment. I’ve had a few encounters with it over the years, however earlier today I came across a rather unusual requirement; to display the Y-axis in the reverse order. The graph in question was being used to display the position of a website in search engines and therefore, the lower the number/ranking, the better.

The Solution

At first it didn’t appear that this was possible, however, after a bit of digging around I found the solution:

var flotOptions = {
	xaxis: { mode: "time" },
	yaxis: {
		transform: function (v) { return -v; },
		inverseTransform: function (v) { return -v; }

var plot = jQuery.plot( jQuery("#site_statistics"), [{ data: myData }], flotOptions );

There are two lines above which perform the inversion. These are:

transform: function (v) { return -v; },
inverseTransform: function (v) { return -v; }

By adding the two lines above to the ‘yaxis’ options when initializing your Flot chart, the values will appear in the reverse order.

This entry was posted on Wednesday, February 13th, 2013 at 8:16 am by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (2)
  1. Michal says:

    Thank you, that was exactly I was searching for.

  2. Anonymous says:

    Thank you!