Multiple axis [BOUNTY $100] about chart.js HOT 59 CLOSED

check. I just did a clean checkout of the branch and it worked for me :)

For anyone interested ( @rappo maybe? ): this it what it currently looks like:

from chart.js.

I'd like to see multiple scales + the option to have a line/bar combo....

http://nvd3.org/examples/linePlusBar.html

from chart.js.

any news on this?

from chart.js.

+1

from chart.js.

This is a serious game-stopper for me. I have checked the current branch that @Wikunia made, but as it is based on an older version I'm afraid that doesn't work. Would it be possible for someone knowing a lot of the new structure to refactor the code into a doubleline-block for the new Chart.js?

I saw this discussion: #220 ending in 'please rewrite', but couldn't you (@fulldecent ) or maybe @nnnick give a hand here?

from chart.js.

Currently looking at this, can anyone comment on the following idea to quickly implement this.

• change the this.scale to an array containing a scale per dataset
• add a scale for each dataset
• use the right scale per set

I have made a proof-of-concept, which doesn't yet include drawing the scales themselves here:
https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis

the Chart.MultiAxisLine.js is a copy of Chart.Line.js, easiest way to review would probably to look at a diff with that file. I have made a gist of that and you can view it here:

https://cdn.rawgit.com/NanneHuiges/1490655646edd4a6944f/raw/bdbfd0bac471594f5f0eff0a1be3d191ee69fd2e/chart.js.diff.html

from chart.js.

I have made some minor improvements. The axis-of choice is now a property of a dataset. Currently each dataset gets the next axis number, but this makes it ready to add the axis-of-choice for each dataset. This way you can have several datasets with the same axis.

The main feature that is missing is drawing of the scales: currently only the first scale gets drawn. If someone could take a look as how to add that functionality I'd be thankfull.

• branch: https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis
• diff with the Chart.line.js (as it is heavily based on that file)

example:

from chart.js.

I have added a 'right scale' feature, but for some reason the text gets rendered very ugly. The rendering is fine until a certain cutoff point. I've made the padding a bit smaller in this example, so you can see the effect:

I'd really like someone who knows more about canvas to take a quick peak.

