Adding a scroll-bar to the raphael canvas

I am able to generate the raphael diagram , but it is excee开发者_StackOverflow中文版ding the specified width and height of the Raphael canvas.

How can i add a scroll-bar to the Raphael canvas to accommodate the entire diagram within the given width and height of the Raphael canvas?

Are there any other ways or workarounds to handle the above case?

Please help. Thanks in Advance.

---

I was running into a similar case, and I found a way that works, although it's a bit kludgy. My first try was setting a height and overflow:auto on the container div, along with setting the Raphael paper height to 100%. However, this didn't work; it appears that if you set the paper to 100%, it grabs the height of the div as it is before the chart is inserted, so that's no good.

However, a workaround is to do the following, assuming that the container div has an id of "holder", that I need the scrollable area to be 100px high, and that the Raphael paper object should be 800px wide:

var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here

var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");

I used jQuery to get and set the heights, but you could do that however you wish. The important point is to not set any restrictions on the height until after you've already created all the Raphael objects, then set the height of the paper object and the containing div to whatever you wish.

Note that if you simply want everything to show up, and don't need to fit the graphic into a specific height using scroll bars, you can just pass 100% as the height to the paper constructor, and forget everything after the first line of the sample above.