gRaphael playground

by slace

HTML

<script src="http://raphaeljs.com/raphael.js"></script>
<script src="http://g.raphaeljs.com/g.raphael.js"></script>
<script src="http://g.raphaeljs.com/g.bar.js"></script>
<div id="chart"></div>

<button id="btn">Add column</button>

JavaScript

var r = Raphael("chart"),
    fin = function () {
        this.flag = r.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
    },
    fout = function () {
        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
    };
    
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
    
r.g.text(160, 10, "Basic Chart");
                
var chart = r.g.hbarchart(10, 15, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).hover(fin, fout);

//console.log(r);
//console.log(chart);

$('#btn').click(function(e) {
   e.preventDefault();
    $('#chart').children().remove();
    var r = Raphael("chart"),
    fin = function () {
        this.flag = r.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
    },
    fout = function () {
        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
    };
    
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
    
r.g.text(160, 10, "Basic Chart");
                
var chart = r.g.hbarchart(10, 15, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10, 40, 30, 20]]).hover(fin, fout);

});