Search code examples
graphaellinegraph

Issue with hoverColumn and tootip display on gRaphael?


I can get the line graph to be displayed using gRaphael, but I have a problem with tooltips. Tooltip is displayed only for certain columns, not all the columns. I don't know if it's a problem with too much data, but 207 columns shouldn't be too bad. The canvas size is 900x300. The following is the sample code.... Any help would be much appreciated!

Thanks,

var r = Raphael('lgraph');

//Some code here to prep dates, x, prep ccp, ctr, searchp arrays

var linec = r.linechart(10,10,900,300,x,[ccp,ctr,searchp],
                        { nostroke: false, 
                          axis: "0 0 1 1", 
                          symbol: "circle",
                          axisxlabels: dates, 
                          axisxtype: " ",
                          smooth: true })
linec.hoverColumn(function () {
  this.popups = r.set();
  for (var i = 0, ii = this.y.length; i < ii; i++) {
    this.popups.push(r.popup(this.x, this.y[i], this.values[i]).insertBefore(this));
  }
}, function () {
  this.popups && this.popups.remove();
});
linec.symbols.attr({ r: 3 });

Solution

  • Just replace ak.sort() in g.line-min.js with ak.sort(function(a,b) {return a-b}); or Xs.sort(); in g.line.js (line 185) with Xs.sort(function(a,b) {return a-b});

    Found the solution here https://github.com/DmitryBaranovskiy/g.raphael/issues/19#issuecomment-3766164