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

You might also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More