sencha chart on a hbox

Question

how can i add sencha chart to multiple hboxes. i am new to sencha touch.i need to create multiple hbox dynamically and add differenet chart into. i just made a hbox layout and a chart component. but dont know how to add chart to hbox. mycode is

hbox code

var pnl = new Ext.Panel({
        width: 400,
        height: 300,
        fullscreen: true,
        layout: 'hbox',
        items: [{
            width : 200,
            height: 200,
            html: 'First',
            bodyStyle: 'background:grey;'
        },{
            width: 200,
            height: 200,
            html: 'Second',
            bodyStyle: 'background:blue;'
        },{
            width: 200,
            height: 200,
            html: 'Third',
            bodyStyle: 'background:yellow;'
        }]
    });

chart code

new Ext.chart.Chart({
                renderTo: Ext.getBody(),
                width: 500,
                height: 300,
                animate: true,
                store: store,
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['value'],
                    label: {
                    //renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Quanitity',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['product'],
                    title: 'Products'
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(storeItem.get('product') + ': ' + storeItem.get('value') + ' views');
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        field: 'data1',
                        //renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                        'text-anchor': 'middle'
                    },
                    xField: 'name',
                    yField: ['value']
                }]
            });

looking for help

score 0 · Answer 1 · answered Feb 27 '12 at 05:48

for example you can specify like this

First create one parent panel like

 var Panel = new Ext.Panel({
                                      layout: 'hbox',
                                     dockedItems: {
                                                        dock: 'top',
                                                        xtype: 'toolbar',
                                                        title: 'Line & Pie chart',
                                                        items: [ ]
                                                         },
                                   items: [ LineChartPanel,PiePanel,]
                         });

and now create separate panels for line and pie charts

var LineChartPanel= new Ext.chart.Chart({
 // your required stuff for the line chart
});

var PiePanel= new Ext.chart.Chart({

// your required stuff for the Pie chart
});

sencha chart on a hbox

1 Answers1