Round Y-Axis numbers to a Nicer Format

[Radagaisus]

Hi,

So my area chart looks like this:

But the axis numbers are not round and nice numbers people like to see, like 250 and 500. We can tweak this behaviour.

[adampope]

I'd like to see a way to use a function to generate the y labels, or
specify a interval to have them regular as well as simple rounding.

However, the code proposed only changes the label and not the corresponding
data points on the graph, so the graph is incorrect. In the example the
labels have changed but the graph hasn't moved.

On Thursday, January 17, 2013, radagaisus wrote:

Hi,

So my area chart looks like this:

[image: Screen Shot 2013-01-17 at 07 29 57]https://f.cloud.github.com/assets/550061/73886/f6bafcd8-6066-11e2-9ab3-025252d82c7f.png

But the axis numbers are not round and nice numbers people like to see,
like 250 and 500. We can tweak this behaviour with two helpers functions:

round = (x, m) -> Math.round(x / m) * mround_human = (x) ->
len = Math.pow 10, x.toString().length - 2
round x + len, len

And then change drawGrid a bit:

inside Grid's drawGrid:if @options.axes

@r.text(@left - @options.padding / 2, y, round_human Number @yAxisFormat(v))
.attr('font-size', @options.gridTextSize)
.attr('fill', @options.gridTextColor)
.attr('text-anchor', 'end')

To get:

[image: Screen Shot 2013-01-17 at 07 32 42]https://f.cloud.github.com/assets/550061/73890/5bc417a4-6067-11e2-8fbe-3098eeb07900.png

—
Reply to this email directly or view it on GitHubhttps://github.com/oesmith/morris.js/issues/162.

Adam Pope
Technical Director
Storm Consultancy (EU) Ltd

Tel | 01225 580 500
Email | adam@stormconsultancy.co.uk
Web | www.stormconsultancy.co.uk

[oesmith]

Yes, there's definitely scope to improve this code. Fudging the line numbers is not the right answer though. The graph bounds need to be calculated more intelligently and so do the numLines.

[oesmith]

See also #168.

[MLGallagher]

I'm still having issues with this. The gridline for 3 on the y-axis is missing. I downloaded the newest morris.js code from github also. Any thoughts?

[t3chn0r]

Not sure if there's been any work on this but I was looking for an option to only have int numbers on the Y-Axis and couldn't find anything. I'm trying to graph the number of visits a profile had during the last 30 days and numbers on the Y-Axis are coming like [0, 0.3, 0.5, 0.8, 1] when the maximum number of visits for a profile is one.

It's weird seeing these numbers as there will never be a 0.8 visit to a profile...

[oesmith]

I'll add it to my todo list.

FWIW, I'll be uploading a change with new y-axis labelling this weekend,
which I'd appreciate you all testing!
On Thu, Mar 28, 2013 at 5:44 PM, t3chn0r notifications@github.com wrote:

Not sure if there's been any work on this but I was looking for an option
to only have int numbers on the Y-Axis and couldn't find anything. I'm
trying to graph the number of visits a profile had during the last 30 days
and numbers on the Y-Axis are coming like [0, 0.3, 0.5, 0.8, 1] when the
maximum number of visits for a profile is one.

It's weird seeing these numbers as there will never be a 0.8 visit to a
profile...

—
Reply to this email directly or view it on GitHubhttps://github.com/oesmith/morris.js/issues/162#issuecomment-15603301
.

[oesmith]

I've just completed the first round of this work and checked it into master. It'll massage the bounds of the chart to fit a 'friendlier' set of y labels. It won't change the number of grid lines or force non-decimal increments for charts over a very small Y range (like @t3chn0r's problem above), but it should improve rendering for the majority of cases.

Before:

After:

I'll be including this with a v0.4.2 release this week.

[andrewharry]

Just grabbed the latest source code. Yes this is MUCH better!

[MLGallagher]

Awesome dude. The new graphs look great.

[MLGallagher]

Fooled around with it quickly. Not sure if it's my layout but the y-axis is missing parts of the numbers when there is a decimal.

[t3chn0r]

Hi @oesmith, just an update on my previous comment. I was able to "patch" Morris to prevent those fraction numbers in the grid. I did the following, I don't know Coffee script so if you are OK with the changes maybe you or someone else can add the changes to the script:

First of all I created a new parameter named "onlyIntegers" defaulting to "false" to maintain compatibility, so the list of variables now look something like this:

...
numLines: 5,
onlyIntegers: false,
padding: 25,
...

Then around line 257 after the ymax value is calculated I added the following lines:

...
if ( this.options.onlyIntegers ) {
    this.options.numLines = Math.min( this.ymax + 1, this.options.numLines );
}

if (this.options.axes === true || this.options.grid === true) {
...

That small piece of code adjust the number of lines in the grid according to the max value of Y. I have tested these changes with all my graphs and everything is working perfectly now.
Not sure if that change might break something else or not (in the case ymax is not set to auto maybe), I guess you will have a better idea.

Regards,
t3chn0r

[oesmith]

@GrizzlyBearded I've just pushed a fix for the decimal label overflow problem onto master.

@t3chn0r I'm not sure that fix will work everywhere (for example, false origins and negative y-values will cause problems). I'll keep thinking about it.

[oesmith]

I'm going to cut a v0.4.2 release now with the new behaviour, so I'll close this. Lets move the integer Y-labels discussion to issue #221.

[sirNemanjapro]

I have a quick question. How do you change a decimal mark from 1,000.00 (current) to 1.000,00? @oesmith

[t3chn0r]

Something like this perhaps?

yLabelFormat: function (y) {
    var parts = y.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    return parts.join(",");
}

[sirNemanjapro]

Thank you @t3chn0r I will test it.

[bilaalshah]

Can i have created this kind of graph

(https://user-images.githubusercontent.com/5277834/36530130-15de79fa-17dc-11e8-8815-410bd03fe851.jpeg)

But i want to remove the colored area and to be shown like this

https://web.whatsapp.com/1c0c1fa7-78d2-4b20-bc80-8afe74489fc0