Charts Summary

The jQuery Chart project is a plugin that adds simple HTML and CSS charts to your page based on tables.

You can add multiple charts to the page.

Horizontal Bars
Breed Populatiry
Total 250
Mongrel 90.5
Labrador 79.5
Whippet 50
Spaniel 20
Terrier 10

 

Vertical Bars (with optional grid lines)
Breed Populatiry
Total 250
Mongrel 90
Labrador 80
Whippet 50
Spaniel 20
Terrier 10

 

Grouped Bars
Gender Activity Populatiry
Female Shopping 90
Female Television 60
Female Cooking 25
Female Fishing 10
Male Shopping 20
Male Television 100
Male Cooking 25
Male Fishing 40

 

Waterfall Chart
Item Change
End Figure 250
3 Month Turnover 320
Operating Costs -90
Depreciation -110
Savings 80
End Figure 200

Options

classmodifier
Used to apply class names to the elements created by the plugin. You only need to specify a class modifier if you have a name-clash.
charttype
Currently, "bars" are supported (use direction to select horizontal or vertical bars).
direction
Whether the chart is horizontal or vertical.
labelcolumn
The index of the column containing the label text.
valuecolumn
The index of the column containing the value.
groupcolumn
The index of the column containing the group name (if required).
duration
Length of time in milliseconds for the chart animation.
showoriginal
Whether the original table should be displayed.
chartbgcolours
Bar colours to be used on the charts, for example ["#336699", "#669933", "#339966"].
chartfgcolours
Text colours to be used on the charts (to match the background colours), for example ["#FFFFFF", "#FFFFFF", "#FFFFFF"].
chartpadding
Padding applied to the chart elements.
chartheight
The display height of the chart.
showlabels
Whether to show the labels on each bar.
showgrid
Whether to show grid lines on the chart.
gridlines
The number of sections to divide the grid into.