Vertically flipping a Raphael SVG Shape

Question

I have created a fiddle comprising a small part of my project. As this is in SVG the axis needs to be inverted vertically for it to form the required chart. However, when I use transform on the code as follows:

    SVGpaper.path(s).attr({
      stroke: "000",
      "stroke-width": 3,
      transform: "s1,-1"
    });

the two lines which start at the same point in the fiddle, they get separated. Can anyone explain why this is happening? I believe I haven't missed out any arguments.

Answer 1

I'd try building the path string, and then add outside the loop and performing the transform if I'm understanding what you are after correctly...

for (var i = 0; i < dataline.length; i++) {
    var x1 = dataline[i].dataPoints[i].x,
        y1 = dataline[i].dataPoints[i].y;


    s += "M" + x1 + "," + y1;

    for (var j = 0; j < dataline[i].dataPoints.length; j++) {

        var x2 = dataline[i].dataPoints[j].x,
            y2 = dataline[i].dataPoints[j].y;
        s += " L" + x2 + "," + y2;
    }

}

SVGpaper.path(s).attr({
        stroke: "000",
        "stroke-width": 3,
        transform: 's1,-1 T150,0'
    });

updated jsfiddle here http://jsfiddle.net/Qru24/8/