Create Charts & Graphs using HTML 5 Canvas and jQuery

Visualize is a jQuery plugin to create Charts & Graphs using HTML 5 Canvas tag. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

The technique is very useful to create tabular format data for the visualization already formatted in the page in a way that is easily accessible to users browsing the web with a screen reader or other assistive technology.

To create a line, pie, bar or an area chart from a HTML table , Just attach the visualize plugin's to your page, and call the visualize() function on the table, like this:

Visualize offers various methods for customizing:

1. type: string. Accepts 'bar', 'area', 'pie', 'line'. Default: 'bar'.
2. width: number. Width of chart. Defaults to table width
3. height: number. Height of chart. Defaults to table height
4. appendTitle: boolean. Add title to chart. Default: true.
5. title: string. Title for chart. Defaults to text of table's Caption element.
6. appendKey: boolean. Add the color key to the chart. Default: true.
7. colors: array. Array items are hex values, used in order of appearance.
8. textColors: array. Array items are hex values. Each item corresponds with colors
9. parseDirection: string. Direction to parse the table data. Accepts 'x' and 'y'.
10. pieMargin: number. Space around outer circle of Pie chart.
11. pieLabelPos: string. Position of text labels in Pie chart. Accepts 'inside' and 'outside'.
12. lineWeight: number. Stroke weight for lines in line and area charts.
13. barGroupMargin: number. Space around each group of bars in a bar chart.
14. barMargin: number. Creates space around bars in bar chart (added to both sides of each bar).

Demo : Visualize Demo | charting_v2 Demo