Edit in JSFiddle

var graphinator;
(function (graphinator) {
    graphinator.initilize = function () {
        if ($ == null) {
            var msg = 'JQuery is not defined. Please reference JQuery for graphinator to function properly';
            alert(msg);
            throw msg;
        }
    };

    graphinator.buildDummyTable = function (rows, elementId) {
        var fakeDataArray = [];
        for (var i = 0; i <= rows; i++) {
            var fakeData = {
                String: Guid.newGuid(),
                Number: i,
                RandomNumber: Math.floor((Math.random() * 1000) + 1)
            };
            fakeDataArray.push(fakeData);
        }
        return new HtmlTable(elementId, fakeDataArray).toHtmlString();
    };

    graphinator.graphinate = function (tableId, imgSrc) {
        var colCount = $('table#' + tableId + ' tr:first').children().length;

        for (var i = 0; i < colCount; i++) {
            var max = 0;
            var min = 0;

            $('#' + tableId + ' tr').each(function (index, row) {
                var val = $(row).children()[i].innerHTML;
                var cleanVal = cleanValue(val);
                if (isNumber(cleanVal) === true) {
                    var valNum = parseInt(cleanVal);
                    if (isNaN(valNum) === false) {
                        if (valNum > max)
                            max = valNum;
                        if (valNum < min)
                            min = valNum;
                    }
                }
            });

            $('#' + tableId + ' tr').each(function (index, row) {
                var val = $(row).children()[i].innerHTML;
                var cleanVal = cleanValue(val);
                if (isNumber(cleanVal) === true) {
                    var valNum = parseInt(cleanVal);
                    if (isNaN(valNum) === false) {
                        var spread = max - min;
                        var relative = valNum - min;
                        if (spread !== 0) {
                            var working = (relative / spread) * 100;
                            var hundredBasedValue = parseInt(working.toFixed(2));
                            $(row).children()[i].innerHTML = val + builBarElement(hundredBasedValue, imgSrc);
                        }
                    }
                }
            });
        }
      
        var g = $('.graphinator');
        g.css('width', '0%');
        var width = 0;
        var intervalFunc = function () {
            g.css('width', (width + '%'));
            width++;
            if (width === 100) {
                window.clearInterval(intr);
            }
        };
        var intr = setInterval(intervalFunc, 5);
    };

    var isNumber = function (o) {
        return !isNaN(o - 0) && o !== null && o.replace(/^\s\s*/, '') !== "" && o !== false;
    };

    var cleanValue = function (input) {
        var result = input.replace('%', '').replace('$', '').replace(',', '');
        return result;
    };

    var builBarElement = function (percent, imgSrc) {
        var result = '<br/><div class="graphinator" style="width:0%">';
        result += '<img src="' + imgSrc + '" style="width:' + percent + '%;height:10px;" ></div>';
        result += '</div>';
        return result;
    };
})(graphinator || (graphinator = {}));

var HtmlTable = (function () {
    function HtmlTable(id, rows) {
        this.id = '';
        this.rows = [];
        this.id = id;
        this.rows = rows;
    }
    HtmlTable.prototype.toHtmlString = function () {
        var result = '';
        result += '<table id=' + this.id + ' border="1">';

        var isHeaderRow = true;

        $.each(this.rows, function (index, item) {
            result += '<tr>';

            if (isHeaderRow) {
                $.each(item, function (indx, itm) {
                    result += '<th>';
                    result += indx;
                    result += '</th>';
                });
                isHeaderRow = false;
            } else {
                $.each(item, function (indx, itm) {
                    result += '<td>';
                    result += itm;
                    result += '</td>';
                });
            }
            result += '</tr>';
        });

        result += '</table>';
        return result;
    };
    return HtmlTable;
})();

var Guid;
(function (Guid) {
    var s4 = function () {
        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
    };
    var guid = function () {
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    };
    Guid.newGuid = function () {
        return guid();
    };
})(Guid || (Guid = {}));

 <h1>Graphinator Proof of Concept</h1>
    <button id="btnBuildTestTable">Build Test Table</button>
    <button id="btnGraphinate">Graphinate This Table</button>
    <div id="content">
    </div>
<script>
    $(function () {
        graphinator.initilize();
        
        $('#btnBuildTestTable').click(function () {
            $('#content').html(graphinator.buildDummyTable(10, 'myTestTable'));
        });
        
        $('#btnGraphinate').click(function () {
            graphinator.graphinate('myTestTable',"http://dev6.blob.core.windows.net/dev6pub/conditionalBack.jpg");
        });
    });
</script>