How to Change gRaphael Linechart .hoverColumn()

JavaScript
1

I’m using the gRaphael linechart plugin, and I would like to be able to change my hover tags to hover only for individual lines, not all lines at the same time.

The reason is because I have an invisible line that I don’t want users to see, but it’s set to a value of 0 so the y axis always starts at 0. If I set the tags to appear upon hover, I also see the tags for the invisible line. I want to set it so that the invisible line doesn’t have any hover tags.

Here’s what I have:


var lines = r.g.linechart(
    40, //x start
    0, //y start
    chartWidth, //width
    300, //height of chart in pixels
    datesCount, //amount of x coordinates
    [invisibleLine, locationViews, locationClicks], //array of y coordinates
    {//options
        nostroke: false,
        axis: "0 0 1 1",
        axisxstep: rows-1,//how many x interval labels to render
        symbol: "o",
        colors: ["transparent", "#BE6228", "#33312F", "#66625E", "#BFBDBB", "#E79645"]
    }).hoverColumn(function(){
        //adds hover tags
        this.tags = r.set();
        for (var i = 0, ii = this.y.length; i < ii; i++) {
            this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 175, 0).insertBefore(this).attr([{fill: "#fff"}, {fill: this.symbols[i].attr("fill")}]));
        }
    }, function () {
        //removes hover tags
        this.tags && this.tags.remove();
    }
);

Thanks for any help! :slight_smile:

2

I just solved my problem. I didn’t solve it exactly how I thought I would, but it works. I made the tags use the same fill color as the line they represented and removed the stroke (border of the tags).

Here’s how:


.hoverColumn(function(){
    //adds tags
    this.tags = r.set();
    for (var i = 0, ii = this.y.length; i < ii; i++){
        this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 175, 0).insertBefore(this).attr([{[COLOR="#0000FF"][B]fill: this.symbols[i].attr("fill"), stroke: 'none'[/B][/COLOR]}, {[COLOR="#0000FF"][B]fill: "#fff"[/B][/COLOR]}]));
    }
}, function(){
    //removes tags
    this.tags && this.tags.remove();
});