PDA

View Full Version : Dynamically changing majorUnit scale factor on a rendered chart



ronotica
21 Sep 2009, 1:17 PM
I have a stationary graph that is drawn on page load and is dynamically updated as changes occur on the backend. Everything works beautifully except for a certain scenario. When the values that make up the data are low numbers eg. a series of 6,4,2,1, the y-axis repeats numbers on the axis. I have tried setting the majorUnit property of the Ext.chart.NumericAxis to a value of 1, but while this works, we cannot predict how far the series will grow to. So if we had a data from the server of say 8000, then we will have a problem as the scale factor of 1 is too fine grain to render at that point.

What I would like is a way to dynamically change the majorUnit of the NumbericAxis and apply the updated value to the Panel that is already drawn on the screen.

Is this possible?

Attached is a screenshot of what the graph looks like when we don't apply a majorUnit value and the series are of low values.


This is a snippet of the code that renders the graph




Ext.onReady(function(){
store = new Ext.data.ArrayStore({
fields: ['round', 'bids'],
url: "../datafeeder.jsp"
});

panel = new Ext.Panel({
width: 700,
height: 400,
renderTo: document.body,
title: 'Column Chart with Reload - Hits per Month',
tbar: [{
text: 'Load new data set',
handler: function(){
store.loadData(ajax());
}
}],
items: {
itemId: 'p1',
xtype: 'columnchart',
store: store,
yField: 'bids',
xField: 'round',
xAxis: new Ext.chart.CategoryAxis({
title: 'Round Number'
}),
yAxis: new Ext.chart.NumericAxis({
title: '# of Bids',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
extraStyle: {
yAxis: {
titleRotation: -90
}
},
series: [{
type: 'column',
yField: 'bids',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
}]
}
});

mrsunshine
21 Sep 2009, 1:21 PM
just a thought, could it be that it work internaly with 0,5 , 2,5 , ... and that in the chart only ints and not float values are printed ans so the ,5 is cutted?

mrsunshine
21 Sep 2009, 1:26 PM
labelRenderer : Ext.util.Format.numberRenderer('0,0')


take look to the docs i think you have to write
labelRenderer : Ext.util.Format.numberRenderer('0.0')

to get the 2.5 , 3.5 , 4.5 ... steps

ronotica
21 Sep 2009, 2:44 PM
Thanks mrsunshine. Perhaps my question wasn't clear. That graph will only ever be an integer series, so I am not after making the y-axis scale by 0.5. That can be easily achieved by doing


yAxis: new Ext.chart.NumericAxis({
title: '# of Bids',
labelRenderer : Ext.util.Format.numberRenderer('0,0'),
majorUnit: 0.5 //scale by a factor of 0.5
})

What I want is a way to change the value of majorUnit dynamically once the graph has been rendered (as this graph sits on the screen after the user opens the page and updates periodically) and apply that changed value to the rendered graph.

So say I start off with a value of majorUnit:1, how can I set this value to something else dynamically say 10 and then apply it to the chart? So for that scenario, the y-axis will start off at 0,1,2,3,4,5... and once the majorUnit has been updated to 10, I will expect it to re-render the chart with y-axis 0,10,20,30,40...

I hope that is clear. Thanks.

ronotica
22 Sep 2009, 8:59 AM
Pls, can anyone help with this? It's driving me nuts! Why would the yaxis repeat numbers when the series are in the lower bound.

PS: this is an integer only series.

Thanks in advance

mrsunshine
22 Sep 2009, 11:02 AM
i played around a little bit, i change the

yAxis.majorUnit = 10
after the chart is rendert, but i found no way to rerender the hole chart.

only the chart bars change when the data in the store change.

information about rerender the achis informations are willcome.

the only idea i have is to remove the chart and add it again with the new majorUnit value. but this a hard way to rerender ;)

ronotica
22 Sep 2009, 11:25 AM
Yes, you are right. I got that far as well, but like you, I can't find anyway to apply the change to the rendered graph without re-drawing the whole thing :(.

Unfortunately, that option is not acceptable as the graph will flicker too much (between redraws).

For a framework as rich as this, I can't believe there is no way to do that.

I'll keep hope alive.

Thanks for looking into it.

mrsunshine
22 Sep 2009, 11:45 AM
Yes, you are right. I got that far as well, but like you, I can't find anyway to apply the change to the rendered graph without re-drawing the whole thing :(.

Unfortunately, that option is not acceptable as the graph will flicker too much (between redraws).

For a framework as rich as this, I can't believe there is no way to do that.

I'll keep hope alive.

Thanks for looking into it.


do you tried ??


snapToUnits: false


yAxis: new Ext.chart.NumericAxis({
title: 'Hits',
snapToUnits: false

})

than the yAxis change

ronotica
22 Sep 2009, 11:51 AM
Yes I did in my many attempts. But just to be certain, I tried it again now and the issue still remains.

29 Sep 2009, 4:53 AM
can you post your latest code and Data for the chart?

ronotica
30 Sep 2009, 5:02 AM
I apologize for my late response. I was swamped yesterday.

Find attached the code

datafeeder.txt (it's a jsp file) - called every 3 secs to generated new data for the chart
test.txt (it's a jsp file) - the page the renders the graph
test-chart.txt (it's a javascript file) - used by test.jsp to initialize the Ext JS components and draw the graph

I have purposely made datafeeder.jsp render low data series, that will enable you see the labels repeating on the y-axis.

Let me know if you need anything else.

gurkanozhan
9 Oct 2009, 4:49 AM
Hi to all,
Actually I am also after such a capability. To restate the issue, what I am looking for is a scale up and scale down capability; that is zooming in and out over data. For example say that we have a TimeAxis on x and we have quite a lot of values, say several hundred, spread over a year. Say also that the data is sparse, that is, sometimes the values gather more on a month than others. In this case, a scaling down capability would benefit a lot in terms of effective visibility and legitimacy of the chart. This is one of the common features of powerful chart libraries found on the market (mostly non-web libraries, though)
Has anybody developed such an extension for ext charts?

Kind regards,

Gurkan Ozhan

9 Oct 2009, 4:53 AM
ExtJS charts uses YUI charts, so no, extensions can't just be written on the whim. The YUI charts are developed in AS3 (ActionScript 3) and code owned by YAHOO!.

I've spent the last 3 weeks diving deep into charts (even teh AS3 code) to understand them for Ext JS in Action and am hoping to finish the chapter on charts today or tomorrow.

The ExtJS charts are already out of date as far as i can tell and a feature request has been made to use the latest YUI charts available (2.8+).

9 Oct 2009, 4:54 AM
BTW, if you want such a feature, then a feature request has to be logged with YAHOO! via their YDN (Yahoo! developer network) forums.

ronotica
9 Oct 2009, 4:59 AM
[email protected] (http://www.extjs.com/forum/member.php?u=172) any update on my issue? As far as I can tell, this sounds like a bug. Do you have a decent workaround, you being the ExtJs expert ;)

9 Oct 2009, 5:13 AM
I wouldn't callmyself an expert, but you can change the yAxis dynamically.


Ext.getCmp('myChart').setYAxis(new Ext.chart.CategoryAxis({
title : 'Number of employees'
}));


This somehow breaks styles.

to fix this:



var chart = Ext.getCmp('myChart');

chart.setYAxis(new Ext.chart.CategoryAxis({
title : 'Number of employees'
}));

chart.setStyles(Ext.apply({}, chart.extraStyle, chart.chartStyle));

ronotica
9 Oct 2009, 5:47 AM
Thanks Jay! It works like a charm. You are the man!

Does your book cover graphs extensively? Also I don't see the setYAxis() method on the Chart or ColumnChart api, so I wasn't aware such a method existed. Am I reading the API wrongly, or am I missing something?

9 Oct 2009, 5:55 AM
That's because it's marked as a private method.

I've been finding myself reading the source more often to understand how things work. I've been using the framework since early 2006, so my comfort level is pretty high :).

The chapter on the book will go through all of the charts and some of the customizations. For instance, how does one show a legend?

But in 30 pages, I can't possibly get everything in.

Here is a screenshot of one of the charts.
http://extjsinaction.com/wp-content/uploads/2009/10/FirefoxScreenSnapz001.bmp

And a snippet of a page.
http://tdg-i.com/img/screencasts/2009-10-04_0949.png

Thanks,
-Jay

ronotica
9 Oct 2009, 6:01 AM
True, you can't possibly do it all in 30 pages. I probably should get used to reading the source code too. This is my first time experience with it, so my comfort level isn't half as high as yours :)

I just peeked through the books TOC now, and I do see lots of goodies. Definitely grabbing myself a copy.

Thanks again.
-Bayo

Mag_42
9 Oct 2009, 6:05 AM
Yeah there are a few handy functions buried in the source... looking at the YuiChart docs helps a lot too.

9 Oct 2009, 6:07 AM
True, you can't possibly do it all in 30 pages. I probably should get used to reading the source code too. This is my first time experience with it, so my comfort level isn't half as high as yours :)

I just peeked through the books TOC now, and I do see lots of goodies. Definitely grabbing myself a copy.

Thanks again.
-Bayo

The TOC has changed somewhat - but for the better.

2 Nov 2009, 8:07 AM
For any subscribers, the charts chapter should be in MEAP this week or next.

koolchallenger
4 Mar 2012, 1:33 AM
I am facing similar problem. Let me know if this problem has been solved