Sencha Touch 2.1 changing cartesian chart axis values as whole numbers

Question

enter image description here Hi
I am using sencha touch 2.1.1 charts to show the polls result as in cartesian chart format.I assigned my axes type as 'integer'. My given input values for chart's store are always whole numbers only(like 1,2,3...). But the drawned graph axis contains decimals, but i no need of decimals in my axis.
How to fix this.Thanks in advance.

Ext.define("KBurra1.view.PollChart",{
extend:"Ext.chart.CartesianChart",
requires:['Ext.data.JsonStore','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.chart.series.Bar'],
config:{
    store:null,
//id:"poll_chart",
height:'200px',
flipXY: true,
axes: [{
    type: 'numeric',
    minimum:0,
    //maximum:3,
    //increment:1,
    position: 'bottom',
    title: 'Number of Votes',
    grid: {
        odd: {
            opacity: 1,
            fill: '#dddc',
            stroke: '#bbb',
            lineWidth: 1
        },

    },



}, {
    type: 'category',
    position: 'left',
    grid: true,
    label: {
        rotate: {
            degrees:330
        },

    }
}],
series: [{
    //title : ['data1'],
    type: 'bar',
    xField: 'answer',
    yField: ['votecount'],
    style: {

        fill:'#57a4f7',
        minGapWidth:5,

    },
    stacked : false
}]
}

});

I don't get what you means, so you want 1,2,3,4 in stead of 0.00, 0.05, 0.10, 0.15? — Eli, Mar 28 '13 at 07:46
ya you are right. I need 1,2,3,4 instead of 0.00, 0.05, 0.10, 0.15. If you know help me to fix this. — SURESH KUMAR, Mar 28 '13 at 08:44
some times the number of vote count is 2 or 3 mean, if we set the maximum as 20 the length of the bar is very small in mobile devices. — SURESH KUMAR, Mar 28 '13 at 09:00

score 1 · Accepted Answer · answered May 13 '13 at 11:52

You can use the built in javascript function "toFixed(0)" this will give it 0 decimal places. Also if you want 1 decimal place just put 1 instead of 0.

To use it in the chart add a render property to the axes with a little function that does it. In my app I was dealing with numbers in millions so I divide by 1000000 and then display only 1 decimal.

axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    fields: ['population','phones'],
                    minimum: 0,
                    renderer: function (value) {
                                value = value / 1000000;
                                return value.toFixed(1);
                            },
                    grid: true
                },

In your case just multiply by 100 and use toFixed(0)

Sencha Touch 2.1 changing cartesian chart axis values as whole numbers

1 Answers1