You are viewing cloquewerk

flot-axislabels v2.0

« previous entry | next entry »
Feb. 25th, 2012 | 11:17 pm

I've released version 2.0 of flot-axislabels, the flot plug-in for labelling axes. Flot is a great, easy-to-use JavaScript graphing lib, based on canvas; however, many people (myself included) viewed the lack of support for axis labels to be a big fault. With flot-axislabels, you can get said labels by just loading the script after flot and setting one extra option per axis (or a couple more if you have specific needs).

Version 2.0 (which is actually the first "real" release but has a lot of recent changes) now supports any number of X and Y axes. Previously only 2 X and 2 Y axes were supported (top, bottom, left and right).

Having more than 4 axes on a single plot probably sounds a bit weird, but apparently it is useful when plotting weather conditions:



You can see the live example and view its source to see how it's done. It's really quite simple.

flot-axislabels continues to support CSS translations, canvas, and traditional CSS positioning (plus a special mode for IE 8 combining CSS positioning with IE's special rotation functions). In the first two modes, labels for Y axes are rotated to face the plot. Graceful degradation is attempted based on the browser's detected capabilities.

Internally, it no longer pays attention to the name of the axis (yaxis, y2axis, etc.) but rather looks at the 'position' variable, which flot automatically sets if it is not provided. I believe this means that it will only work with flot 0.7, however.

Read the README, download the zip, and follow the project on github.

Link | Add to Memories | Share