Chart not redrawn with data in store after bindStore call

**tze.soh@verizon.com** · 14 Feb 2013 10:38 AM

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

**mitchellsimoens** · 14 Feb 2013 9:04 PM

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

**tze.soh@verizon.com** · 18 Feb 2013 6:59 AM

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

Chart not redrawn with data in store after bindStore call

Thread Tools

Search Thread

Display

Chart not redrawn with data in store after bindStore call

Chart not redrawn with data in store after bindStore call