table2gichart - Generating Charts From Accessible Data Tables

This Demo shows you, how this little mootools script works. You can use all options from Goole Interactive Chart Tools to set the chart properties.

Simple Pie Chart

First example is a simple pie chart which is the default chart type. The data html table is replacing with the chart.

Browser	Percent
MSIE	20
FireFox	100
Camino	70
Opera	90
Safari	90

The next one use the same table stylesheet class (table2chart) with new chart title and other data and size (700x500)

Brand	Count
Ford	20094
GM	43943
BMW	10243
Mercedes	5943
Tesla	943

Same as previous chart with some google chart options, onSelect Event and hidden data table drawn as donut chart.

Brand	Count
Ford	20094
GM	43943
BMW	10243
Mercedes	5943
Tesla	943

Horizontal Bar Chart

This chart is also initialized by css class table2chart but the html element data-chart is set to 'ColumnChart' to draw a horizontal bar chart. data-tableview is set to "show" to prevent delete data table. data-chartid defines where chart should be drawn. With data-url at <tr> tag you can set a link which is opened by click on chart graph. The default bar colors are set by data-style.

Vertical Bar Chart

This data table contains links instead of data-url param and data-chart is set to 'BarChart'. If you click on a bar graph you will be also redirect.