score:1

Accepted answer

After you have looped through both data sets, i = 2 and k = 1. So the mouse events are always trying to use i=2 and k=1 to access the data point, which of course is out of bounds. See this fiddle: http://jsfiddle.net/bLvfS/1/

for (var i = 0; i < chartObj.series.length; i++) {
    for (var k = 0; k < chartObj.series[i].data.length; k++) {
        var onmouseover = function(u, j) {
            return function() {chartObj.series[u].data[j].setState('hover');};
        }
        var onmouseout = function(u, j) {
            return function() {chartObj.series[u].data[j].setState();};
        }
        chartObj.series[i].data[k].dataLabel.on("mouseover", onmouseover(i,k));
        chartObj.series[i].data[k].dataLabel.on("mouseout", onmouseout(i,k));
    }
}

I've added functions that get passed the current i,k pair and return the actual function you want to run on the mouse events. Maybe someone has a better solution... but it seems to work.

score:1

Problem is with closures, see working fiddle: http://jsfiddle.net/Fusher/bLvfS/2/

        for (var i = 0; i < chartObj.series.length; i++) {
            for (var k = 0; k < chartObj.series[i].data.length; k++) {
                (function(i,k){
                    chartObj.series[i].data[k].dataLabel.on("mouseover", function () {
                        chartObj.series[i].data[k].setState('hover');
                    });
                    chartObj.series[i].data[k].dataLabel.on("mouseout", function () {
                        chartObj.series[i].data[k].setState();
                    });
                })(i,k);
            }
        }

Related Articles