HTML and CSS Reference
In-Depth Information
Figure 9-17. A background canvas with an image and, stacked on top of it, a foreground canvas with
the animated red circle
9.11 Drawing Graphs with <canvas>
Problem
You have some data that you want to plot in a graph using a canvas element.
Solution
All of the canvas API commands discussed in this chapter, plus other advanced com-
mands (for complex curves, etc.), can be combined to create very nice-looking graphs
that visualize data, either as line, pie, or other types of charts.
As you can probably imagine, the complexity of such a task is quite high. So, we will
not discuss specifically how to draw your own graphs, but will instead show how to
use a simple, free graphing library (which does the hard work for you!) called flot .
The flot library uses jQuery, so you need to load a recent version of jQuery first, and
then the latest release of the flot library:
<script src="jquery.js"></script>
<script src="jquery.flot.js"></script>
 
Search WWH ::




Custom Search