Canvas text labels in Flot graphs

While html ticks, labels, and legends are great for styling and extendability by default, there are times it’d be nice if all of that information was on the graph itself, like when you want to convert the canvas image to real image, i.e. through data uris:

canvas.toDataURL("image/png");

Anyway, Andre Lessa did just that with his Flot canvas text plugin that was inspired by the Jim Studt’s canvas text.

I’ve copied Lessa’s library to github and patched a small issue I encountered. Check it out at flot-text on github.

Side note, if you’re having trouble getting your canvas saved images to have a white background (in chrome and ie they’ll default to a black background because they’re actually transparent by default), then check out this blog on how to resolve that: http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/