Mouseover not firing with multiple dotted-lines chart #31

Closed
vladoa opened this Issue Feb 4, 2013 · 4 comments

Comments

Projects
None yet
2 participants

vladoa commented Feb 4, 2013

The charts are awesome. However I cannot figure out why the mouseover event is not firing when there are multiple lines in the chart. For example, on the red and green dotted-line, when I point the mouse cursor at the middle of the chart the tooltip is not appearing. It is only appearing on the blue line's dots and on the last dot of the other lines.

no tooltip on mouseover

My code is:

var opts = {
    paddingLeft : 50,
    paddingTop : 20,
    paddingRight : 10,
    axisPaddingLeft : 25,
    tickHintX: 9, // How many ticks to show horizontally

    dataFormatX : function(x) {

        // This turns converts the timestamps coming from
        // ajax.php into a proper JavaScript Date object

        return Date.create(x);
    },

    tickFormatX : function(x) {

        // Provide formatting for the x-axis tick labels.
        // This uses sugar's format method of the date object. 

        return x.format('{MM}/{dd}');
    },

    "mouseover": function (d, i) {
        var pos = $(this).offset();

        tt.text( d.provider_name + ': ' + d.x.format('{Month} {ord} {year}') + ': ' + d.y).css({

            top: topOffset + pos.top,
            left: pos.left

        }).show();
    },

    "mouseout": function (x) {
        tt.hide();
    }
};

// Create a new xChart instance, passing the type
// of chart a data set and the options object

chart = new xChart('line-dotted', data, '#chart' , opts);

vladoa commented Feb 10, 2013

It turned out that the "fill" elements from above lines represented layers over the lower lines and were preventing the mouseover event to fire. My workaround was to comment out the line in the source code for the fills:

fills.enter().append("path").attr("class","fill").style("opacity",0).attr("d",area.y0(y));

Now there are no fills but at least the tooltips are working properly.
This is only a workaround.

Contributor

paularmstrong commented Feb 10, 2013

I recommend 1 of the 2 following CSS solutions instead of changing any source JS code:

  1. Make the fill not appear: .line .fill { display: none; }
  2. Disable pointer events: .line .fill { pointer-events: none; }

vladoa commented Feb 12, 2013

Agreed. I spent a lot of time figuring out what is preventing the mouseover event so altering the js code was the first thing that gave me the results I needed. Anyway what you propose is a better way to do it. I will close this issue and hope that someone else will find it useful too. Keep on with the good work.

vladoa closed this Feb 12, 2013

Contributor

paularmstrong commented Feb 12, 2013

  1. Disable pointer events: .line .fill { pointer-events: none; }

I think this should be made as a default in the provided CSS/LESS.

paularmstrong reopened this Feb 12, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment