Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default [FIXED-EXTJSIV-848][B2] Chart Y-axis strange decimals

    [FIXED-EXTJSIV-848][B2] Chart Y-axis strange decimals


    This is form the Help 4.x Forum and submitted here as suggested by steffenk..

    Complete example.. Running in Chrome..
    What should I set to get the Y-axis to integer numbers only.. ?

    Code:
    Ext.require('*');
      
    Ext.onReady(function() 
    {
        var myData = 
        [
            ['Users_1','4'],
            ['Users_2','1'],
            ['Users_3','3']
        ];
        	    
        var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'vad'},
           {name: 'antal'}
            ],
            data: myData
        });
    
        var panel_usr = Ext.create('widget.panel',
        {
            width: 580,
            height: 300,     
            renderTo: Ext.getBody(),
            title: 'Users',
            layout: 'fit',
            items: 
            {
                id: 'chartCmp',
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: store,
                axes: 
                [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['antal'],
                    //maximum: 10,
                    minimum: 0,
                    //alwaysShowZero: false,
                    minorUnit: 1.0,
                    //majorUnit: 100.0,
                    //roundMajorUnit: true,
                    //snapToUnits: true,
                    //adjustMaximumByMajorUnit: true, 
                    //adjustMinimumByMajorUnit: true, 
                    
                    //title: 'Antal',
                    grid: true
                 },
                 {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['vad']
                 }], 
                 series: 
                 [{
                    type: 'column',
                    axis: 'left', 
                    label: 
                    {
                        display: 'insideEnd',
                        orientation: 'vertical',
                        'text-anchor': 'middle',
                        field: 'antal'
                    },
                    xField: 'vad',
                    yField: 'antal'   
                }]
            }
        }); 
    });
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    20
    Vote Rating
    1
    chrisbrianolsen is on a distinguished road

      0  

    Default Add a label renderer

    Add a label renderer


    axes: [{
    type: 'Numeric',
    fields: 'devAvg',
    grid: true,
    position: 'left',
    title: 'Deviation',
    label: {
    renderer: Ext.util.Format.numberRenderer('0.00'),
    font: '10px Arial'
    }
    }, {

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    Well that rounds of the strange decimals.. But as I set minorUnit to 1.0 should't only display whole integers in the y-axis ? What does minorUnit do ? ohh in B2 minorUnit is not a property anymore.. hmm..

    If I set numberRenderer('0') I get two 0 two 1 two 2 two 3.. Hope you understand my bad swenglish...

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    5
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    it's correct to set the label renderer, i forgot about.
    But looking to the screenshot it shows a rounding error imho.

    minorUnit: "The spacing between minor intervals on this axis."
    (missing in the docs while it's in the source)

    There is no difference between 1 and 1.0, so you configured 1 - what i see is 0.4 instead.
    What is majorUnit and minorUnit - i only see one unit here?

    So the issues are
    1) why is the rounding error?
    2) why is minorUnit ignored?

    hope that makes it a bit more clear.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The rounding error is just native js:

    Code:
    console.log(0.2 + 0.4);
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    5
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    ok - but strange though So there is nothing we can do but using format in renderer.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  7. #7
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    5
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    now i played with the example, and there is no real control i see on the axis.

    This is what i configured now for the numeric axes (left):

    Code:
    {
    	type: 'Numeric',
    	position: 'left',
    	fields: ['antal'],
    	maximum: 10,
    	minimum: 0,
    	minorUnit: 1,
    	majorUnit: 1,
    	//roundMajorUnit: true,
    	//snapToUnits: true,
    	//adjustMaximumByMajorUnit: true,
    	//adjustMinimumByMajorUnit: true,
    
    	title: 'Antal',
    	grid: true,
    	label: {
    		renderer: Ext.util.Format.numberRenderer('0')
    	}
    }
    the unit rendered is 2. I can configure any values for minorUnit and majorUnit without any change, i don't get it rendered with unit 1

    If i comment out adjustMinimumByMajorUnit (set to true) the scaling is -2 to 8, also something i don't understand, source says here:
    "Indicates whether to extend the minimum beyond data's minimum to the nearest majorUnit"

    so majorUnit is 1, not 2 (only thing would be that majorUnit is calculated and not respected from configuration).

    Could someone comment on it? Imho it should be possible to configure the scaling and ticks correct, thanks.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Sencha User Seana's Avatar
    Join Date
    Jun 2010
    Posts
    82
    Vote Rating
    0
    Seana is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    The rounding error is just native js:

    Code:
    console.log(0.2 + 0.4);
    which can be seen in any programming language that's using IEEE-754 binary encoding of floating point numbers as there are some values that just can't be encoded that way.

    more info: Wikipedia article
    Sean

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    So does that mean , ext Js charts can not be used with integer values ?
    I want the chart to show different kind of online users. and I want the scale on y-axis to be integer values.. not 0.5 , no bar will be on the mark anyway..

    Maybe i'm missing something..

  10. #10
    Sencha User Seana's Avatar
    Join Date
    Jun 2010
    Posts
    82
    Vote Rating
    0
    Seana is on a distinguished road

      0  

    Default


    Quote Originally Posted by MHjerpe View Post
    So does that mean , ext Js charts can not be used with integer values ?
    I want the chart to show different kind of online users. and I want the scale on y-axis to be integer values.. not 0.5 , no bar will be on the mark anyway..

    Maybe i'm missing something..
    As of right now, it seems that there are a number of control options that just aren't available/implemented in the charting system. (note: this is speculation based on my toying with them over the last week or so)

    Years a go I had to write a graphing subsystem for a 2D UI in 3D space for a visualization project. The graphing system took a number of options that I've yet to find analogues to in the Ext.chart section.

    Please correct me if I'm wrong but so far it seems that config options for...

    1) number of Axis ticks/segments
    2) Axis auto-label control (illustrated above, we should have the option on Ext.chart.axis.Numeric to force int/float values or have an Ext.chart.axis.IntNumeric and Ext.chart.axis.FloatNumeric)

    are out right missing, or at the very least undocumented.
    Sean

Similar Threads

  1. Replies: 2
    Last Post: 1 Apr 2012, 10:58 PM
  2. Replies: 1
    Last Post: 11 Apr 2011, 6:30 AM
  3. Replies: 5
    Last Post: 1 Apr 2011, 4:09 PM
  4. [FIXED-EXTJSIV-219] Chart Y-Axis label issues
    By margozzi in forum Ext:Bugs
    Replies: 5
    Last Post: 25 Mar 2011, 3:09 PM
  5. Replies: 1
    Last Post: 25 Mar 2011, 8:36 AM

Thread Participants: 6