CODEWITHSUNDEEP
jqueryangularjschartsflot
Jigarb1992
Jigarb1992

Reputation: 848

Only Integers in x-axis ticks in flot chart with angularjs

I am using Flot chart with AngularJs. I have the requirement to display only integer number in x-axis, that is done but when I add the max value below 9 it display float value like 1.0, 3.0, 5.0 and when I add max value more then 9 it display proper integer number like 1, 5, 10.

Code I am using: 

        var yaxesMax = parseInt(data['b']) > parseInt(data['a']) ? (parseInt(data['b']) + 5) : (parseInt(data['a']) + 5) ;
       var diagramData = [
                       [0, data['a']],   //0 A Wert
                       [data['c'], data['a']],     //A zu C
                       [data['d'], data['b']], //C zu D
                       [data['e'], data['b']],  //D zu E
                       [data['f'], 0], // E zu F
                    ]
        var multiOptions = {
            axisLabels: {
                show:true,
            },
            xaxes: [
                {
                  ticks: [data['c'],data['d'],data['e'],data['f']],
                  min: 0,
                  max: data['f']
                }
            ],
            yaxes: [
                {
                  min: 0,
                  max: yaxesMax
                },

            ],
            grid: {
              hoverable: true
            },
            tooltip: true,
            tooltipOpts: {
               content: function(label, xval, yval, flotItem) {
                    x = new Date(xval);
                    shortTime = x.getHours() + ':' + x.getMinutes();
                    return 'Day ' + xval + '  | ' + yval + ' ' + label;
                },
                onHover: function (flotItem, $tooltipEl) {
                }
            }
        };
        //Ende MultiOptions

        vmCurvesTaxi.flotMultiData = [
            {
                data:  diagramData,
                points: {
                    show: true,
                },
                lines: {
                    show:true,
                    lineWidth: '3'
                },
                //label:  $rootScope.getEinheiten($rootScope.GlobalData.config.volumemessurement)
            },

        ];

        vmCurvesTaxi.flotMultiOptions = multiOptions;



Add max value below 9: enter image description here



Add max value above 9: enter image description here

Upvotes: 3

Views: 1685

Answers (1)

mechenbier
mechenbier

Reputation: 3067

To enforce an integer display of your xaxis values, set the tickDecimals option to 0:

var options = {
    xaxis: {
        min: 0,
        tickDecimals: 0
    }
}

This JS Fiddle shows a working example of the tickDecimals with a small recreation of your graph.

Upvotes: 3

Related Questions