Making charts in RaphaelJS that are 100% width?

Question

I have seen graphs in Flash & stuff that basically adapt nicely to whatever the size of the browser or flexible element they are inside of.... I\'m not really too well verse

Answer 1

In raphaeljs, you can call .setSize on a Raphael object to update its size. To adapt to runtime changes in browser window size, you can respond to a window resize event. Using jQuery, you could do:

// initialize Raphael object
var w = $(window).width(), 
    h = $(window).height();

var paper = Raphael($("#my_element").get(0), w,h);

$(window).resize(function(){
     w = $(window).width();
     h = $(window).height();
     paper.setSize(w,h);
     redraw_element(); // code to handle re-drawing, if necessary
});