1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    wsharp@advresearch.com is on a distinguished road

      0  

    Default Multiple Nested Chart Panels in TabPanel

    Multiple Nested Chart Panels in TabPanel


    I am attempting to have multiple chart panels and select each one using a tab. It seems that each time I initialize more than one Ext.Chart.Panel it will break all of the charts. For instance my "cardsNotPulled" chart will work fine until I define the "stockCardsNotPulled" chart. Am I doing something wrong?


    Code:
        Ext.setup({
            tabletStartupScreen: 'tablet_startup.jpg',
            phoneStartupScreen: 'phone_startup.jpg',
            tabletIcon: 'icon-ipad.png',
            phoneIcon: 'icon-iphone.png',
            glossOnIcon: false,
            onReady: function() {
                window.generateData = function(n, floor) {
                    var data = [],
                        p = (Math.random() * 11) + 1,
                        i;
        
                    floor = (!floor && floor !== 0) ? 20 : floor;
        
                    for (i = 0; i < (n || 31); i++) {
                        data.push({
                            name: i ,
                            data1: Math.floor(Math.max((Math.random() * 20), floor)),
                            data2: Math.floor(Math.max((Math.random() * 100), floor)),
                            data3: Math.floor(Math.max((Math.random() * 100), floor)),
                            data4: Math.floor(Math.max((Math.random() * 100), floor)),
                            data5: Math.floor(Math.max((Math.random() * 100), floor)),
                            data6: Math.floor(Math.max((Math.random() * 100), floor)),
                            data7: Math.floor(Math.max((Math.random() * 100), floor)),
                            data8: Math.floor(Math.max((Math.random() * 100), floor)),
                            data9: Math.floor(Math.max((Math.random() * 100), floor)),
                            data10: Math.floor(Math.max((Math.random() * 100), floor)),
                            data11: Math.floor(Math.max((Math.random() * 100), floor)),
                            data12: Math.floor(Math.max((Math.random() * 100), floor)),
                            data13: Math.floor(Math.max((Math.random() * 100), floor)),
                            data14: Math.floor(Math.max((Math.random() * 100), floor)),
                            data15: Math.floor(Math.max((Math.random() * 100), floor)),
                            data16: Math.floor(Math.max((Math.random() * 100), floor)),
                            data17: Math.floor(Math.max((Math.random() * 100), floor)),
                            data18: Math.floor(Math.max((Math.random() * 100), floor)),
                            data19: Math.floor(Math.max((Math.random() * 100), floor)),
                            data20: Math.floor(Math.max((Math.random() * 100), floor)),
                            data21: Math.floor(Math.max((Math.random() * 100), floor)),
                            data22: Math.floor(Math.max((Math.random() * 100), floor)),
                            data23: Math.floor(Math.max((Math.random() * 100), floor)),
                            data24: Math.floor(Math.max((Math.random() * 100), floor)),
                            data25: Math.floor(Math.max((Math.random() * 100), floor)),
                            data26: Math.floor(Math.max((Math.random() * 100), floor)),
                            data27: Math.floor(Math.max((Math.random() * 100), floor)),
                            data28: Math.floor(Math.max((Math.random() * 100), floor)),
                            data29: Math.floor(Math.max((Math.random() * 100), floor)),
                            data30: Math.floor(Math.max((Math.random() * 100), floor))
                        });
                    }
                    return data;
                };
                window.store1 = new Ext.data.JsonStore({
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
                    data: generateData(31, 5)
                });
        
                var colors = ['url(#blue)'];
                
                var onMsgTap = function () {
                      var msg = new Ext.MessageBox();
                        msg.show({
                        title: 'Hello World',
                        msg: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt',
                        buttons: [{text:'Sure',itemId:'sure'},{text:'No Way',itemId:'noway'}],
                        fn:function(response){
                            console.log(response)
                        }
                    });
                }
                
                var onRefreshTap = function() {
                    window.store1.loadData(generateData(31, 2));
                };
                
                
                // ******************
                // ** CHART PANELS **
                // ******************
                
                // Number of cards not pulled
                // Chart Panel
                var cardsNotPulled = new Ext.chart.Panel({
                    fullscreen: true,
                    title: 'Cards Not Pulled At [Location]',
                    items: {
                        cls: 'column1',
                        //animate: {
                        //    easing: 'bounceOut',
                        //    duration: 750
                        //},
                        store: store1,
                        shadow: false,
                        gradients: [{
                            'id': 'blue',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(45, 117, 226)'
                                },
                                100: {
                                    color: 'rgb(14, 56, 117)'
                                }
                            }
                        }],
                        axes: [{
                            type: 'Numeric',
                            position: 'left',
                            fields: ['data1'],
                            minimum: 0,
                            maximum: 30,
                            label: {
                                renderer: function(v) {
                                    return v.toFixed(0);
                                }
                            },
                            title: '# of Cards Not Pulled'
                        },
                        {
                            type: 'Category',
                            position: 'bottom',
                            fields: ['name'],
                            title: Date.monthNames[8]
                        }],
                        series: [{
                            type: 'column',
                            axis: 'left',
                            highlight: true,
                            renderer: function(sprite, storeItem, barAttr, i, store) {
                                barAttr.fill = colors[i % colors.length];
                                return barAttr;
                            },
                            label: {
                              field: 'data1'
                            },
                            xField: 'name',
                            yField: 'data1'
                        }],
                      //  interactions: [{
                      //      type: 'panzoom',
                      //      axes: ['bottom']
                      //  }]
                    }
                });
                
                // Number of stock out cards not pulled
                // Chart Panel
                var stockCardsNotPulled = new Ext.chart.Panel({
                    fullscreen: true,
                    title: 'Cards Not Pulled At [Location]',
                    items: {
                        cls: 'column1',
                        //animate: {
                        //    easing: 'bounceOut',
                        //    duration: 750
                        //},
                        store: store1,
                        shadow: false,
                        gradients: [{
                            'id': 'blue',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(45, 117, 226)'
                                },
                                100: {
                                    color: 'rgb(14, 56, 117)'
                                }
                            }
                        }],
                        axes: [{
                            type: 'Numeric',
                            position: 'left',
                            fields: ['data1'],
                            minimum: 0,
                            maximum: 30,
                            label: {
                                renderer: function(v) {
                                    return v.toFixed(0);
                                }
                            },
                            title: '# of Cards Not Pulled'
                        },
                        {
                            type: 'Category',
                            position: 'bottom',
                            fields: ['name'],
                            title: Date.monthNames[8]
                        }],
                        series: [{
                            type: 'column',
                            axis: 'left',
                            highlight: true,
                            renderer: function(sprite, storeItem, barAttr, i, store) {
                                barAttr.fill = colors[i % colors.length];
                                return barAttr;
                            },
                            label: {
                              field: 'data1'
                            },
                            xField: 'name',
                            yField: 'data1'
                        }],
                      //  interactions: [{
                      //      type: 'panzoom',
                      //      axes: ['bottom']
                      //  }]
                    }
                });
                
                // ****************
                // ** NAVIGATION **
                // ****************
                
                // Tab bar (intended for page selection)
                new Ext.TabPanel({
                    fullscreen: true,
                    ui        : 'plain',
                    sortable  : true,
                    tabBarDock: 'bottom',
                    items: [
                        {
                            title: 'Home',
                            html : '1',
                            layout: 'fit'
                        },
                        {
                            title: 'Cards Not Pulled',
                            items: [cardsNotPulled],
                            layout: 'fit'
                        },
                        {
                            title: 'Stock Cards Not Pulled',
                            items: [stockCardsNotPulled],
                            layout: 'fit'
                        }
                    ]
                });
        
            }
        });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Vote Rating
    852
    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


    What happens if each chart has it's own store? Something is being shared that shouldn't be.
    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.

Thread Participants: 1

Tags for this Thread