Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put only integers in x and y axis of bar and line graphs - Flot

Tags:

In Flot.js, bar graphs and line graphs have numbers as the coordinates in the x and y axis by default.

Line graph sample

How can you make the coordinates such that the numbers are only integers or at least only the integers are visible?

like image 789
six.strings.and.a.bit Avatar asked Oct 16 '12 05:10

six.strings.and.a.bit


People also ask

How do you use a line graph?

Line graphs are used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

What does a line graph look like?

Linear graph is represented in the form of a straight line. To show a relationship between two or more quantities we use a graphical form of representation. If the graph of any relation gives a single straight line then it is known as a linear graph.


2 Answers

Looks like more recent versions of Flotr use a different option to control this since the original answer:

    xaxis: {         tickDecimals: 0     } 

Just supply an integer with the number of decimals to show.

NB: This is for Flotr2.

like image 151
Michael Cordingley Avatar answered Sep 19 '22 10:09

Michael Cordingley


Check out the minTickSize option from the documentation:

Alternatively, you can specify that you just don't want ticks at a size less than a specific tick size with "minTickSize".

So in your graph options, you would specify it like this:

$.plot($('#placeholder'),data,{    //your options,    xaxis: {       minTickSize: 1    } }); 

See it working here: http://jsfiddle.net/ryleyb/g2CTz/

like image 27
Ryley Avatar answered Sep 20 '22 10:09

Ryley