Morris JS - Scaling Y Axis on Graph

[Biiim]

I've been working on a project using Morris JS and since there was no solution out there for the Y axis scaling that I could find I wanted to posted where I got.

Note you will need morris JS & Moment JS to run it.

You just need a div with the id "home_chart_0" and it should run. It rounds the max value up, compares it to the min value rounded down and divides it by 10 and spreads over 10 lines.

The properties "yLabelFormat" & "numLines" in Morris JS are not documented but exist.

Let me know if you have something worked out on the Y scaling.

var ajaxData.weekending = moment();
var graphData = [
    {period: moment(ajaxData.weekending).clone().subtract(7,'d').format("Y-MM-DD"), value: 20, quota: 10}
    ,{period: moment(ajaxData.weekending).clone().subtract(6,'d').format("Y-MM-DD"), value: 30, quota: 20}
    ,{period: moment(ajaxData.weekending).clone().subtract(5,'d').format("Y-MM-DD"), value: 53, quota: 30}
    ,{period: moment(ajaxData.weekending).clone().subtract(4,'d').format("Y-MM-DD"), value: 61, quota: 40}
    ,{period: moment(ajaxData.weekending).clone().subtract(3,'d').format("Y-MM-DD"), value: 64, quota: 50}
    ,{period: moment(ajaxData.weekending).clone().subtract(2,'d').format("Y-MM-DD"), value: 68, quota: 60}
    ,{period: moment(ajaxData.weekending).clone().subtract(1,'d').format("Y-MM-DD"), value: 80, quota: 70}
    ,{period: moment(ajaxData.weekending).format("Y-MM-DD"), value: 85, quota: 80}
];

var graphYMAX = 85;
var graphYMIN = 0;

var graphPlotYMIN = 0;
var graphPlotYMAX = 0;
var graphPlotYDIFF = 0;
var graphYPlotNumLen = 0;
var graphYPlotRounder = 0;
var graphYPlotNumTop = 0;

if(statUpsidedown == 1){
    graphPlotYMIN = graphYMAX;
    graphPlotYMAX = graphYMIN;
    graphPlotYDIFF = graphPlotYMIN - graphPlotYMAX;
    graphYPlotNumLen = Math.ceil(Math.log10((graphPlotYDIFF) + 1));
    graphYPlotRounder = (10**graphYPlotNumLen)/10;
    graphYPlotNumTop = Math.ceil(graphPlotYMAX/graphYPlotRounder)*graphYPlotRounder;
    graphYPlotNumBot = Math.floor(graphPlotYMIN/graphYPlotRounder)*graphYPlotRounder;
}else{
    graphPlotYMIN = graphYMIN;
    graphPlotYMAX = graphYMAX;
    graphPlotYDIFF = graphPlotYMAX - graphPlotYMIN;
    graphYPlotNumLen = Math.ceil(Math.log10((graphPlotYDIFF) + 1));
    graphYPlotRounder = (10**graphYPlotNumLen)/10;
    graphYPlotNumTop = Math.ceil(graphPlotYMAX/graphYPlotRounder)*graphYPlotRounder;
    graphYPlotNumBot = Math.floor(graphPlotYMIN/graphYPlotRounder)*graphYPlotRounder;
}               
console.log(graphPlotYMIN);
console.log(graphPlotYMAX);
console.log(graphPlotYDIFF);
console.log(graphYPlotNumLen);
console.log(graphYPlotRounder);
console.log(graphYPlotNumTop);
console.log(graphYPlotNumBot);

homeCurChart = Morris.Line({
    element: 'home_chart_0',
    data: graphData,
    xkey: 'period',
    ykeys: ['value','quota'],
    labels: ['Value','7R'],
    continuousLine: false,
    ymin: graphYPlotNumBot,
    ymax: graphYPlotNumTop,
    pointSize: 3,
    fillOpacity: 0,
    lineWidth:2,
    yLabelFormat: function(y){return (Math.round(y*100)/100);},
    numLines: 11,
    xLabels: 'day',
    xLabelFormat: function (d){
        return moment(d).format('ddd Do MMM');
    },
    pointFillColors: ['#FFFFFF','#ecd636'],
    pointStrokeColors: ['#3a55b1','#ecd636'],
    behaveLikeLine: true,
    hideHover: 'auto',
    gridLineColor: '#000000',
    lineColors: ['#3a55b1','#ecd636'],
    resize: true,
    smooth: false,
    gridTextColor: '#5e7d8a',
    gridTextFamily: "Inherit"
});