(another todo is update/redraw I think, as I haven't checked that out yet).

from chart.js.

I have yet again changed some things. labels now live on the left, you can select what axis get labels and which get strokes. Still hopeing on some interest here.

from chart.js.

@NanneHuiges, thanks it works great, would love to see it pulled into the official repo.

from chart.js.

👍

from chart.js.

+:100:

from chart.js.

+1

from chart.js.

+1 to have this merged in sooner than later!

from chart.js.

+0.5, the current version from NanneHuiges seems to break the legend and the axis on the same side look kind of ugly

from chart.js.

+1

from chart.js.

@nnnick will you ever merge this pr?

from chart.js.

+1

from chart.js.

Not sure wether or not we want this in the core

from chart.js.

Why?

Enviado pelo meu Windows Phone

From: Jakemailto:[email protected]
Sent: ‎29/‎12/‎2014 18:14
To: nnnick/Chart.jsmailto:[email protected]
Cc: Luís Rudgemailto:[email protected]
Subject: Re: [Chart.js] Multiple axis (#17)

Not sure wether or not we want this in the core

Reply to this email directly or view it on GitHub:
#17 (comment)

from chart.js.

@jakesyl I feel like this would be a good feature in the future, but it's definitely needs some sort of discussion first. For example, is there a limit of 2 axes? are you allowed unlimited axes? how do we handle grid lines for multiple axes? Do the 0 points always line up?

from chart.js.

+1 Definitely interested in this, even if it was just an extension

from chart.js.

Any PR's pertaining to this feature?

from chart.js.

@jakesyl at the moment, I'm unaware of any PRs. I think we should try and get a list of requirements before we try and implement all or part of it.

from chart.js.

You can open the PR so we can discuss requirements there

from chart.js.

I have not made a PR at the moment: I ran into problems and was hoping that someone with a bit more insight into the current chart.js could help me figure out (e.g. de labels messing things up, and the way I've implemented the new feature, etc) how to make it better.

There hasn't been any dev with time for that sadly, so the current status is, I think, proof-of-concept ? For instance, the "rendering of labels becomes bold halfway through" issue is completely unexpected for me. Not sure where, how and why that started ;)

from chart.js.

We'd love to see this implemented for a stats page we're building for Bountysource.com. I put a $100 bounty on the issue:

from chart.js.

+1

from chart.js.

To expand on @rappo's comment and the $100 bounty, we're using chart.js on the Bountysource stats page https://www.bountysource.com/stats and would like to utilize a two-axis charts. These are very close: #17 (comment) and #184 (comment)). We would have two lines where one corresponds to a $ scale on the left axis and the other to a # scale on the right axis.

from chart.js.

That is awesome @wkonkel and @rappo. Thanks for the initiative! We actually need an unknown amount of axis, so just two won't fit our solution.

from chart.js.

+1

from chart.js.

Can someone please tell me how to implement @NanneHuiges extension?
I have downloaded from https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis , and it only displays samples pages containing one axis. Any help would be highly appreciated!

from chart.js.

That #220 you refer to is a really old one. If you want to try the images I posted above, use my branch. It's not completely production ready (see e.g. the 'bold' text in the axis) . This is the branch I used to make those images, it's not completely up-to-date with master probably: https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis

from chart.js.

Thank you for your quick reply.
I posted the wrong url, sorry. Updated it shortly after, but not fast enough I can tell. I am using that branch, but I still can't make it work. The Chart.js/samples/line.html for example only displays one axis, what should I do to make two?

from chart.js.

Check out the example for multiple lines: https://github.com/NanneHuiges/Chart.js/blob/feature/MultipleYAxis/samples/multiaxisline.html

I'm not sure anymore, but I assume (hope) I put something in there that works :)

from chart.js.

Nevermind, got it to work:)

from chart.js.

the problem with @NanneHuiges branch is that if i set the canvas CSS to width: 100%, the chart doesnt get resized as in the current Chart.js release

from chart.js.

@jtomasrl could that be because it's an old branch? I have currently not the time to update it, but that shouldn't be too hard

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

UPDATE: The core team is currently working on supporting multiple axes. We're hoping to have it available within the next month.

from chart.js.

+1

from chart.js.

Love it! Can't wait, @derekperkins!

from chart.js.

I can't take any credit for it, this is all @etimberg. This is an early prototype supporting multiple axes on a new scatterplot chart type. It's being tested and support pushed out to the other charts types, so we're on schedule to have it available hopefully by the middle of June.

from chart.js.

Drool

from chart.js.

+1. Looking forward to this

from chart.js.

Huzzah! The first alpha of Chart.js 2.0 has landed and should fix this issue. Check out the release and try it out! We've got a lot of momentum right now, so please help us test so we can launch 2.0 Gold by the end of the month.
https://github.com/nnnick/Chart.js/releases/tag/v2.0-alpha

I'm closing this issue for now, but if you have implementation questions or find bugs, please create a jsfiddle and post the link here and we'll reopen this issue and get it fixed.

Thanks for the bounty! @etimberg - you're going to be a wealthy man. :)

from chart.js.

Awesome!! Downloading and will be testing this week -- THANK YOU core team!!

from chart.js.

👍👍 sick!

from chart.js.

HI @derekperkins, how do we get the second set of values to have their own y axis value labels on the right? Also in a different format would be good (Money for instance)?

http://jsfiddle.net/devonuto/177muxju/18/

from chart.js.

@devonuto - I'm not seeing anything in that jsfiddle. If you look at samples/line-multi-axis.html, you'll see how to implement multiple axes.

@tannerlinsley / @etimberg - I believe there are also callbacks on all the axis labels now that let you customize the display, right?

from chart.js.

@derekperkins it's a modified version of that which I'm using, try this link: https://jsfiddle.net/devonuto/pa7k6xn9/

Edit: It's working for me in firefox, but not chrome
Edit2: Working on Chrome now.

from chart.js.

@devonuto you need to add a yAxisID string that matches the ID of the axis to the dataset. This is an example of it in action.

from chart.js.

@etimberg, thanks but that wasn't the issue. However comparing my code to yours, I had
yAxes: [{ scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "left",

as
yAxes: [{ scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance show: true, position: "left",

Not sure if that was something I changed, or if I had an older version of the line-multi-axis.html. Either way, I have it working now.

from chart.js.

Glad it's working 😄

I think an early dev build had it as show but display seemed more fitting and was closer to the current config.

from chart.js.

@devonuto thank you!

from chart.js.

is this feature still in alpha or is it in the current master branch?

from chart.js.

@derekperkins + @etimberg Thanks!

from chart.js.