Dynamically changing majorUnit scale factor on a rendered chart

[ronotica]

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]

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]

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]

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]

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]

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]

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]

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]

Yes I did in my many attempts. But just to be certain, I tried it again now and the issue still remains.

[jay@moduscreate.com]

can you post your latest code and Data for the chart?