Canvas - HTML5 - page 217

As you can see, with just a few lines of code we were able to leverage the power of the
flot library to generate a professional-looking graph, instead of having to write hundreds
of lines of our own canvas API code.
As an interesting exercise, take your knowledge of the canvas API from
this chapter's recipes and see if you can reproduce the same graph with-
out using the flot library.
The flot library API allows you to manually generate and display labels for the x- and
y-axes, control the minimum and maximum range for each axis, manually define the
grid step size for each axis, control colors and line styles, and much more.
Discussion
The flot library is very flexbile and powerful. It has a multitude of options for controlling
how graphs are drawn. We will not cover the details of the flot API here, but you're
encouraged to explore the API and configuration options here: http://people.iola.dk/
olau/flot/API.txt .
In addition to the built-in graph options, flot features a plug-in system that allows others
to create extensions to its capabilities. This makes flot a very capable browser graphing
solution for your sites. Several useful plug-ins are included with the flot distribution,
and many others are available for optional usage.
There are, of course, dozens of other canvas graphing libraries available as well, some
free and some for license. These options have a wide range of capabilities, so be sure
to explore what's available.
See Also
For more information on using flot to plot graphs in a canvas element, see the flot home
page at http://code.google.com/p/flot .
9.12 Saving a <canvas> Drawing to a File
Problem
You want to save the current drawing in a canvas element to a file.
Solution
The canvas API provides the command toDataURL(...) , which will extract the image
data from the canvas element into the specified image format. For instance, to extract
the image data for a graph generated by flot (see Recipe 9.11 ) as a PNG format file, you
would do this: