dojo charting - problem with onmousemove over chart plotArea

Question

I'm trying to build a chart which draws a vertical line to the X axis under the cursor. Using this as a guideline:

http://dojo-toolkit.33424.n3.nabble.com/Charting-events-td40659.html

I am using the following code to catch 'mouseout' & 'mousemove' for the chart plot area (excludes the chart margins and labels)

        chart = new dojox.charting.Chart2D("rating");
        chart.addPlot("default", {
            type: "Bubble"
        });

        chart.addPlot("grid", {
            type: "Grid",
            hMinorLines: true
        });

        var plotArea = chart.surface.rawNode.children[1];
        dojo.connect(plotArea, "onmousemove", this, this.showRatingHighlight);
        dojo.connect(plotArea, "onmouseout", this, this.hideRatingHighlight);

Generally, it works as expected. however I also have a grid drawn on the chart, and whenever the mouse passes over the grid lines, I get a "mouseout" event. I also lose the mousemove event when the mouse passes over a marker with a toolTip/highlight action in place.

Q: How can I catch mousemove/mousemove over the 'plotArea' without losing it over the gridlines or plot Markers?

Q: Is there a better way to get the 'plotArea' of the chart for calculating offsets?

Answer 1

A1: Overlay a transparent div over a chart and catch events using it. Caveat — most probably it will block events coming to markers and grid lines.

BTW, your example assumes that you use only SVG or VML renderers. More general way to catch events:

var h1 = surface.connect("onmouseout", f1);
var h2 = shape.connect("onmouseout", f2);
// ...
shape.disconnect(h2);
surface.disconnect(h1);

A2: After a chart was rendered (and all geometry calculated), you can extract dimensions like this:

chart.dim; // {width, height} --- dimensions of the chart
chart.offsets; // {l, b, r, t} --- offsets from dimensions
var plotArea = {
  // in pixels relative to chart's top-left corner
  x: chart.offsets.l,
  y: chart.offsets.t,
  width:  chart.dim.width  - chart.offsets.l - chart.offsets.r,
  height: chart.dim.height - chart.offsets.t - chart.offsets.b
};

Use dojo.position() or a similar function to get the position of your chart on the page, if you need absolute page-level coordinates.