Open Source Project: Flot Canvas Text

This project is a simple Flot plugin that "draws" text (tick labels, data point values, legends, etc...) directly on FLOT's canvas context.

FLOT itself is an amazing graph package written on top of JQuery.

To download the plugin, visit my github page.

Why would someone need this?

As of its release 0.6, FLOT's tick labels and the legends are all created using HTML DIVs (i.e. not created directly on the Canvas object).
As a consequence, you can't use the canvasInstance.toDataURL("image/png") method to export the complete graph as an image.

For the project I originally created it for, I needed to completely remove all the DIV overlays from the graph. That's why this plugin was created.

Some Live Examples:

These examples are based on the original FLOT examples but I changed a thing or two just to highlight the problem I was trying to solve.
Just ignore the data itself ... there's some nonsense in there :-)

And to make things really interesting, in all my example pages I'm also using the canvas2image library created by Jacob Seidelin in order to show you how easy it is to put the canvas data into an image... Sorry IE Users, that button will be disabled for you.

Example 1
Example 2
Example 3
Example 4
Example 5


Return to the Home Page


Site content © 1999 - 2012 Andre Lessa.
All Rights Reserved.