You found a bug! We've classified it as EXTJS-8675 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    1
    tze.soh@verizon.com is on a distinguished road

      1  

    Default Chart not redrawn with data in store after bindStore call

    Chart not redrawn with data in store after bindStore call



    • REQUIRED INFORMATION
      Ext version tested:
      • Ext 4.1.3
      Browser versions tested against:
      • Chrome Version 24
      • IE8
      Description:
      • This charting application first displays a chart to the user using one set of data (from a default time frame, e.g. weekly) User could click on a link (e.g. Monthly) and the chart will show the monthly data set instead. The implementation has multiple data stores created with unique store ids. The onClick of the link is a JavaScript function that dynamically bindStore using the appropriate store id to the chart. With Ext 4.1.1, this implementation works correctly. However, it is broken by Ext 4.1.3. Chrome debugger shows that the correct store is bound to the chart but for some reason the chart is not redrawn with the data in that store (even after an explicit chart.redraw() call)
      Steps to reproduce the problem:
      • Put the provided HTML into a file and open it in the browser to see the default Weekly chart.
      • Click the Monthly link. Still see the same data points as Weekly.
      The result that was expected:
      • Click the Monthly link and the chart will display Monthly data instead (4 data points on the 1st of the month)
      The result that occurs instead:
      • Click the Monthly link. Still see the same data points as Weekly.
      • If you replace the ExtJS script source link in the beginning of the HTML to use Ext 4.1.1, you will see the expected result.
      Test Case:
      Code:
      <wicket:panel><link rel="stylesheet" type="text/css" href="http://localhost:8080/extjs/extjs-4.1.1/resources/css/ext-all.css">
      <script type="text/javascript" src="http://localhost:8080//extjs/extjs-4.1.1/ext-all.js"></script>
      
      
      <!-- load chart data and build chart -->
      <script>
      Ext.Loader.setConfig({
          enabled: true
      });
      Ext.Loader.setPath('*');
      
      
      Ext.require(['*']);
      
      
      </script>
      <script type="text/javascript"  wicket:id="chartData">
      var chartDataArray = new Array(); 
      var metricNames = new Array(); 
      metricNames["Monthly"] = ["Item Availability (%)"];
      metricNames["Weekly"] = ["Item Availability (%)"];
      chartDataArray["Monthly"] = new Array(); 
      chartDataArray["Weekly"] = new Array(); 
      chartDataArray["Monthly"]["Item Availability (%)"] = [
       ['2012/10/01 07:00 +0000', 49.993916],
       ['2012/11/01 07:00 +0000', 48.018314],
       ['2012/12/01 08:00 +0000', 50.93088],
       ['2013/01/01 08:00 +0000', 52.858006]
      ];
      chartDataArray["Weekly"]["Item Availability (%)"] = [
       ['2012/10/14 07:00 +0000', 52.762306],
       ['2012/10/21 07:00 +0000', 48.292603],
       ['2012/10/28 07:00 +0000', 49.192238],
       ['2012/11/04 07:00 +0000', 50.828163],
       ['2012/11/11 08:00 +0000', 50.663887],
       ['2012/11/18 08:00 +0000', 53.892136],
       ['2012/11/25 08:00 +0000', 51.10943],
       ['2012/12/02 08:00 +0000', 47.62784],
       ['2012/12/09 08:00 +0000', 52.254574],
       ['2012/12/16 08:00 +0000', 50.552807],
       ['2012/12/23 08:00 +0000', 51.101433],
       ['2012/12/30 08:00 +0000', 49.56331],
       ['2013/01/06 08:00 +0000', 52.35453],
       ['2013/01/13 08:00 +0000', 55.779995]
      ];
      
      
      var store;
      var chart;
      var innerPanel;
      var timeFrames = ["Monthly", "Weekly"];
      var defaultTimeFrame = "Weekly"; 
      
      
      
      
      var redrawForTimeFrameChange = function(timeFrame) {
        // generate the id of the store of this metric
        var storeId = chart.title + '_' + timeFrame + '_' + 'Store';
        chart.bindStore(storeId);
        var fromDate = chart.store.data.items[0].get('time');
        var toDate = chart.store.last().get('time');
        chart.axes.get('bottom').fromDate = fromDate;
        chart.axes.get('bottom').toDate = toDate;
        chart.redraw();
      }
      
      
      
      
      // Create all store
      for (var i = 0; i < timeFrames.length; i++)
        for (var j = 0; j < metricNames[timeFrames[i]].length; j++) {
          
          Ext.create('Ext.data.ArrayStore', {
          fields: [
              {name: 'time', type: 'date', dateFormat: 'Y/m/d H:i O'},
              {name: metricNames[timeFrames[i]][j], type: 'float'}
          ],
          data: chartDataArray[timeFrames[i]][metricNames[timeFrames[i]][j]],
          storeId: metricNames[timeFrames[i]][j] + '_' + timeFrames[i] + '_Store'
          });
        }
      
      
      store = Ext.data.StoreManager.lookup(metricNames[defaultTimeFrame][0] + '_Weekly_Store');
      
      
      chart = Ext.create('Ext.chart.Chart', {
          style: 'background:#fffff',
          animate: true,
          store: store,
          shadow: true,
          autoScroll: 'false',
          flex: 24,
          title: metricNames[defaultTimeFrame][0],
          axes: [{
              type: 'Numeric',
              minimum: 0,
              position: 'left',
              fields: [metricNames[defaultTimeFrame][0]],
              title: metricNames[defaultTimeFrame][0],
              grid: true,
              minorTickSteps: 1
              }, {
              type: 'Time',
              position: 'bottom',
              fields: ['time'],
              title: 'Date/Time',
              constrain: true,            
              dateFormat: 'm/d' //sets the date display on the x-axis
          }],
          series: [{
              type: 'line',
              highlight: {size: 10, radius: 7, fill: '#ffffff'},
              tips: {
                  trackMouse: true,
                  width: 140,
                  height: 100,
                  renderer: function(storeItem, item) {
                      this.setTitle(storeItem.get('time') + ': ' + storeItem.get(item.series.yField));
                  }
              },
              axis: 'left',
              xField: 'time',
              yField: metricNames[defaultTimeFrame][0]
          }]
      });
      
      
      Ext.onReady(function() {
          
        innerPanel = Ext.create('Ext.panel.Panel', {
              renderTo: 'chart',
              width: 975,
              height: 400,
                  title: metricNames[defaultTimeFrame][0],
                  layout: {
                      type: 'vbox',
                      align: 'stretch'
                  }, 
                  items: [{    
                      xtype: 'component', 
                      html: 'Time frame: <a href=# class="spklnLink" onClick="return redrawForTimeFrameChange(\'Monthly\')">Monthly</a>&nbsp;<a href=# class="spklnLink" onClick="return redrawForTimeFrameChange(\'Weekly\')">Weekly</a>&nbsp;',
                      flex: 1}
                      , chart
                      ]
              });
      
      
      });
      </script>
      
      
      <table border="0" cellpadding="0" cellspacing="0" width="975">
      <tr>
      <td><div id="chart"></div></td>
      </tr>
      </table>
      </wicket:panel>
      HELPFUL INFORMATION
      Possible fix:
      • Use Ext 4.1.1
      Additional CSS used:
      • default ext-all.css
      • custom css are defined within the provided HTML in [CODE]
      Operating System:
      • Windows 7



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


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    1
    tze.soh@verizon.com is on a distinguished road

      0  

    Default


    Will I be able to track the status in the Bug Tracker? Thanks!

Thread Participants: 1