CanvasGraph is now replaced by PlotKit which offers the same functionality as CanvasGraph but also includes SVG support and preliminary event support. CanvasGraph will not be updated any more.
- Alastair Tse (21st March 2006)
Don't know what the Canvas HTML Tag is? Learn more about the Canvas Tag below. Also if you want to know why this is using Canvas tag rather than SVG?
Pages that Use CanvasGraph
Note: This does not work on Internet Explorer.
- Plot bar charts, line graphs and pie charts
- Plot multiple datasets on one graph.
- Flexible customisable layout and colour scheme.
- Fully documented and open source.
- Unit Tests
Current Version: CanvasGraph.js - 0.7 (Last Updated: 13th Jan 2006)
- 0.7 current (13th Jan 2006) - Major reorganisation. Moved into own namespace so it can work with Dojo and other strict frameworks without polluting the global namespace.
- 0.6 old (27 Dec 2005) - Major bugfix release. Fixed bar charts with proper positioning and handle single value datasets. Added flexibility with pie chart inputs.
- 0.5.1 old (16 Dec 2005)- Minor bugfix with drawGrid when using custom colors. (Thanks to Philippe Marschall)
- 0.5 (11 Dec 2005) - Initial Public Release
If there are no graphs in the examples, it means your browser does not support the canvas tag. You can test your browser's support of the canvas tag here.
Below are basic example graphs that can be plotted by CanvasGraph. Note that you need a compatible browser to view them.
Unit Tests Page
Here is a constantly updated Unit tests page to prevent regressions between versions, and also demonstrate some basic plotting.
Dynamic Graph Page
Simple line plot of two data sets: square numbers and 2 * square numbers
View Source: LinePlotDemo.js
Simple bar chart of 1 data set with custom labels
View Source: BarChartDemo.js
Simple pie chart of powers of 2.
View Source: PieChartDemo.js
Data from a table
View Source: TableBarChartDemo.js
Here are some examples of the same graph above rendered in Mozilla Firefox 1.5 under Mac OS X.
CanvasGraph.js consists of just one single class that you should use, the CanvasGraph object.
CanvasGraph Class Functions
Returns true if canvas tag is supported in the current browser, otherwise false. The optional parameter canvas_name can be used to specify the id of a canvas tag that is already in the document.
CanvasGraph Object Methods
- CanvasGraph(id_of_canvas) - constructor
This creates an instance of the CanvasGraph by passing it the Canvas ID that is in the HTML which is will draw to. NOTE: You must enclose the canvas tag in a div for labels to be drawn correctly.
CanvasGraph Object Attributes
Learn more about the HTML Canvas Tag
- WHATWG Canvas Tag Specification
- Apple Documentation of the Canvas Tag in Safari 2.0
- Mozilla Documentation of the Canvas Tag
- Canvas SVG - Translating between Canvas Tag and SVG.
Canvas Tag vs SVG
Probably the first thing someone asks is why bother with Canvas tag and not do it with SVG?
Good point. It just so happens that my primary browsers are Safari and Mozilla Firefox, and the thing they have in common is the Canvas Tag, and unfortunately not SVG.
Secondly, I'm reasonably competent at the stack based graphics API like OpenGL that is presented with the Canvas Tag. So doing graphing is a piece of cake for me in that API, whereas I don't even know where to start with SVG.
By: Alastair Tse [alastair^tse.id.au]
License: BSD License