Graphael documentation, recent samples, etc

Question

I'm working on an implementation of a live-updating line graph using gRaphael which is a graphic extension of the Raphael SVG library.

I can't seem to find any examples of somebody doing this as a near-realtime updating project, which is fine. I'm assuming there's a way to call refresh on the graph with a new data set (without the need to re-initialize a whole new Raphael object each time!), but therein lies the problem:

There doesn't seem to be accurate documentation anywhere. I discovered this StackOverflow question: Graphael line 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 examples provided, I ran into some errors:

1. the syntax r.g.linechart() used in the examples was no longer valid (where r is the Raphael object and I assume g is a gRaphael property within). Somewhere along the way somebody must have switched to properly extending the Raphael object so that r.linechart() worked.

2. The parameters passed into linechart() were incorrect, resulting in an undefined error again. If I passed in only the #x, #y, width, height, arrayX, arrayY parameters and dropped the chart labels, etc., I could render a plain line. But of course I need to be able to label my axes and provide a legend, etc.

Needless to say, a library without an API document isn't going to do anybody much good, but there are stalwarts out there who are willing to learn based strictly on reading the code itself. I'm not one of those. I would probably do OK with a well-commented example, preferably using live updates.

So I guess the questions are:

1. Does anybody know better documentation than the one I linked to?
2. Can someone point me to examples, documentation failing?
3. Can someone provide a proper itemization of the parameters that linechart() will accept?

Thanks!

For the record, here's how far I am so far:

var r = Raphael('line-chart');

// did NOT work -->
var linechart = r.g.linechart(
  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

I am still trying to learn Raphael myself, but here are the primary resources I have been using: http://g.raphaeljs.com/reference.html and the same sans the "g."

here is a fiddle that pretty much pulls off an updating linechart with knockout/gRaphael, prob not the best solution, but its an idea: http://jsfiddle.net/kcar/mHG2q/

Just a note, I didn't start learning it until I combined reading with trial/error (with a lot of error), so play with the fiddle and see how things change.

but the basic code for it is like:

//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

Answer 2

There is a fork in GitHub that is working on the documentation and examples.

You will need to download the code and view it from you computer. It is a work in progress but it's more than you can find in the official g.Raphael page.

I also found this small post with some examples.