Search code examples
sencha-touch-2sencha-charts

Sencha Touch 2.1 changing cartesian chart axis values as whole numbers

enter image description hereHi
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
}]
}

});

Solution

  • 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)