Using flot charts I would like to specify a minimum of ticks to show on the y-axis. In my case I would like to always show at least 10 ticks (values 1-10), but if my y-axis max exceeds 10 then I would like flot to draw the chart with its normal tick algorithm. I currently have it sort of working by specifying a function for the ticks paramater.

ticks: function(axis){
           var ticks = [];
           if(axis.max < 10){
                ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
           }
           else{
             for(var i = 1; i < axis.max; i++){
                 ticks.push(i);
             }
           }
           return ticks;
}, 

The problem with this is that I get a lot more ticks than I want when the axis.max is greater than 10. Is there a way to avoid this?

I originally thought I could return null, but flot is expecting an array to be returned. :(

Using flot charts I would like to specify a minimum of ticks to show on the y-axis. In my case I would like to always show at least 10 ticks (values 1-10), but if my y-axis max exceeds 10 then I would like flot to draw the chart with its normal tick algorithm. I currently have it sort of working by specifying a function for the ticks paramater.

ticks: function(axis){
           var ticks = [];
           if(axis.max < 10){
                ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
           }
           else{
             for(var i = 1; i < axis.max; i++){
                 ticks.push(i);
             }
           }
           return ticks;
}, 

The problem with this is that I get a lot more ticks than I want when the axis.max is greater than 10. Is there a way to avoid this?

I originally thought I could return null, but flot is expecting an array to be returned. :(

• javascript
• jquery
• flot

Share Improve this question Follow edited Jul 19, 2013 at 16:21 Blake Plumb asked Jul 19, 2013 at 16:08 Blake PlumbBlake Plumb 7,21933 gold badges3939 silver badges5656 bronze badges 5

• What you have explained and what that function does are contradictory. Try removing that else statement and change the if condition to a less or equal than i.e. <= – Alexander Commented Jul 19, 2013 at 16:26
• @Alexander The else statement will create the tick array of values up to the axis.max if I remove it then I will only have tick values 1-10. This is not what I want. I want tick values up to the y-axis max. I just don't want them in increments of 1. I want flot to use its default algorithm if possible. – Blake Plumb Commented Jul 19, 2013 at 16:29
• 1 No, that's not true. If you remove it, it will return an empty array. Hence, the else statement is on the way. Remove it. As for the rest you need to add the property dynamically if returning null doesn't do the trick – Alexander Commented Jul 19, 2013 at 16:32
• @alexander good point. I will try that. – Blake Plumb Commented Jul 19, 2013 at 16:34
• Not exactly a duplicate, but very similar to stackoverflow./questions/17723904/… – DNS Commented Jul 20, 2013 at 4:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If you want the default functionality for tick generation you can call the tickGenerator function of the axes. It is much cleaner than working with a piece of code you don't maintain. So in your case, you could do this:

ticks: function(axis){
   return axis.max < 10 ? [1,2,3,4,5,6,7,8,9,10] : axis.tickGenerator(axis); 
}

It seems that default Flot algorithm goes like that (see setupTickGeneration function:

noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight);

so maybe something like that would work here (DISCLAIMER - not really tested, not sure if you have all needed vars in this scope and the math is just to sketch the solution:

ticks: function(axis){
       var ticks = [];
       if(axis.max < 10){
            ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
       }
       else{

         noTicks = 0.3 * Math.sqrt(canvasHeight);
         interval = Math.round(axis.max / noTicks); 
         for(var i = 1; i <= noTicks; i++){
             ticks.push(i * interval);
         }
       }
       return ticks;
}, 

I found this:

ticks: 16

but I haven't tried it.