Jigarb1992 Jigarb1992 - 3 months ago 41
jQuery Question

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

Answer

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.