error from donut resize handler still bound after dom is removed

[heyGalen]

I have a donut chart with resize set to true. after some actions, it is cleared from the dom. after this, resizing the browser will trigger a series of errors in the console:
Error: Invalid value for attribute transform="matrix(NaN,NaN,NaN,NaN,0,0)"

for a temporary solution I have been overriding the resize handler, adding a line to see if the element exists:

        Morris.Donut.prototype.resizeHandler = function() {
            if(document.getElementById(this.el[0].id)){
                this.timeoutId = null;
                this.raphael.setSize(this.el.width(), this.el.height());
                return this.redraw();
            }
        };

There are probably better ways to remove the handler itself, but I am not too familiar with the inner workings of Morris to implement.

[oesmith]

Yeah, there's unfortunately no unbinding on the resize handler currently. I'll see what I can do to fix this..

[HelloGravity]

Thank you for your solution heyGalen !
I am having the same error :
Error: Invalid value for attribute transform="matrix(NaN,NaN,NaN,NaN,0,0)"
And I am also not familiar with the source code of Morris.
Although your solution did not work for me, I changed it a little, and now everything works for me, thanks.

Morris.Donut.prototype.resizeHandler = function () {
    this.timeoutId = null;
    if (this.el && this.el.width() > 0 && this.el.height() > 0) {
        this.raphael.setSize(this.el.width(), this.el.height());
        return this.redraw();
    }
    else return null;
};
Morris.Donut.prototype.setData = function (data) {
    var row;
    this.data = data;
    this.values = (function () {
        var _i, _len, _ref, _results;
        _ref = this.data;
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            row = _ref[_i];
            _results.push(parseFloat(row.value));
        }
        return _results;
    }).call(this);
    if (this.el && this.el.width() > 0 && this.el.height() > 0) {
        return this.redraw();
    }
    else return null;
};

BTW, morris.js is awesome :)

[adinapoli]

Hello there, for me the error was elsewhere, as part of the "setLabels" handler. The fix was to handle the case where "text1" or "text2" were NaN:

Morris.Donut.prototype.setLabels = function(label1, label2) {
    var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale;
    inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3;
    maxWidth = 1.8 * inner;
    maxHeightTop = inner / 2;
    maxHeightBottom = inner / 3;
    this.text1.attr({
        text: label1,
        transform: ''
    });
    text1bbox = this.text1.getBBox();
    text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height);
    if (isNaN(text1scale) || text1scale == "-Infinity") {
        text1scale = "0.0";
    }
    this.text1.attr({
        transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height)
    });
    this.text2.attr({
        text: label2,
        transform: ''
    });
    text2bbox = this.text2.getBBox();
    text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height);
    if (isNaN(text2scale) || text2scale == "-Infinity") {
        text2scale = "0.0";
    }
    var t = {
        transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y
    };
    return this.text2.attr(t);
};

[Bradeskojest]

Is there any plan for this to be fixed officially? I am having this issue as well.

[mariopacio]

Hello.. i waiting for fix too. =)

[icacho-dev]

@HelloGravity solution worked for me! Hope to be integrated.

[tahito]

good morning and asked whether organized this problem , I recently this is emerging as a aplicion and would like to know if you have sollucion thank you very much...

[ftopan80]

@HelloGravity solution also worked for me

[khaled4vokalz]

@heyGalen Nice solution... Worked for me even if it may be Temporary.

[guy032]

In my opinion this is really necessary:

Morris.Donut.prototype.resizeHandler = function () {
    if ($(this.el).is(":visible")) {
        this.raphael.setSize(this.el.width(), this.el.height());
        return this.redraw();
    }
    else return null;
};

[mdarim]

@HelloGravity solution also worked for me, thank you a lot

[Miteshvaghela]

@HelloGravity Works for me too
thanks my friend

[GustavoMantuan]

This worked for me, @adinapoli and @guy032 thank you very much.

[ingaropolous]

Unfortunadly not worw for me.