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