Chart.js

qx.Class.define("integweb.widget.Chart", {

    extend  : qx.ui.core.Widget,

    construct : function(height, width, data, chart) {

        this.base(arguments);

        this._chart  = chart;
        this._data   = data;
        this._height = height;
        this._width  = width;

        this._createChart();

    },

    members : {

        _chart : null,
        _height : null,
        _width : null,
        _data : null,
        _hash : null,

        _createChart : function() {

            var hash = this._hash = "chart" + this.toHashCode();


            var canvas = new qx.html.Element("div", { minWidth : '100%', minHeight : '100%' }, { id: hash });

            if ( this._height )
                this.setHeight(this._height);
            else
                this.setWidth(this._width);

            this.addListener("appear", function() {

                if ( this._data != null)
                    this._chart(this._data, hash);
            });

            this.addListener("resize", function(e) {

                var that = this;

                if ( this._data != null) {

                    var x = document.getElementById(hash);
                    x.style.width = e.getData().width + 'px';
                    x.style.height = e.getData().height + 'px';

                    setTimeout(function(){
                        that._chart(that._data, hash);
                    }, 100);

                }

            });

            this.getContentElement().add(canvas);

        },

        draw(data) {
            this._data = data;
            this._chart(this._data, this._hash);
        }

    }

});