Multiple Charts on a single panel overlap.

[shivam.mishra9]

Hi,
I am creating a panel which should display multiple charts, using hbox layout of the panel. But however the two charts (line and gauge) are overlapping (i.e second item is overlapping first). However i figured out that to add multiple charts, each chart should be an item of a panel which in turn should be the item(child) of my parent panel. So if i further want to add say 4 charts, it would be required to first create a panel with that chart and add it to items of my child panel(with a vbox or hbox layout) of the parent panel. (hope i dint confuse u ).
here is the code.

str1 = Ext.create('with_chart.store.store1',{
    //fields:['value1','value2','value3'],
    //autoLoad:true,
    data:[
        {value1:10 , value2:'a',value3:45},
        {value1:20 , value2:'b',value3:52},
        {value1:30 , value2:'c',value3:6},
        {value1:20 , value2:'d',value3:89},
    ],
});
var chart1={xtype:'chart',
flex:1,
store:str1,
animate:true,
axes:[{
    type:'numeric',
    position:'left',
    fields:['value1'],
    title:'value1',
    minimum:0,    
    maximum:100
},
{
    type:'category',
    position:'bottom',
    fields:['value2'],
    title:'value2'
},
{
    type:'numeric',
    position:'left',
    fields:['value3'],
    title:'value3',
    minimum:0,    
    maximum:100
}],    
series:[{
        type:'line',
        xField:'value2',
        yField:'value1'
},
{
    type:'line',
    xField:'value2',
    yField:'value3'
}]
};
var chart2={
    xtype:'chart',
    flex:1,
    store:str1,
    animate:true,
    axes: [
                    {
                        type: 'gauge',
                        position: 'gauge',
                        minimum: 0,
                        maximum: 100,
                        steps: 10,
                        margin: 7
                    }
                ],
                series: [
                    {
                        type: 'gauge',
                        field: 'value3',
                        //donut: 80,
                        colorSet: ['#3AA8CB', '#ddd']
                    }
                ]
    
};




Ext.define("with_chart.view.Main", {
    extend: 'Ext.Carousel',
    requires: ['Ext.TitleBar','Ext.chart.Chart'],
    id:'tpanel',
    config: {
        tabBarPosition: 'bottom',
        
        items: [
             {
                styleHtmlContent: true,
                scrollable: true,


                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                }],
                html: 'Welcome'
            },
//Code for adding charts
            {
                     xtype:'panel',
                    layout:'hbox',
                    defaults: {
                          insetPadding: 25,
                          flex:1
                    },
                    items:[
                    {
                        xtype:'panel',
                        layout:'vbox',
                        defaults:{flex:1},
                        items:[chart1,chart2]//it overlaps here, Solution:items:[chart1,{xtype:'panel',layout:'fit',items:[chart2]}]
                    },
                    {
                        xtype:'panel',
                        layout:{
                            type:'fit',//here if i specify type:vbox, my gauge chart disappears giving me a white screen
                            align:'center',
                            pack:'center'
                        },
                        items:[chart2]
                    }]
    


            }
]
}
});

Is it possible to directly add charts as child of a parent panel(without wrapping it in panel,without overlapping, following the layout)?

thanks and regards
Shivam Mishra

[mitchellsimoens]

I'm not seeing overlapping, sure there are some issues I see but it's in beta so not too surprising

Screen Shot 2012-04-27 at 8.52.52 AM.jpg

[shivam.mishra9]

thanks mitchell........ Have u used these charts directly as a child of the main panel or wrapped them in another component????

thanks and regards,
Shivam Mishra