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.

BrowserPercent
MSIE20
FireFox100
Camino70
Opera90
Safari90

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

BrandCount
Ford20094
GM43943
BMW10243
Mercedes5943
Tesla943

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

BrandCount
Ford20094
GM43943
BMW10243
Mercedes5943
Tesla943

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.

BrowserPercent
MSIE25
FireFox120
Camino130
Opera280
Safari50

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.

BrowserPercent
MSIE25
FireFox120
Camino130
Opera280
Safari50