Question

I am using gRaphael JS lib to draw line chart.
and have some problem with haverColumn function.
this is my simplified hoverColumn function.

var line = raphael.g.linechart(50, 20, 650, 120, xAry, yAry, options).hoverColumn(function (){
    ...
    console.log(this.x+","+this.y);
    ....
}

When mouse is hovering on the chart,
hoverColumn function is called, and log function is executed.
But, some area doesn’t call hoverColumn function.

So, I did debugging using firebug, I found the reason.
There was some big rect area on the line chart,
when mouse is on the area, hoverColumn doesn’t be call despite
mouse is on the chart’s column.

here is a captured image to help understanding.
fire bug, and the rect.

when I remove the rect manually using firebug,
hoverColumn function works well~ -_-;

the area code is made by gRaphael-js automatically.

so, is there any way to solve this problem?
any idea please~

Answer 1

I found the solution at last(takes 1 day hacking…=_=;).
the problem is in g.line.js, graphael js library.

in the source code,
there is a createColumns function like this,

function createColumns(f) {
        // unite Xs together
        var Xs = [];
        for (var i = 0, ii = valuesx.length; i < ii; i++) {
            Xs = Xs.concat(valuesx[i]);
        }
        Xs.sort();
        ....
        ...
        ..
}

The problem is the sorting function.
Xs.sort() sort the x values, but the function returns sorted array with errors.
so, if the input array is,

valuesx = [0.05076044713698533, 9.579202857778233, 10.93181619059174];
valuesx.sort();

the result is

[0.05076044713698533, 10.93181619059174, 9.579202857778233]
not
[0.05076044713698533, 9.579202857778233, 10.93181619059174]

as a result, the column was broken~

so, I changed the sort function, Xs.sort() like this:

Xs.sort(function(a, b){
            return a - b;
        });

works well~ ^^;
Hope this helps~