CODEWITHSUNDEEP
svgraphaellinechart
breuklyner
breuklyner

Reputation: 117

How can you access and style an individual line in G. Raphael line chart

Due to the very poorly documented raphael JS library, I beseech the collective wisdom.

I have a working g. raphael multi-line line chart (similar to http://g.raphaeljs.com/linechart.html)

something like: var lineChart = r.g.linechart(10,10,300,220,[1,2,3,4,5],[[10,20,15,35,30],[5,10,5,15,20]], {shade:true, "colors":["#44F","#CCC"], nostroke:true});

I'd like to change one of the lines to set the fill = clear and stroke = a color

I was told something like this would work, but no luck -any suggestions? lineChart.lines[0].attr({stroke: "#000"}),

for extra credit, how can I set the fills of a line to a gradient?

thanks!

Upvotes: 4

Views: 2013

Answers (4)

David Storey
David Storey

Reputation: 30394

I've not used Raphäel, but you should be able to set the fill to transparent and set a colour to the stroke. If the SVG element has an ID or class then you should be able to set this via CSS:

#id {
  stroke: colour;
  fill: none;
}

Otherwise, you could use path:nth-of-type() to select the element, or select the element like you would any other in JS and set the stroke and fill attributes.

You have nostroke: true in the code above. I'm not sure if that is stopping it from working as you expected.

To set a gradient (at least in real SVG) you set the value of the fill attribute to a url, pointing to an id. You then create a linearGradient element with that ID. See this example of how to write gradients. You can also set the value of a stroke to a gradient too in SVG.

Upvotes: 0

breuklyner
breuklyner

Reputation: 117

kenny shen advises

lineChart.lines[0].attr({"stroke": "#000"})

Upvotes: 1

Sam Watkins
Sam Watkins

Reputation: 8309

I used Firebug and console.log() to list the attributes on a line:

console.log(chart.lines[0].attr());

I clicked on the log line to see the details, like this:

fill: "none"
path: [ ... ]
stroke: "#ff0000"
stroke-dasharray: ""
stroke-linecap: "round"
stroke-linejoin: "round"
stroke-width: 2
transform: []

For me, I wanted to change the stroke-width. This code works:

chart.lines[0].attr({'stroke-width': 8});

The line-width attribute is listed in the excellent RaphaelJS documentation.

For your problem, I expect you need code like this:

chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});

I hope this helps!

Upvotes: 5

user56reinstatemonica8
user56reinstatemonica8

Reputation: 34074

Here are some things I found by trial and error. Will update as I discover more. As you say, it'd be so much better if gRaphael actually had documentation like a real project... although it seems it's recently been handed over so hopefully things will change.

  • To access the lines of a line chart: lineChart.lines
    • Accesses a set of path objects, one for each line
  • To access the symbols marking data points (or empty array if none): lineChart.symbols
    • Accesses a set of sets, each set housing the symbols for one line
  • To access the axis lines: lineChart.axis
    • Accesses a set of paths, one for each axis line. Looks like each axis is one path with the ticks as diversions on the path. To access an individual axis, they are in the same order as how you set which axis are visible (top, right, bottom, left), but there will only be as many as are set. So if you have a bottom X and a left Y ({axis: "0 0 1 1"}), then axis[0] will be the X axis and axis[1] the Y. If you have a left, bottom, and right, the right will be axis[0],bottom axis[1], left axis[2], etc.
  • To access the axis text labels: lineChart.axis[n].text (where n is the number, as above, of the axis you want)
    • Accesses a set of Raphael text objects. To do the same change to the axis lines and text, it seems you need to access both sets seperately.

Upvotes: 2

Related Questions