View Full Version : Changing the yField for a series of a chart dynamically/during run time

7 Sep 2011, 11:01 AM
ok here are more details about the problem just incase it might help you to understand my porblem.

I am creating a series column chart. Initially the yfield for the chart is a single attribute so it represents only a bar chart. When a user clicks on a checkbox the check box value needs to get appended to the yfield attribute of the series and then the column series for both the attributes needs to get generated and the bar chart is reloaded for the next set of yfields.

I tried many options to redraw the chart and also to edit the yfiled value dynamically but was not successful. In other words i want something dynamic like what happens when we click on the legend links for seeing the items in the chart. Based on the click on the legend the chart decides which data to show.

below is the same code of my bar_chart the check_string is the variable which has the yfields getting appended dynamically.

Ext.create('Ext.chart.Chart', {
flex: 1,
shadow: true,
height: 250,
width: 798,
insetPadding: 20,
style: 'background:#fff',
animate: true,
store: storeCampByMonth,
legend: {
position: 'right'
xField: 'month',
yField: [check_string],//['extension', 'acceptance'],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['extension', 'acceptance'],
minimum: 0,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
grid: true,
title: 'Extensions&Acceptances'
type: 'Category',
position: 'bottom',
fields: ['month'],
title: '2005'
} ],
series: [{
type: 'column',
axis: 'left',
xField: 'month',
yField: [check_string],//['extension', 'acceptance'],
listeners : {
'itemmouseup': function(item) {
barChart.series.get(0).highlight = true;

ds.loadData(campaignsInMonth(allData, item.storeItem.data.monthIdx));
} ]});

please help me to solve this problem i would really appreciate it.