Feature: Force morris to use only integer values on Y axis

[t3chn0r]

New option gridIntegers was added to force morris to use only integer numbers on the grid (Y axis). gridIntegers accepts a boolean value (false=default). When set to true, morris will use only integer values on the Y axis.

[sudodoki]

To be more sure that everything works fine, try creating few testcases in
[https://github.com/oesmith/morris.js/tree/master/spec/lib/grid](grid test folder) and maybe adding an example page for clearer visual result. I'm not an authority here, but these steps will make it more probable and easier to integrate into library.
No need to check x is true for boolean variable, but that really depends on your code style.

[chilipepper987]

This worked out great for me! With one caveat... it only seems to to take affect if you specify custom y boundaries. I would like to still get integer gridlines using auto y boundaries. To achieve that, just after the if block on line 313 that begins with

if (((_ref = this.options.axes) === true || _ref === 'both' || _ref === 'y') || this.options.grid === true) {

I added this to mine to ensure that the grid lines are still integers on auto y boundaries

     //we still need to round gridlines
      if (this.options.gridIntegers)
      {
          for (var i=0;len=this.grid.length,i<len;i++)
          {
              this.grid[i]=Math.round(this.grid[i]);
          }
      }

this might be more appropriate to be put in the autoGridLines method, but putting it there gets the job done for me.

PS looking through the code made me aware of the options.numLines parameter, which is very useful! But I didn't see it mentioned on the main API doc page
http://www.oesmith.co.uk/morris.js/lines.html

[edumucelli]

That works for me. As @chilipepper987 said, it works when I've set ymin boundary. In my case it is ok because I know I can set ymin as 0. Great!

[MichaelKubovic]

Unfortunately, I must say that it doesn't work as expected for some datasets. For example following data results in step being 0 which further results in errors in rendering...
Error: Invalid value for attribute width="Infinity"

1692: [
    {time: '0 - 5 sec', views: 1},
    {time: '6 - 10 sec', views: 1},
    {time: '11 - 15 sec', views: 0},
    {time: '16 - 20 sec', views: 0},
    {time: '21+ sec', views: 0},
],

My config:

Morris.Bar({
    element: 'popChart' + slide_id,
    data: popChartsData[ slide_id ],
    xkey: 'time',
    ykeys: ['views'],
    labels: ['Leads viewed'],
    xLabelMargin: 10,
    hideHover: 'auto',
    barColors: ["#3d88ba"],
    ymin: 0,
    gridIntegers: true
});

I've managed to fix it by simply enforcing the step to be at least 1.

if(this.options.gridIntegers === true) {
      step = Math.min(1, Math.round(step));
      step = step === 0 ? 1 : step;
}

[rzds]

this does not work if you don't set at least ymin.
it shouldn't do that.

[marcomorain]

👍