Responsive SVG line graph with Raphaël

Question

I'm looking at graphing solutions for my responsive webapp. I really like this Raphaël analytics demo: http://raphaeljs.com/analytics.html (Here it is on JS Bin: http://jsbin.com/svg/1/edit)

...but it's not responsive. I found this responsive SVG graph on codepen: http://codepen.io/meloncholy/pen/KxiJA, but I'm looking for a JavaScript integrated solution like Raphaël, not just a static SVG.

Any way to combine the two so as to make the Raphaël graph responsive?

Here's an article by the codepen demo's author on how he made the responsive SVG: http://meloncholy.com/blog/making-responsive-svg-graphs/

Answer 1

The Raphaël Demo you posted renders the graph when the window.onload event is fired. The Demo generates with var r = Raphael("holder", width, height) a stage with a fixed width of 800px and draws the graph somewhere here r.drawGrid(...).

Similar to the codepen.io example you've posted, you could reinit/redraw the whole thing with a different width depending on the width of the window on the window.resize event.

A second approach, you loop through all SVG elements on the window.resize event with a similar var unscale = function (el) { ... } function like in codepen.io example.

Just some ideas...