javascript - Morris Graph, round y-axis numbers - Stack Overflow

I made a Morris.js graph: /

I do not want to set a value in ymin, I have this on "auto". I now have very long numbers because of that, example: 55.29999999999999 I want that to show just 55.

It would be even better if my graph just showed: 20, 30, 40, 50, 60, 70.

How can I achieve this? I know some HTML/PHP/MySQL but I'm pretty new to JavaScript.

EDIT: Fixed it myself by using: yLabelFormat: function(y) {return y = Math.round(y);},

Any idea how I can get my chart like this: 20,30,40,50,60,70?

Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart-dcr',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [<?php echo $chart_data_dcr; ?>],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'time',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['eff', 'avg', 'rep'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Decred Effective','Decred Average','Decred Reported'],
    lineColors: ['#337ab7','#ffa500','#5cb85c'],
    pointFillColors: ['#337ab7','#ffa500','#5cb85c'],
    pointStrokeColors: ['#337ab7','#ffa500','#5cb85c'],
    pointSize: 3,
    hideHover: true,
    ymax: "auto",
    ymin: "auto",
    // Disables line smoothing
    smooth: false,
    resize: true
});

I made a Morris.js graph: http://thuis.xitro.nl/

I do not want to set a value in ymin, I have this on "auto". I now have very long numbers because of that, example: 55.29999999999999 I want that to show just 55.

It would be even better if my graph just showed: 20, 30, 40, 50, 60, 70.

How can I achieve this? I know some HTML/PHP/MySQL but I'm pretty new to JavaScript.

EDIT: Fixed it myself by using: yLabelFormat: function(y) {return y = Math.round(y);},

Any idea how I can get my chart like this: 20,30,40,50,60,70?

Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart-dcr',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [<?php echo $chart_data_dcr; ?>],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'time',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['eff', 'avg', 'rep'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Decred Effective','Decred Average','Decred Reported'],
    lineColors: ['#337ab7','#ffa500','#5cb85c'],
    pointFillColors: ['#337ab7','#ffa500','#5cb85c'],
    pointStrokeColors: ['#337ab7','#ffa500','#5cb85c'],
    pointSize: 3,
    hideHover: true,
    ymax: "auto",
    ymin: "auto",
    // Disables line smoothing
    smooth: false,
    resize: true
});

• javascript

Share Improve this question Follow edited Jun 28, 2017 at 11:38 Christopher Simmelink asked Jun 28, 2017 at 10:51 Christopher SimmelinkChristopher Simmelink 7177 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

yLabelFormat: function(y) {return y = Math.round(y);},

Fixed it for me.

Now I only would like to know how I can make them look like: 20,30,40,50,60,70.

Use the following code inside Morris.line Graph

yLabelFormat: function(y) { return y = Math.round(y); }

this will format the Y axis labels.