SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Change gRaphael Linechart .hoverColumn()

    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:
    Code:
    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!

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    .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([{fill: this.symbols[i].attr("fill"), stroke: 'none'}, {fill: "#fff"}]));
        }
    }, function(){
        //removes tags
        this.tags && this.tags.remove();
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •