[CLOSED EXTJSIV-146] Several issues with numeric axis

**James Goddard** · 7 Mar 2011 10:57 AM

Using the following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title id="page-title">Test Page</title>
			
		<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
		
		<script type="text/javascript" src="js/extjs/ext-core-debug.js"></script> 
		<script type="text/javascript" src="js/extjs/ext-all-debug.js"></script> 

		<script type="text/javascript">
         Ext.onReady(function () {
            Ext.regModel('Plot', {
               fields: [
                  {name: 'x',  type: 'date'},
                  {name: 'y',  type: 'float'} 
               ]
            });

            var store = new Ext.data.Store({
               model: 'Plot',
               data : [
                  { x: 1, y: 9.13, z: 3.18 },
                  { x: 2, y: 7.15, z: 4.18 },
                  { x: 3, y: 9.13, z: 3.18 },
                  { x: 4, y: 1.2, z: 1.2 },
                  { x: 5, y: 1.2, z: 1.2 }
               ]
            });
   
             var win = Ext.create('Ext.Window', {
                 width: 800,
                 height: 600,
                 hidden: false,
                 maximizable: true,
                 title: 'Line Chart',
                 renderTo: Ext.getBody(),
                 layout: 'fit',
                 items: {
                     xtype: 'chart',
                     store: store,
                     axes: [{
                         type: 'Numeric',
                         position: 'left',
                         fields: [ 'y', 'z' ]
                     }],
                     series: [{
                         type: 'line',
                         axis: 'left',
                         xField: 'x',
                         yField: 'y'
                     }, {
                         type: 'line',
                         axis: 'left',
                         xField: 'x',
                         yField: 'z'
                     }]
                 }
             });
         });
		</script>
	</head>
	<body>
		<div id="grid-example"></div> 
	</body>
</html>

The difference between the first marker (1) and the second (1.8) is .8, and between the second (1.8) and third (2.6) is .8. However the difference between the third (2.6) and the fourth (3.400000000000004) is .800000000000004.
The first and third y data points are outside of the chart.
If you add the following to the axis config
Code:
```
majorUnit: 2,
minorUnit: 1,
```
You will see that both minorUnit and majorUnit seem to have no effect on the numbers displayed.
If you add the following to the axis config
Code:
```
adjustMaximumByMajorUnit: true,
adjustMinimumByMajorUnit: true,
```
You will see that while the top and bottom numbers displayed on the axis are changed, all of the plot points are now wrong. For example the first point is plotted at ~7.6 and ~2.65, instead of 9.13 and 3.18.
Adding snapToUnits seems to have no effect. In fact when searching the code snapToUnits, majorUnit and minorUnit all appear to be unused.

**philogb** · 17 Mar 2011 4:38 PM

Hi,

Thank you very much for the report. I just tested the code in Chrome and IE and it seems to be working well, here are the screenshots for these: http://imgur.com/a/DPJJz . Do you still see the problem? Which browser / OS are you using?

Thanks

**James Goddard** · 18 Mar 2011 4:10 AM

Items 1 and 2 were fixed in PR4. 3, 4, and 5 still occur in Chrome/FF/IE on Windows.

On numbers 3 and 5 they just have no effect on the chart at all.

On number 4 look at the data point markers and where they line up on the axis. The adjust properties change the min and max on the axis but the data plot doesn't change so it no longer matches up with the axis.

**James Goddard** · 21 Mar 2011 3:31 AM

Correction. Item 1 was not fixed. It renders properly with the data above but if you change the data to:

Code:

[
 { x: 1, y: 5.5, z: 5.5 },
 { x: 2, y: 5.5, z: 2.75 },
 { x: 3, y: 0, z: 0 }
]

It again renders incorrectly. See attachment.

example1.png

**philogb** · 23 Mar 2011 8:19 AM

Hi,

Thanks for providing the attachment. This is a problem with floating point arithmetic in JavaScript. This can be solved by adding a label renderer function for the Numeric axis, for example:

HTML Code:

            axes: [{
                type: 'Numeric',
                /* some other options */
		label: {
                        /* round to one decimal */
			renderer: function(v) {
				return Math.round(v * 10) / 10;	
			}	
		}
            }, 
            /* other axis configuration here... */
            ]

Also, we added a small change to the API to handle the other parameters. Those parameters weren't used and they were there from an old chart api, we added `minimum`, `maximum` and `majorTickSteps` the latter being the number of "ticks" between the minimum value and maximum value for the numeric axis. I think this should solve the problem.

Thanks and I hope this helps,

**James Goddard** · 23 Mar 2011 8:36 AM

Thanks for the updates.

Just to clarify, you've closed this but you didn't mention the issues with the adjustMaximumByMajorUnit and adjustMaximumByMinorUnit changing the scale of the axis but not changing the scale of the data. Was that fixed as well?

**bbraun** · 24 Mar 2011 7:49 PM

I think the majorTickSteps approach has an important imitation. It requires that the axis end evenly on a major division. I find it is frequently useful to scale a chart so the axis ends between major divisions. For example, range of 0-35 with labels at 0,10,20. I'd prefer to specify the major grid interval, and have it be completely separate from the axis minimum & maximum.

[CLOSED EXTJSIV-146] Several issues with numeric axis

Thread Tools

Search Thread

Display

[CLOSED EXTJSIV-146] Several issues with numeric axis

[CLOSED EXTJSIV-146] Several issues with numeric axis

Similar Threads

[OPEN] Ext.chart.axis.Numeric - minimum value

[FIXED-EXTJSIV-219] Chart Y-Axis label issues

[FIXED-EXTJSIV-208] stacked bar chart axis not correct

[OPEN-EXTJSIV-205] Numeric axis issues

Setting the Line Chart Numeric Axis Range