1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Mumbai, India
    Posts
    33
    Answers
    2
    Vote Rating
    1
    shivam.mishra9 is on a distinguished road

      0  

    Default Unanswered: Multiple Charts on a single panel overlap.

    Unanswered: Multiple Charts on a single panel overlap.


    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.
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Answers
    3462
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Mumbai, India
    Posts
    33
    Answers
    2
    Vote Rating
    1
    shivam.mishra9 is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi