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

Question

Because of the very poorly documented raphael JS library, I beg for collective wisdom.

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

something like: var lineChart = rglinechart (10, 10, 300, 20, 15, 35, 30 ,: true, "colors": ["# 44F", "# CCC"], nostroke: true});

I would like to change one of the lines to set fill = clear and stroke = color

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

for extra credit, how can I set the fill lines on the gradient?

thanks!

Answer 1

I used Firebug and console.log () to list the attributes in a string:

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

I clicked on the log line to see the details, for example:

 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 that you need code like this:

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

Hope this helps!

Answer 2

Here are some things I discovered as a result of trial and error. Will be updated when I learn more. As you say, it would be much better if gRaphael really had the documentation, like a real project ... although it seems that it has recently been submitted, so I hope everything changes.

• To access the strings line chart: lineChart.lines
  • Access to a set of path objects, one for each line
• To access character character points (or an empty array if not): lineChart.symbols
  • Access to a set of sets, each set contains characters for one line
• To access the lines : lineChart.axis
  • Access to a set of paths, one for each axis. It seems that each axis is one path with ticks, like deviations on the path. To access a single axis, they are in the same order as how you set which axis is visible (top, right, bottom, left) , but there will only be as much as it is set. Therefore, if you have lower X and left Y ( {axis: "0 0 1 1"} ), then axis[0] will be the X axis[1] and axis[1] Y. If you have left, lower, and right, right there will be axis[0] , bottom axis[1] , left axis[2] , etc.
• To access axis text labels: lineChart.axis[n].text (where n is the number, as indicated above, of the desired axis)
  • Access to the Raphael Text Object Set. In order to make the same change in the centerlines and text, it seems you need to access both settings separately.

Answer 3

Kenny Shen advises

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

Answer 4

I did not use Raphäel, but you should be able to set the fill to be transparent and set the color for the stroke. If the SVG element has an identifier or class, you should set this via CSS:

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

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

You have nostroke: true in the code above. I'm not sure this will stop working as you expected.

To set the gradient (at least in real SVG), you set the fill attribute value to url, pointing to an identifier. Then you create a linearGradient element with this identifier. See this example on how to write gradients. You can also set the stroke value for the gradient in SVG.