I'm trying to figure out how to reload a pie chart from a different XML feed when a user clicks on a link. I have 4 different xml feeds that parse data based on day, week, month or year. When the user clicks on the corresponding day/week/month/year link, I want to reload the pie graph with the new XML.

I can get the pie graph to load properly (from XML) when the page loads.
I can get the pie graph to re-fresh onClick with dummy data.
But I can't get the pie to re-fresh onClick with XML data.

----------
Here is my HTML code:
----------


<html>
<head>
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../example-data.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript" src="extjs-js.js"></script>
</head>

<body id="docbody">
<a href="#" onClick="reloadCharts('day'); return false;">Day</a>
<a href="#" onClick="reloadCharts('week'); return false;">Week</a>
<a href="#" onClick="reloadCharts('month'); return false;">Month</a>
<a href="#" onClick="reloadCharts('ytd'); return false;">YTD</a>
<script type="text/javascript">
//Reload Charts when user clicks on link
var reloadCharts = function(time_frame)
{
updatePieData('http://some.xml.address?' + 'time_frame=' + time_frame);
};

//load charts for the first time
Ext.onReady(function() {
loadPieChart('http://some.xml.address?' + 'time_frame=' + time_frame);
});
</script>
</body>
</html>



--------------
Here is my ExtJS code:
--------------
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');



var loadPieChart = function(chartXmlUrl) {
// define the data model
Ext.define('PieData', {
extend: 'Ext.data.Model',
fields: [
{
name: 'customerType',
type: 'string'
},
{
name: 'customerCount',
type: 'float'
}
]
});

// create the Data Store
var pieDataStore = Ext.create('Ext.data.Store', {
model: 'PieData',
autoLoad: true,
proxy: {
type: 'ajax',
url: chartXmlUrl,
reader: {
type: 'xml',
record: 'record'
// The repeated element which contains row information
}
}
});

// create the chart
// The rest of this function is pretty much exactly an extjs example file.
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 500,
height: 250,
title: 'Transactions by Customer Type',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
id: 'pieChartBody',
animate: true,
store: pieDataStore,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 10,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'customerCount',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 150,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
pieDataStore.each(function(rec) {
total += rec.get('customerCount');
});
this.setTitle(storeItem.get('customerType') + ' Customers: ' + Math.round(storeItem.get('customerCount') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 0
}
},
label: {
field: 'customerType',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});

};



var updatePieData = function(chartXmlUrl)
{

/*
// This works to reload the data, but I want to load data from XML -- not from static data.
var myData1 = [
['New', 75],
['Repeat', 25]
];
Ext.getCmp('pieChartBody').store.loadData(myData1);
*/

/////////////////////////////////////////////
// The following code does not work....... //
/////////////////////////////////////////////

// Define the Data Model
Ext.define('PieData', {
extend: 'Ext.data.Model',
fields: [
'customerType', 'customerCount'
]
});

// Create the Data Store
var pieDataStore2 = Ext.create('Ext.data.Store', {
model: 'PieData',
autoLoad: true,
proxy: {
type: 'ajax',
url: chartXmlUrl,
reader: {
type: 'xml',
record: 'record'
}
}
});

// Update the existing Pie Graph
Ext.getCmp('pieChartBody').store.loadData(pieDataStore2);

};

-------------------
Any advice, pointers, suggestions, similar examples would be greatly appreciated. Thanks!