window.onload = function () {
    // Grab the data
    var labels = [],
        data = [];
    $("#data tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data tbody td").each(function () {
        data.push($(this).html());
    });
    $("#data").hide();
    
    // Draw
    var width = 550,
        height = 100,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#99bfc2",
        r = Raphael("holder", width, height),
        txt = {"font": '10px "Arial"',  "font-weight":'bold',stroke: "none", fill: "#000"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
    r.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 6, 3, "#ccc");
    var path = r.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r.path({stroke: "none", fill: color, opacity: .2}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame = r.rect(10, 10, 100, 40, 5).attr({fill: "#99bfc2", stroke: "#333", opacity: .75, "stroke-width": 1}).hide(),
        label = [],
        is_label_visible = false,
        leave_timer;
    label[0] = r.text(60, 25, "24 %").attr(txt).hide();
    label[1] = r.text(60, 40, "22 %").attr(txt).attr({fill: "#000"}).hide();

    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r.text(x, height - 6, labels[i]).attr(txt).toBack();
        bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r.circle(x, y, 5).attr({fill: color, stroke: "#000"});
        var rect = r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0});
        (function (x, y, data, lbl, dot) {
            var timer, i = 0;
            $(rect[0]).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame.show().animate({x: newcoord.x, y: newcoord.y}, 100 * is_label_visible);
                label[0].toFront().attr({text: data + "%" + ((data % 10 == 1) ? "" : "")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 15}, 100 * is_label_visible);
                label[1].toFront().attr({text: lbl + " "}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 30}, 100 * is_label_visible);
                dot.attr("r", 7);
                is_label_visible = true;
                r.safari();
            }, function () {
                dot.attr("r", 5);
                r.safari();
                leave_timer = setTimeout(function () {
                    frame.hide();
                    label[0].hide();
                    label[1].hide();
                    is_label_visible = false;
                    r.safari();
                }, 1);
            });
        })(x, y, data[i], labels[i], dot);
    }
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame.toFront();


// Grab the data
    var labels = [],
        data = [];
    $("#data1 tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data1 tbody td").each(function () {
        data.push($(this).html());
    });
    $("#data1").hide();
    
    // Draw
    var width = 550,
        height = 100,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#99bfc2",
        r1 = Raphael("holder1", width, height),
        txt = {"font": '10px "Arial"',  "font-weight":'bold',stroke: "none", fill: "#000"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
        r1.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 6, 3, "#ccc");
	
	
	
    var path = r1.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r1.path({stroke: "none", fill: color, opacity: .2}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame1 = r1.rect(10, 10, 100, 40, 5).attr({fill: "#99bfc2", stroke: "#333", opacity: .75, "stroke-width": 1}).hide(),
        label1 = [],
        is_label_visible1 = false,
        leave_timer;
    label1[0] = r1.text(60, 25, "24 %").attr(txt).hide();
    label1[1] = r1.text(60, 40, "22 %").attr(txt).attr({fill: "#000"}).hide();

    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r1.text(x, height - 6, labels[i]).attr(txt).toBack();
        bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r1.circle(x, y, 5).attr({fill: color, stroke: "#000"});
        var rect = r1.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0});
        (function (x, y, data, lbl, dot) {
            var timer, i = 0;
            $(rect[0]).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame1.show().animate({x: newcoord.x, y: newcoord.y}, 100 * is_label_visible1);
                label1[0].toFront().attr({text: data + "%" + ((data % 10 == 1) ? "" : "")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 15}, 100 * is_label_visible1);
                label1[1].toFront().attr({text: lbl + " "}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 30}, 100 * is_label_visible1);
                dot.attr("r", 7);
                is_label_visible1 = true;
                r1.safari();
            }, function () {
                dot.attr("r", 5);
                r1.safari();
                leave_timer = setTimeout(function () {
                    frame1.hide();
                    label1[0].hide();
                    label1[1].hide();
                    is_label_visible1 = false;
                    r1.safari();
                }, 1);
            });
        })(x, y, data[i], labels[i], dot);
    }
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame1.toFront();

