I am trying to make a plotting function in javascript using the canvas element of HTML 5. The problem that I am having is how to calculate the labels of the Y axis.

For example, when you see an array of numbers ranging from 4 to 96, for me the most logic labels would range from 0 to 100 with steps of 10.

Given an array with numbers in a higher category with a max of for example 2375, the max label I would use would be 2500.

Now, how do you calculate such things? I have been searching for a solution but haven't found one yet.

Thanks in advance, Bart

• javascript
• plot
• label
• axis-labels

Unfortunately there's no easy way to do what you want. If you know you want a certain number of ticks (ten, for example), you can always just divide the max value by the number of ticks. The problem there is that you'll have really horrible tick labels. For example, with 2375, you would have a tick every 237.5 units, when probably you want ticks every 250, which is much "nicer". The only way to get those nice round tick values is to have some kind of logic like this:

if( maxValue < 100 ) {
  tickValue = 10;
else if( maxValue < 500 ) {
  tickValue = 50;
else if( maxValue < 1000 ) {
  tickValue = 100;
else if( maxValue < 1500 ) {
  tickValue = 150;
} // ...etc