Column Chart

HTML5 CSS3 Column Chart with fall-back to data-table

HTML

<table id="data1">
    <thead>
        <tr><th>Lang</th><th>Value</th></tr>
    </thead>
    <tbody>
        <tr><td>JavaScript</td><td>100</td></tr>
        <tr><td>CSS</td><td>200</td></tr>
        <tr><td>HTML</td><td>300</td></tr>
        <tr><td>PHP</td><td>50</td></tr>
        <tr><td>MySQL</td><td>30</td></tr>
        <tr><td>Apache</td><td>20</td></tr>
        <tr><td>Linux</td><td>10</td></tr>
        <tr><td>Apache</td><td>20</td></tr>
        <tr><td>Linux</td><td>10</td></tr>
    </tbody>
</table>

JavaScript

window.CD2 = window.CD2 || {};
window.CD2.UI = window.CD2.UI || {};
window.CD2.UI.chart = window.CD2.UI.chart || {};
window.CD2.UI.charts = window.CD2.UI.charts || {};
window.CD2.UI.charts.barChart = function(elem, options) {
    options = ((typeof options == 'object') ? options : {});
    var _elem = elem;
    var tds, data = [],
        color, colors = [],
        value = 0, total = 0,
        activeSegment = 99,
        maxBarHeight = 0,
        depth = ( options.depth || ( ( options.threeD || false ) ? 10 : 0 ) ),
        ctx,
        border = ( options.border || false ),
        pallette = {
            'light': [
                '#1abc9c',
                '#2ecc71',
                '#3498db',
                '#9b59b6',
                '#f1c40f',
                '#e67e22',
                '#e74c3c',
                'rgb(216, 123, 209)',
                '#999999'
            ],
            'dark': [
                'rgb(22, 154, 128)',
                'rgb(39, 172, 95)',
                'rgb(44, 128, 184)',
                'rgb(130, 78, 151)',
                'rgb(224, 183, 16)',
                'rgb(201, 110, 29)',
                'rgb(197, 66, 52)',
                'rgb(167, 95, 161)',
                '#666666'
            ]
        };
    var canvas = document.createElement('canvas');
    
    var getColor = function(i) {
        return pallette.light[i];
    };
    var getDarkColor = function(i) {
        return pallette.dark[i];
    };
    var getHeight = function( elem ) {
        return parseInt( getComputedStyle( elem )['height'].replace('px'), 10);
    };
    var getWidth = function( elem ) {
        isCanvasFW = ( (elem.nodeName.toLowerCase() == 'canvas') && (elem.style.width == '100%') );
        isParentBody = ( elem.parentNode.nodeName.toLowerCase() == 'body' );
        return (isCanvasFW ? ( isParentBody ? window.innerWidth : elem.parentNode.width ) : elem.width );
    };
    var init = function() {
        var tableHeaderHeight = getHeight(...