[SOLVED] Render a Chart within a Form

[melvig]

Hi,

Trying to render a chart within a form but doing something wrong but cannot quite see what.

You should be able to see the rendering (or not) from the attached screenshot.

Ext.define('ManageWork.view.ChartForm', {
    alias: 'widget.chartform',
    border: false,
    extend: 'WMS.base.Form',
    layout: {
        align: 'stretch',
        pack: 'start',
        type: 'vbox'
    },
    padding: '15 15 3 15',


    initComponent: function() {
        Ext.apply(this,{
            items : this.buildItems()
        });
        this.callParent(arguments);
    },


    buildItems: function() {
        return [{
            xtype: 'container',
            flex: 1,
            itemId: 'charts',
            items: [{
                itemId: 'TaskChart',
                xtype: 'taskchart'
            }]
        }];
    }
});

Ext.define('ManageWork.view.TaskChart',{
    extend: 'Ext.container.Container',
    alias: 'widget.taskchart',
    layout: {
        type: 'vbox',
        pack: 'start',
        align: 'stretch'
    },


    initComponent : function(){


        Ext.apply(this,{
            items: this.buildItems()
        });


        // Set up subscriptions;
//        this.subscribeTo = {
//            scope : this,
//            locationusageclick : this.onLocationUsageClick
//        };


        this.callParent(arguments);
    },


    buildItems : function(){
        return [{
            xtype: 'chart',
            itemId: 'content',
            flex: 1,
            animate: true,
            store: this.buildStore(),
            axes: this.buildAxes(),
            series: this.buildSeries()
        }];
    },


    buildAxes: function(){
        return [{
            title: 'Temperature',
            type: 'Numeric',
            position: 'left',
            fields: ['temperature'],
            minimum: 0,
            maximum: 100
        },{
            title: 'Time',
            type: 'Category',
            position: 'bottom',
            fields: ['date']
        }];
    },


    buildSeries: function(){
        return [{
            type: 'column',
            axis: 'left',
            highlight: true,
//            tips: {
//                trackMouse: true,
//                width: 140,
//                height: 28,
//                renderer: function(storeItem, item) {
//                    this.setTitle(storeItem.get('LCTD023') + ': ' + storeItem.get('SUM'));
//                }
//            },
//            label: {
//                display: 'insideEnd',
//                'text-anchor': 'middle',
//                field: 'data',
//                renderer: Ext.util.Format.numberRenderer('0'),
//                orientation: 'vertical',
//                color: '#333'
//            },
            xField: 'date',
            yField: 'temperature'
        }];
    },


    buildStore: function(){
        return Ext.create('Ext.data.Store',{
            fields: ['temperature', 'date'],
            data: [
                {temperature: 58, date: '8'},
                {temperature: 63, date: '9'},
                {temperature: 73, date: '10'},
                {temperature: 78, date: '11'},
                {temperature: 81, date: '12'}
            ]
        });
    }


//    buildStore : function(){
//        return Ext.create('Ext.data.Store',{
//            fields : ['SUM','LCTP021',{
//                name : 'LCTD023',
//                convert : Valence.util.decodeUTF16
//            }],
//            autoLoad : true,
//            proxy : {
//                url : '/valence/vvcall.pgm',
//                type : 'ajax',
//                reader : {
//                    type : 'json',
//                    root : 'types'
//                },
//                extraParams : {
//                    pgm : 'deleteme2'
//                }
//            }
//        });
//    }


//    onLocationUsageClick : function(rec){
//        this.updateTitle('Location Type - ' + rec.get('MCDS921'));
//        this.down('chart').store.load({
//            params : {
//                LCCF021 : rec.get('LCCF021')
//            }
//        });
//    }


});

Another pair of eyes on this gratefully accepted.

Thanks in advance

[sean.lanktree]

Looks like a layout issue:

buildItems: function() {
    return [{
        xtype: 'container',
        flex: 1,
        itemId: 'charts',
        items: [{
            itemId: 'TaskChart',
            xtype: 'taskchart'
        }]
    }];
}

In this case, there is no need to wrap "taskchart" within a container (over nesting). Simple return "taskchart" along with a flex. If you need to keep the container, then assign your container a layout and add the accompanying necessary propert (flex, region, etc..) to the taskchart.

[melvig]

That solved it - thanks Sean