Re: Scale a RaphaelJS graph in fluid layout

[Chris Williams]

I redraw my graphs on a window resize event.  Pain in the tail, but it works.

From: mrtn <mrtn...@gmail.com>
Reply-To: "raph...@googlegroups.com" <raph...@googlegroups.com>
Date: Thursday, November 29, 2012 4:45 PM
To: "raph...@googlegroups.com" <raph...@googlegroups.com>
Subject: Scale a RaphaelJS graph in fluid layout

Hi, I embed a graph created using RaphaelJS inside a <div> on a fluid-layout page. In other words, the size of this <div> scales up and down based on the browser window size. Obviously, the graph inside the <div> should scale accordingly.

With pure SVG, the following will do the trick (note viewBox and preserveAspectRatio properties):

<div id="graph">

<svg id="mygraph" viewBox="0 0 775 560" preserveAspectRatio="xMidYMid meet">

<g>

<line class="link" x1="180" y1="280" x2="560" y2="280"></line>

</g>

<g>

<circle class="node" cx="180" cy="280" id="n1" r="18"></circle>

<circle class="node" cx="560" cy="280" id="n2" r="18"></circle>

</g>

<g>

<text class="label" transform="translate(180,280)" text-anchor="middle" y=".3em">A</text>

<text class="label" transform="translate(560,280)" text-anchor="middle" y=".3em">C</text>

</g>

</svg>

</div>

However, as I need to support IE8, I need to use RaphaelJS to generate the graph. Now the question is how to make the graph work with the fluid layout (especially how to make it work with IE8 when it is VML)?

I've tried calling 'setViewBox' method after the graph is created, but it doesn't seem to do anything when I adjust the browser window size. Further, it seems that all the stylings of the circles (set using 'attr()' method when creating the graph) are lost once 'setViewBox' method is called - why is that?  

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/E1IYETBkoB8J.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.