gRaphael Library - linechart with multiple lines, individual tooltips

Question

I have a linechart here: http://jsbin.com/ugexag/1

You can see in the jsbin, when you hover over one 'column' the data for each line appears in a tooltip via the hoverColumn() function. I would love to find a way to get the tooltip to appear only when an individual data point is hovered over. I don't see anything about this in the gRaphael docs.

Answer 1

There's kind of an example of this in the bottom right quadrant of the linechart demo. I'l look at it later today and update here with what I find. I suspect hoverColumn isn't used, or is used creatively, because when I used it, the y I got for the hover event was the average of all y values on the x column.

Update: After looking at it, I found what you found, the trick was that only one of the demo columns lined up in both lines. If you're charting something per year, your year column is definitely going to recur on all lines. So this isn't too handy.

What I tested was (in a console at the linechart demo linked):

var r = Raphael("holder");
var lines = r.linechart(330,250,300,220,[
   [ 1, 2, 3, 4, 5, 6, 7],[ 2, 3, 4, 5, 6, 7, 8],[9,10]
  ],[
   [10,10,10,10,10,10,10],[20,20,20,20,20,20,20],[5,25]
  ],{nostroke:false, axis:"0 0 1 1", symbol: "circle", smooth: true});
lines.hoverColumn(function(){
    this.tags=r.set();
    for(var i=0;i<this.y.length;i++){
      this.tags.push(r.tag(this.x,this.y[i],this.values[i],160,10).insertBefore(this));
    }
  }, function(){
    this.tags && this.tags.remove();
  });

Which at least demonstrates the problem. The problem does indeed lie with the hoverColumn and the documentation. It isn't mentioned that hover actually has mostly the same this information passed to it. So you can rewrite the last statement as:

lines.hover(function({
  this.tags=r.set();
  this.tags.push(r.tag(this.x,this.y,this.value,160,10).insertBefore(this));
 }, function(){
  this.tags && this.tags.remove();
 });

Notice that value is now singular and takes no index, nor does y.
Lastly you can further simplify it by removing the use of a set():

lines.hover(function(){
  this.tag = r.tag(this.x,this.y,this.value,160,10).insertBefore(this);
 }, function(){
  this.tag && this.tag.remove();
 });