Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    kcaothien is on a distinguished road

      0  

    Question Unanswered: Cannot apply 'interactions' if there are more than one Column chart in the same Panel

    Unanswered: Cannot apply 'interactions' if there are more than one Column chart in the same Panel


    I'm implementing a Panel with 2 column charts with interactions (code is below - code is similar to the Column example) and got the following error in 'touch-charts-debug.js:10000':
    Uncaught TypeError: Object #<Object> has no method 'getRefItems'

    If I comment out the 'interactions' section, the charts show up correctly like the below image. But I need to be able to add the pan/zoom capability on both charts.

    Screen shot 2011-08-18 at 3.56.28 PM.png
    Any help would be much appreciated.

    Thanks,

    Kristine
    PHP Code:
    Ext.setup({    
         
    tabletStartupScreen'tablet_startup.jpg',    
         
    phoneStartupScreen'phone_startup.jpg',    
         
    tabletIcon'icon-ipad.png',    
         
    phoneIcon'icon-iphone.png',    
         
    glossOnIconfalse,    
         
    onReady: function() {            
               
    Ext.regModel('ChartItem',    
               {        
                     
    fields: ['name''value']    
               });    
               
    window.chartStore1 = new Ext.data.Store({
                     
    model'ChartItem'    
               
    });    
               
    window.chartStore2 = new Ext.data.Store({
                    
    model'ChartItem'    
               
    });    
               var 
    colors = ['url(#v-1)''url(#v-2)''url(#v-3)''url(#v-4)''url(#v-5)'];

               var 
    chartConfig = {
                      
    width:    300,        
                      
    height200,        
                      
    renderToExt.getBody(),              
                      
    style'position:relative',                
                      
    cls'column1',                
                      
    theme'Demo',                
                      
    animate: {
                               
    easing'bounceOut',
                               
    duration750
                     
    },
                     
    shadowfalse,
                     
    gradients: [{
                           
    'id''v-1',
                           
    'angle'0
                            
    stops: {
                                  
    0: {
                                         
    color'rgb(212, 40, 40)'
                                  
    }, 
                                  
    100: {
                                        
    color'rgb(117, 14, 14)'
                                   
    }
                            }
                     },               
                    {
                             
    'id''v-2'
                             
    'angle'0,
                             
    stops: {
                                   
    0: {
                                        
    color'rgb(180, 216, 42)'
                                   
    },
                                   
    100: {
                                        
    color'rgb(94, 114, 13)'
                                   
    }                    
                           }                
                   },                
                  {                    
                           
    'id''v-3',                   
                           
    'angle'0,
                           
    stops: {
                                  
    0: {
                                         
    color'rgb(43, 221, 115)'
                                  
    }, 
                                  
    100: {
                                         
    color'rgb(14, 117, 56)' 
                                  

                          }
                   }, 
                   { 
                          
    'id''v-4',
                          
    'angle'0,
                           
    stops: {
                                 
    0: {
                                       
    color'rgb(45, 117, 226)'
                                 
    },
                                
    100: {
                                      
    color'rgb(14, 56, 117)'
                                
    }
                          }
                    },                
                  {
                           
    'id''v-5',
                           
    'angle'0,
                           
    stops: {
                                 
    0: {
                                      
    color'rgb(187, 45, 222)'
                                 
    }, 
                                 
    100: {
                                      
    color'rgb(85, 10, 103)'
                                 
    }
                           }
                    }],
     
                   
    axes: [{
                        
    type'Numeric',
                        
    position'left',
                        
    fields: ['value'], 
                        
    minimum0
                        
    label: {
                             
    renderer: function(v) {
                                   return 
    v.toFixed(0); 
                             }
                        },
                        
    title''
                    
    }, 
                   {
                        
    type'Category',
                        
    position'bottom'
                        
    fields: ['name'],
                        
    title''
                    
    }],
     
                   
    series: [{
                         
    type'column',
                         
    axis'left'
                         
    highlighttrue,
                         
    renderer: function(spritestoreItembarAttristore) {
                               
    barAttr.fill colors[colors.length];
                               return 
    barAttr;
                         }, 
                         
    label: {
                               
    field'value' 
                         
    },
                         
    xField'name',
                         
    yField'value'
                   
    }],                
                   
    interactions: [{
                        
    type'panzoom'
                       
    axes: ['bottom']
                    }]    };

        
    window.generateData = function(nfloor) {
                var 
    data = [], 
                   
    = (Math.random() * 11) + 1,                
                   
    i;
                
    floor = (!floor && floor !== 0) ? 20 floor;
                for (
    0< (|| 12); i++) {
                        
    data.push({
                             
    nameDate.monthNames[12],
                             
    valueMath.floor(Math.max((Math.random() * 100), floor))
                       });            
                }            
                return 
    data;        
          };

          var 
    setupUIs = function()    
         {
                    
    window.chartStore1.loadData(generateData(720));
                   
    chartConfig.store window.chartStore1;
                   var 
    columnChart = new Ext.chart.Chart(chartConfig);

                   
    window.chartStore2.loadData(generateData(520));
                   
    chartConfig.store window.chartStore2;
                   var 
    columnChart2 = new Ext.chart.Chart(chartConfig);    

                   var 
    chartPanel = new Ext.Panel({
                           
    width:    340,
                           
    height:    260,
                           
    centeredtrue,
                          
    renderToExt.getBody(),
                          
    border'4'
                          
    padding'10 10 10 10',
                          
    margin5,
                          
    style:'border:2px solid #464646;'
                          
    layout: {
                               
    type'vbox',
                               
    padding'20',
                               
    pack'center',
                               
    align'center'
                         
    },
                         
    autoSizetrue,
                         
    items: [ { html'<div style="margin-bottom:16px;font-size:22px;color:#46889e">' "Data set 1" '</div>' },                 columnChart]        
               });

               var 
    chartPanel = new Ext.Panel({
                         
    width:    340,
                         
    height:    260,
                         
    centeredtrue,
                         
    renderToExt.getBody(),
                         
    border'4',
                         
    padding'10 10 10 10',
                         
    margin5
                         
    style:'border:2px solid #464646;',
                         
    layout: {
                                
    type'vbox',
                                
    padding'20'
                                
    pack'center',
                               
    align'center'
                         
    },            
                         
    autoSizetrue,
                         
    items: [ { html'<div style="margin-bottom:16px;font-size:22px;color:#46889e">' "Data set 2" '</div>' }, columnChart2]        
              });        

              var 
    mainPanel = new Ext.Panel({
                       
    fullscreentrue,
                       
    scroll'vertical'
                       
    layout: {
                             
    type'vbox',
                             
    pack'center'
                             
    align'center'
                       
    }, 
                       
    items: [chartPanelchartPanel2]
               });    
         };
          
    setupUIs();    
    }}); 

  2. #2
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5
    Vote Rating
    0
    ChrisWalker is on a distinguished road

      0  

    Default


    Kristine,
    Actually its the way you created the 2 charts. The chartConfig variable is being used in both the charts, its not really a separate copy of it.
    If you create another var called chartConfig2 that is a copy of chartConfig and then use that to create the 2nd chart, you will see both charts without an error. Not the most elegant way to do this but it will get you up and running.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    kcaothien is on a distinguished road

      0  

    Default


    Got it now. Thanks for your help!!

Thread Participants: 1

Tags for this Thread