Question

This may be a very dumb question, but how do I draw a path that will stretch to a div’s width?

I am experimenting with Raphaeljs to make an interactive chart: the user can click sparklines and the lines shift up and down to reveal text content. I see that Raphael’s rectangles and other shapes will stretch to width fine by setting the width to 100%, but I can’t get a line to do this.

I’ve set up the paper like this:

var SLAPaper = new Raphael( document.getElementById("LineSLA"), "100%", 60);

Set up the line like this:

var lineSLA = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");

I also set a viewbox but this doesn’t seem to make a difference. I can’t set a % width on the viewbox anyway:

SLAPaper.setViewBox(0,0,1500,60, true);

Any help appreciated. Thanks.

Answer 1

I’ve personally had problems with using percentages for defining size of both paper and objects in Raphael, especially with Internet Explorer. The best I could come up with would be to scale the line to fit inside paper, based on the width of the path (assuming that the width is more than the height):

var line = SLAPaper.path("F1 M 0,42L 103,12L 222,45L 390,13L 460,45L 453,27L 455,28L 450,0L 479,25");
var scl = SLAPaper.width / line.getBBox().width;
line.transform('S' + scl + ',' + scl + ',0,0');