PDA

View Full Version : majorTickSteps not consistent



manassehkatz
12 Jun 2011, 8:09 PM
majorTickSteps is defined as:

majorTickSteps (http://docs.sencha.com/ext-js/4-0/#/api/-cfg-majorTickSteps) : NumberIf minimum and maximum are specified it forces the number of major ticks to the specified value.


The actual results vary quite a bit. Sample code (sorry if it is not formatted/coded perfectly - I am new to ExtJS) is below.


Number of displayed majorTickSteps (i.e., total number of ticks displayed NOT counting the top and bottom) based on mts parameter passed to this sample code:

mts=1: 1
mts=2: 2

mts=3: 2

mts=4: 2

mts=5: 4

mts=6: 4

mts=7: 4

mts=8: 8

mts=9: 9

mts=10: 9

mts=11: 9

mts=12: 12

mts=13: 12

mts=14: 12

mts=15: 9


mts=16: 16

Help!
------------------------------------------------------------------------------------

<?
$mts = $_REQUEST['mts'];
if ($mts == '') { $mts = 5; };
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript">


Ext.define('sampledata', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'int'}
]
});

var tcstore = Ext.data.Store({
model: 'sampledata',
data : [
{label: 'a', value: 10},
{label: 'b', value: 20},
{label: 'c', value: 30},
{label: 'd', value: 40}
]
});


Ext.onReady(function() {

var tcchart = Ext.create('Ext.chart.Chart', {
width: 500,
height: 300,
renderTo: Ext.getBody(),
store: tcstore,
id: 'tcmainchart',
axes: [{
id: 'tcleftaxis',
type: 'Numeric',
position: 'left',
fields: ['value'],
grid: false,
minimum: 0,
maximum: 50,
majorTickSteps: <?=$mts?>,
}, {
type: 'Category',
position: 'bottom',
fields: ['label'],
}],
series: [{
type: 'bar',
column: true,
axis: 'left',
highlight: true,
xField: 'label',
yField: ['value']
}
]
});
});

</script>
</head>
<body id="docbody">
</body>
</html>

margozzi
5 Jul 2011, 2:22 PM
I also am not having luck with majorTickSteps. I have not broken it down as clearly as the previous post, but it basically seems to be ignored. Perhaps this subclass did not make proper use of it? Also the steps array also seem to do nothing. I am completely unable to control my time axis. I don't like having the labels rammed together. But if the component is ignoring the configuration, there is little I can do.

alphadogg
11 Aug 2011, 6:34 AM
I'll add a voice to someone also currently experiencing major majorTickSteps issues.

If I have a Category axis based on strings, how do I ensure that I only have ten major ticks? What is "minimum" and 'Maximum" in that context. Also, the API only mentions minimum and maximum in the explanation for majorTickSteps, but nowhere else is it noted/explained as config properties of their own.

And, trying to get a viable date-based x-axis is akin to a root canal without anesthesia right now.

hellowahab
20 Nov 2011, 6:00 AM
Is anyone lucky enough to get away with this.

whippersnapper
29 Apr 2012, 6:27 AM
We had requirements to display our charts in intervals of 10, 100, 1000, 10000, etc. dynamically based on the dataset rendered. Here's what I did to calculate the majorTicks and range (min-max) dynamically. After doing some reverse engineering, it looks like ExtJS's axis defaults a bare minimum of four majorTickSteps. So if you need to display just 2-3 ticksteps, you need to just shut off majorTickSteps (by setting it to 0). That's the one caveat I haven't figured out yet. Other than that, I've managed to get it to render in a pretty controlled/expected behavior. I know this might not apply to everyone's problem, but perhaps it would be a kick start to your solution(s).

FYI, this can be much more DRY -- but it's the first go around for me. :)


calculateAxisRange: function(range, maximum) {
var obj = {};
obj.decimals = 0;
obj.maximum = maximum;
obj.majorTickSteps = 0;

if(range < 1) {
obj.decimals = 2;
} else if (range < 10) {
obj.maximum = (Math.floor(range/1) + 1) * 1;
var ticks = obj.maximum/1;
if(ticks >= 5) {
obj.majorTickSteps = ticks;
}
} else if (range < 100) {
if(range % 10 > 0) {
obj.maximum = (Math.floor(range/10) + 1) * 10;
var ticks = obj.maximum/10;
if(ticks >= 5) {
obj.majorTickSteps = ticks;
}
}
} else if (range < 1000) {
if(range % 100 > 0) {
obj.maximum = (Math.floor(range/100) + 1) * 100;
var ticks = obj.maximum/100;
if (ticks >= 5) {
obj.majorTickSteps = ticks;
}
}
} else if (range < 10000) {
if(range % 1000 > 0) {
obj.maximum = (Math.floor(range/1000) + 1) * 1000;
var ticks = obj.maximum/1000;
if(ticks >= 5) {
obj.majorTickSteps = axes.items[1].maximum/1000;
}
}
} else if (range < 100000) {
if(range % 10000 > 0) {
obj.maximum = (Math.floor(range/10000) + 1) * 10000;
var ticks = obj.maximum/10000;
if(ticks >= 5) {
obj.majorTickSteps = ticks;
}
}
} else if (range < 1000000) {
if(range % 100000 > 0) {
obj.maximum = (Math.floor(range/100000) + 1) * 100000;
var ticks = obj.maximum/100000;
if(ticks >= 5) {
obj.majorTickSteps = ticks;
}
}
} else if (range < 10000000) {
if(range % 1000000 > 0) {
obj.maximum = (Math.floor(range/1000000) + 1) * 1000000;
var ticks = obj.maximum/1000000;
if(ticks >= 5) {
obj.majorTickSteps = ticks;
}
}
}
return obj;
}

Daniil
11 Jun 2012, 5:40 AM
The thread appears to be related to this one.
http://www.sencha.com/forum/showthread.php?210754