PDA

View Full Version : Changing a chart yField during run time when an event is triggered.



dvaidhya
7 Sep 2011, 6:43 AM
hi i am a new bie to extjs. I have been trying to create a Column series and i need to change the yField dynamically/during run time when the user checks a checkbox. I could not find a method which would do this.

Can anyone please help me?

Thanks!

dvaidhya
7 Sep 2011, 10:59 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;
barChart.series.get(0).unHighlightItem();
barChart.series.get(0).cleanHighlights();

barChart.series.get(0).highlightItem(item);
ds.loadData(campaignsInMonth(allData, item.storeItem.data.monthIdx));
}
}
} ]});

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

dvaidhya

skirtle
8 Sep 2011, 3:47 AM
Please use CODE tags when posting code (# button on the editor toolbar).

Setting the values in the records should work fine. Alternatively, if you want to change which field is used to draw the chart then something like this should work:


var series = chart.series.first();
series.yField = 'data2';
series.drawSeries();

Bit hacky though.

If you still can't get it to work could you post an example of something you've tried that didn't work? May help us to understand better what you're trying to do.

dvaidhya
8 Sep 2011, 5:36 AM
Thanks you soo much skirtle (http://www.sencha.com/forum/member.php?197255-skirtle) it worked. I found one surprising thing when i checked the series API to understand the method description and usage for the first() method i could not find it.

Under which Classdoes the first method belong to..

Thanks for your help you made my day. I was breaking my head for a day for this simple thiung.

Cheers
dvaidhya


Please use CODE tags when posting code (# button on the editor toolbar).

Setting the values in the records should work fine. Alternatively, if you want to change which field is used to draw the chart then something like this should work:


var series = chart.series.first();
series.yField = 'data2';
series.drawSeries();

Bit hacky though.

If you still can't get it to work could you post an example of something you've tried that didn't work? May help us to understand better what you're trying to do.

skirtle
8 Sep 2011, 5:39 AM
chart.series isn't documented but it's a MixedCollection:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.MixedCollection-method-first

jeppo
12 Sep 2011, 6:37 AM
Thank you.
Changing the series seems to work. But now the problem seems to be that the y axe values does not reflect the new series ones. The value on the axe is stuck on the old min and max of the old series.
Is there a way to refresh also the axes?

Thanks in advance

dvaidhya
12 Sep 2011, 6:46 AM
Not sure if this would help i used the below code in addition to the one which Skirtle replied



check_string=['acceptance','extension'];
var series = barChart1.series.first();
series.yField = check_string;
series.drawSeries();
barChart1.redraw(true);


In my barChart1 code i have also changed the axes to point to check_string. hence when i issue redraw the barchart takes the new axes. let me know if this works for you


axes: [{
type: 'Numeric',
position: 'left',
fields: [check_string],
minimum: 0,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
title: 'Extensions&Acceptances'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
title: '2005'
} ]

jeppo
12 Sep 2011, 7:35 AM
Thanks but it does not work as I want, because if in the old series I have, for example, values from 0 to 10, y axis automatically draws itself correctly with values from 0 to 10. When I change the series at runtime, and the new series has values from 100 to 150, the values on the axes does not change and the series draw itself outside the chart screen.

I have to do some sort of axis reset or initializing with the correct values of the field from the store.

whippersnapper
9 Oct 2011, 6:47 PM
Anyone successfully removed an axis from chart before? I have three axis (left, bottom, right). I need to dynamically at run time remove the right axis, if user clicks on some config option. The problem is the axis line still remains...