// Grab the data
    var labels = [],
        data = [];
    $("#data2 tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data2 tbody td").each(function () {
        data.push($(this).html());
    });
    $("#data2").hide();
    
    // Draw
    var width = 550,
        height = 100,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#99bfc2",
        r2 = Raphael("holder2", width, height),
        txt = {"font": '10px "Arial"',  "font-weight":'bold',stroke: "none", fill: "#000"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
        r2.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 6, 3, "#ccc");
	
	
	
    var path = r2.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r2.path({stroke: "none", fill: color, opacity: .2}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame2 = r2.rect(10, 10, 100, 40, 5).attr({fill: "#99bfc2", stroke: "#333", opacity: .75, "stroke-width": 1}).hide(),
        label2 = [],
        is_label_visible2 = false,
        leave_timer;
    label2[0] = r2.text(60, 25, "24 %").attr(txt).hide();
    label2[1] = r2.text(60, 40, "22 %").attr(txt).attr({fill: "#000"}).hide();

    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r2.text(x, height - 6, labels[i]).attr(txt).toBack();
        bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r2.circle(x, y, 5).attr({fill: color, stroke: "#000"});
        var rect = r2.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0});
        (function (x, y, data, lbl, dot) {
            var timer, i = 0;
            $(rect[0]).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame2.show().animate({x: newcoord.x, y: newcoord.y}, 100 * is_label_visible2);
                label2[0].toFront().attr({text: data + "%" + ((data % 10 == 1) ? "" : "")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 15}, 100 * is_label_visible2);
                label2[1].toFront().attr({text: lbl + " "}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 30}, 100 * is_label_visible2);
                dot.attr("r", 7);
                is_label_visible2 = true;
                r2.safari();
            }, function () {
                dot.attr("r", 5);
                r2.safari();
                leave_timer = setTimeout(function () {
                    frame2.hide();
                    label2[0].hide();
                    label2[1].hide();
                    is_label_visible2 = false;
                    r2.safari();
                }, 1);
            });
        })(x, y, data[i], labels[i], dot);
    }
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame2.toFront();

// Grab the data
    var labels = [],
        data = [];
    $("#data3 tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data3 tbody td").each(function () {
        data.push($(this).html());
    });
    $("#data3").hide();
    
    // Draw
    var width = 550,
        height = 100,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#99bfc2",
        r3 = Raphael("holder3", width, height),
        txt = {"font": '10px "Arial"',  "font-weight":'bold',stroke: "none", fill: "#000"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
        r3.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 6, 3, "#ccc");
	
	
	
    var path = r3.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r3.path({stroke: "none", fill: color, opacity: .2}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame3 = r3.rect(10, 10, 100, 40, 5).attr({fill: "#99bfc2", stroke: "#333", opacity: .75, "stroke-width": 1}).hide(),
        label3 = [],
        is_label_visible3 = false,
        leave_timer;
    label3[0] = r3.text(60, 25, "24 %").attr(txt).hide();
    label3[1] = r3.text(60, 40, "22 %").attr(txt).attr({fill: "#000"}).hide();

    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r3.text(x, height - 6, labels[i]).attr(txt).toBack();
        bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r3.circle(x, y, 5).attr({fill: color, stroke: "#000"});
        var rect = r3.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0});
        (function (x, y, data, lbl, dot) {
            var timer, i = 0;
            $(rect[0]).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame3.show().animate({x: newcoord.x, y: newcoord.y}, 100 * is_label_visible3);
                label3[0].toFront().attr({text: data + "%" + ((data % 10 == 1) ? "" : "")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 15}, 100 * is_label_visible3);
                label3[1].toFront().attr({text: lbl + " "}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 30}, 100 * is_label_visible3);
                dot.attr("r", 7);
                is_label_visible3 = true;
                r3.safari();
            }, function () {
                dot.attr("r", 5);
                r3.safari();
                leave_timer = setTimeout(function () {
                    frame3.hide();
                    label3[0].hide();
                    label3[1].hide();
                    is_label_visible3 = false;
                    r3.safari();
                }, 1);
            });
        })(x, y, data[i], labels[i], dot);
    }
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame3.toFront();
};