1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    9
    Vote Rating
    0
    ronotica is on a distinguished road

      0  

    Default Dynamically changing majorUnit scale factor on a rendered chart

    Dynamically changing majorUnit scale factor on a rendered chart


    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



    Code:
    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
                    }
                }]
            }
        });
    Attached Images
    Last edited by VinylFox; 29 Sep 2009 at 5:54 AM. Reason: added CODE tags

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    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?

  3. #3
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    Quote Originally Posted by ronotica View Post
    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

  4. #4
    Ext User
    Join Date
    Sep 2009
    Posts
    9
    Vote Rating
    0
    ronotica is on a distinguished road

      0  

    Default


    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

    Code:
    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.
    Last edited by VinylFox; 29 Sep 2009 at 5:54 AM. Reason: added CODE tags

  5. #5
    Ext User
    Join Date
    Sep 2009
    Posts
    9
    Vote Rating
    0
    ronotica is on a distinguished road

      0  

    Exclamation


    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

  6. #6
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    i played around a little bit, i change the
    PHP Code:
    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

  7. #7
    Ext User
    Join Date
    Sep 2009
    Posts
    9
    Vote Rating
    0
    ronotica is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    Quote Originally Posted by ronotica View Post
    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 ??
    PHP Code:
    snapToUnitsfalse 
    PHP Code:
                yAxis: new Ext.chart.NumericAxis({
                    
    title'Hits',
    snapToUnitsfalse

                
    }) 
    than the yAxis change

  9. #9
    Ext User
    Join Date
    Sep 2009
    Posts
    9
    Vote Rating
    0
    ronotica is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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