Histograma

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<table id="ingresos">
    <thead>
        <tr>
            <th>Dia</th>
            <th>Ingresos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>67</td>
        </tr>
        <tr>
            <td>2</td>
            <td>47</td>
        </tr>
        <tr>
            <td>3</td>
            <td>56</td>
        </tr>
        <tr>
            <td>4</td>
            <td>17</td>
        </tr>
    </tbody>
</table>

JavaScript

(function($) {
    Raphael.fn.histogram = function(width, height, labels, values) {
        var paper = this,
            len = values.length,
            max = Math.max.apply(Math, values),
            division = (width - 10) / len;
        for (var i = 0, value; i < len; i++) {
            value = Math.round((values[i] * (height - 10)) / max);
            var bar = paper.rect(5 + (division * i), height - value - 5, division - 2, value).attr({
                stroke: 'none',
                fill: 'hsl(.6, .5, .5)'
            });
            paper.setStart();
            bar.tooltip = paper.set();
            var tooltip = {
                x: 5 + (division * i) + 7,
                y: height - value - 35
            };
            bar.tooltip.push(paper.text(tooltip.x, tooltip.y, labels[i][0]).attr({
                font: '12px Helvetica, Arial',
                fill: "#fff",
                "text-anchor": "start"
            }));
            bar.tooltip.push(paper.text(tooltip.x, tooltip.y + 16, labels[i][1]).attr({
                font: '10px Helvetica, Arial',
                fill: "hsl(.6, .8, .8)",
                "text-anchor": "start"
            }));
            var bb = bar.tooltip.getBBox();
            bar.tooltip.push(paper.rect(bb.x - 6, bb.y - 3, bb.width + 12, bb.height + 6, 1).attr({
                fill: "#000",
                stroke: "#666",
                "stroke-width": 2,
                "fill-opacity": .7
            }));
            bb = bar.tooltip.getBBox();
            var dx = 0,
                dy = 0;
            if (bb.x2 > width - 2) {
                dx = -(bb.x2 - width + 2);
            }
            if (bb.y < 2) {
                dy = -1 * bb.y + 4;
            }
            bar.tooltip.tShow="";
            if (dx != 0 || dy != 0) {
                bar.tooltip.tShow = "t"+dx+","+dy;
            }
            bar.tooltip.attr({
                opacity: 0
            });
            bar.tooltip.tHide = "T" + (width + 10) +...