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/

4 Responses to “Canvas text labels in Flot graphs”

  1. Sijo Says:

    It stil doesnt work on chrome, trying to fix. it any pointers?

  2. yard lights Says:

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same
    comment. Is there any way you can remove people from that service?
    Thanks!

  3. planning retirement once Says:

    This is really interesting, You’re a very skilled blogger.
    I’ve joined your rss feed and look forward to seeking more of
    your great post. Also, I’ve shared your site in my social networks!

  4. pawn shop las vegas guns Says:

    Stunning quest there. What happened after? Thanks!

    Have a look at my weblog; pawn shop las vegas guns

Leave a Reply