Graphael documentation, latest samples, etc.

Question

I am working on implementing a line graph with an update using gRaphael , which is a graphical extension of the Raphael SVG Library.

It seems I can not find examples of how someone does this as an update project in almost real time, and this is normal. I suppose there is a way to call refresh on a chart with a new dataset (without having to reinitialize the entire new Raphael object every time!), But this is the problem:

There seems to be no accurate documentation. I discovered this StackOverflow question: the Grafal chart , which in turn led to this documentation project: https://github.com/kennyshen/g.raphael/tree/master/docs , but the results were cold. Using the above examples, I came across some errors:

• the rglinechart() syntax used in the examples is no longer valid (where r is the Raphael object, and I assume that g is a gRaphael property inside). Somewhere along the way, someone had to switch to the correct extension of the Raphael object for r.linechart() work.

• The parameters passed to linechart() were incorrect, resulting in an undefined error. If I only passed the parameters #x, #y, width, height, arrayX, arrayY and reset the chart labels, etc., I could make a simple line. But, of course, I need to be able to designate my axes and give a legend, etc.

Needless to say, a library without an API document is not going to do anyone much good, but there are supporters who want to learn based solely on reading the code itself. I'm not one of those. I would probably do OK with a well-commented example, preferably with live updates.

So, I think the questions are:

• Does anyone know a better documentation than the one I'm linked to?
• Can someone point me to examples, the documentation failed?
• Can someone provide the proper granularity of the parameters that linechart() will accept?

Thanks!

For the record here, as far as I am still:

 var r = Raphael('line-chart'); // did NOT work --> var linechart = rglinechart( 10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"} ); // worked in a limited way, rendering a plain line with no visible labels/graph --> var linechart = r.linechart( 10,10,300,220,[1,2,3,4,5],[10,20,15,35,30] ); 

Answer 1

GitHub has a fork working on documentation and examples.

You will need to download the code and view it from your computer. This work is ongoing, but it is more than you can find on the official g.Raphael page.

I also found this little post with some examples.

Answer 2

I'm still trying to learn Raphael himself, but here are the main resources I used: http://g.raphaeljs.com/reference.html and the same thing without the "g".

here is a fiddle that pretty much removes the updated lineup with the / gRaphael knockout, not the best solution, but its idea: http://jsfiddle.net/kcar/mHG2q/

Just notice, I did not start to study it until I combined reading with trial / error (with a big error), so play with the violin and see how everything changes.

but the base code for it is similar:

 //constructor var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) .hoverColumn(function () { //this function sets the hover tag effect this.tags = r.set(); for (var i = 0, ii = this.y.length; i < ii; i++) { this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); } }, function () { this.tags && this.tags.remove(); }); lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbols