customized bargraph's background in rapheal

Question

I am new in SVG and RAPHAEL javaScript.

I am creating bar graphs by RAPHAEL.the bar graphs are having "stripped" background. Now the bar graphs are being rendered in "path" of "SVG".According to me to achieve the exact look and feel there are two ways:

1)I have to code the path's background. or 2)I need to provide background image which I should repeat through out the path.

I could not code the first approach.

so,here is my second approach:

"r1" bar graph is being created at $("#first_graph"). I want to customize the background of bar graph.To achieve that I selected the path which is responsible for graph section and setting the background fron pattern.

script part:

r1.hbarchart(0, 0, 650, 90, [base_array_1, calc_array_1], {colors: ["#278bd1","#052f4d"],stacked: true}).hover(fin, fout);

$("#first_graph").find("path:odd").attr({ fill: "url(#image)",

});

pattern part.... declared at HTML:

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>

<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
 <image xlink:href="../images/sub_chart_blue_bg.png" width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
      </defs>
    </svg>

Now, the problem ...Iam facing(in second approach) is that:

the image is being stratched.

I request you to help me by providing any one approch to create stripped background of graph(path of svg).

Answer 1

Here is how you can do it. Not sure why yours does not work.

So to answer to your question "can any one help me to create "stripped background image" of path." Look at the DEMO

var p = Raphael('notepad',500,500);
var pad = p.path("M25.221,1.417H6.11c-0.865,0-1.566,0.702-1.566,1.566v25.313c0,0.865,0.701,1.565,1.566,1.565h19.111c0.865,0,1.565-0.7,1.565-1.565V2.984C26.787,2.119,26.087,1.417,25.221,1.417zM15.666,29.299c-0.346,0-0.626-0.279-0.626-0.625s0.281-0.627,0.626-0.627c0.346,0,0.627,0.281,0.627,0.627S16.012,29.299,15.666,29.299zM24.376,26.855c0,0.174-0.142,0.312-0.313,0.312H7.27c-0.173,0-0.313-0.142-0.313-0.312V4.3c0-0.173,0.14-0.313,0.313-0.313h16.792c0.172,0,0.312,0.14,0.312,0.313L24.376,26.855L24.376,26.855z");

pad.transform("t200,200");
pad.scale(10);
pad.attr({fill:'url("http://www.zingerbug.com/Backgrounds/background_images/gray_diagonal_stripes_seamless_background_pattern.jpg")'});

The image gets stretched because it is most probably large or has a big resolution. To make it close to original, you need to resize your image according to your path size, then use it as a background. I think that should fix your problem.