CODEWITHSUNDEEP
twitter-bootstrapmorris.js
Dave
Dave

Reputation: 666

morris js donut doesnt render in bootstrap tab

I'm trying do display a morrisjs chart within a bootstrap tabbed page. I'm using the sample chart here: Donut Chart

When I place the <div id="example-donut"> outside of the bootstrap tabs, everything works. Once I place it inside a bootstrap tab

<div class="tabbable" id="tabs-936589">
  <div class="tab-content">
    <div class="tab-pane" id="mycharts">
      <div id="example-donut"></div>
    </div>
  </div>
</div>

I get the following error:

Error: Invalid value for <text> attribute transform="matrix(NaN,NaN,NaN,NaN,0,0)"

If I place it in the active tab, this works without any issues.

Anyone else hitting this same issue ?

Upvotes: 3

Views: 2063

Answers (1)

ssk
ssk

Reputation: 317

This worked for me:

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;
};

Upvotes: 3

Related Questions