PDA

View Full Version : how show only integers in Axis Chart?



marcoas
3 Mar 2013, 4:44 AM
(Translated by Google)

How I can remove the decimals in the X and Y?
I just need to display integers

Note: Extjs 4.1

AssetWorks
3 Mar 2013, 9:40 AM
I think what you want is minorTickSteps

axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
title: 'Number of Hits',
minimum: 0,
//one minor tick between two major ticks
minorTickSteps: 1
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}]

marcoas
3 Mar 2013, 3:06 PM
Don't work for me (Extjs 4.1)

In the attach (X Axis), You can see the problem.

With minorTickSteps, I change the numbers of ticks, between 2 numbers, but no the scale

I need a scale with: 0, 1, 2, 3, 4 ....

42158

marcoas
7 Mar 2013, 1:53 AM
any help?

marcoas
3 Apr 2013, 2:15 PM
Bump!

Sorry for this....I don't find solution to this problem

pablotcarreira
4 Jun 2013, 7:08 AM
In the axis config you need to set:
decimals: 0
and may be a good idea to also set the minimum:
minimum: 0 (or other number)
if you want the scale to go beyond the series maximum, set the maximum, for example:
maximum: 10

prakashpaudel
2 Mar 2015, 8:28 AM
I have come up with an override for the chart


Ext.override(Ext.chart.Chart, {
constructor: function(config) {
var me = this,
defaultAnim;


config = Ext.apply({}, config);
me.initTheme(config.theme || me.theme);
if (me.gradients) {
Ext.apply(config, { gradients: me.gradients });
}
if (me.background) {
Ext.apply(config, { background: me.background });
}
if (config.animate) {
defaultAnim = {
easing: 'ease',
duration: 500
};
if (Ext.isObject(config.animate)) {
config.animate = Ext.applyIf(config.animate, defaultAnim);
}
else {
config.animate = defaultAnim;
}
}


me.mixins.observable.constructor.call(me, config);
if (config.enableMask) {
me.mixins.mask.constructor.call(me);
}
me.mixins.navigation.constructor.call(me);
me.callParent([config]);


this.on('resize', this.integerAxisControl, this);
},
integerAxisControl: function (chart) {
if (!chart) {
return;
}
var axis = null,
dataField,
store = chart.getStore(),
maxValue,
axisHeight,
steps;
chart.axes.each(function (a) {
if (a.type == 'Numeric' && a.integerOnly) {
axis = a;
return false;
}
});
if (!axis) {
return;
}


dataField = axis.fields;


if (Ext.isArray(dataField)) {
dataField = dataField[0];
}


if (axis.axisBBox && axis.axisBBox) {
axisHeight = axis.axisBBox.height;
steps = Math.ceil(axisHeight/ axis.tickSpace || 20);
axis.majorTickSteps = Math.min(steps, maxValue);
axis.minorTickSteps = 0;
axis.drawAxis()
}
}
});




This will now allow you two more options for the Numeric axis


integerOnly: true, // required
tickSpace: 10, // optional

The tickSpace is optional. It's default value is 20.