novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.22k stars 2.14k forks source link

Error bars having magnitude less than minimum of chart domain #1504

Open mackler opened 8 years ago

mackler commented 8 years ago

I am quite new to Nvd3 so forgive me if I am way off-base here.

I am trying, simultaneously, (1) to display error bars on a multi-bar-horizontal-chart, and (2) to set the lowest value displayed (on the Y-axis) to something greater than 1. It seems, then, that if the magnitude of an error bar is less than that lowest value then the error bar is not displayed.

Taking a first look at the multiBarHorizontal.js file, I understand that the code that generates the coordinates for error bars on line 210 uses the same scale for calculating the error-bar coordinates as is used for calculating the main bar coordinates, thus any value less than the lowest value of the y-domain will scale to zero:

xerr = xerr.map(function(e) { return y(e) - y(0); });

The function in question is named y() in the line 210 reproduced above.

If my understanding is correct, then this seems like a problem that means that positive error bars will only be displayed on a chart that includes zero on its y-axis, and similarly, negative error bars will require the chart include negative values along the y-axis. One might characterize such a problem as a "bug."

If I am misunderstanding the situation, then I will thankfully accept correction and any assistance in making my error-bars--both positive and negative--display on a horizontal bar chart whose y-axis covers only positive values and excludes zero.

mackler commented 8 years ago

Here is a suggestion for a corrective change. Modify line 201 from:

xerr = xerr.map(function(e) { return y(e) - y(0); });

to:

xerr = xerr.map(function(e) { return y(e + ((getY(d,i) < 0) ? 0 : getY(d,i))) - y(0); });

and modify line 216 from:

return 'translate(' + (getY(d,i) < 0 ? 0 : y(getY(d,i)) - y(0)) + ', ' + mid + ')'

to:

return 'translate(0, ' + mid + ')';

I am very new to this code, so someone with experience should confirm this is on the right track. If so, I'll be happy to submit a pull-request.

Comments?

Updated 11 February 2016 after noticing a problem with originally-suggested fix

Melkaz commented 8 years ago

Wow, thanks a lot for your help :) Though, there is still a glitch on my end for the longest bar

Here is what I have: https://plnkr.co/edit/i8tFfZYE5lRQ2VOKKH7D?p=preview

Thanks,

Melkaz commented 8 years ago

Looks like this behaviour happened with the version 1.8.1-dev built on 2016-01-24 cf34d6b77787296083c6b738ab8d1872322fbc7f So, with the nvd3 version 1.8.1-dev built on 2015-09-10, the error bars are correctly displayed.

Sorry, I'm not familiar enough with git to be able to find what actually changed between those builds and pinpoint the source or the issue.

mackler commented 8 years ago

Thanks for the response. You raise two issues: a remaining glitch and the date range within which the problem originated.

To your first point:

For some reason I am unable to look at your example. I've tried in Chrome (actually chromium) and Firefox (actually Iceweasel). Both give me a blank panel. The penultimate version displays in Chrome only. Do I need to do something to get it to run? (I'm a JavaScript novice).

If I can see what you are talking about, then I will be happy to try to understand and hopefully to fix it.

To your second point

I am unclear how you determined the date range where the problem arose, nor am I a git expert. However, doing git log and looking at the dates, I see that commit b5d71342f060fe1fb35e553ab69c02002fe1800e was on January 26, which you say is later that the date when the problem arose and f8935e6d0df71b3f512806f310070540786de51d was January 9th last year, which is earlier.

You can see all the changes between those two commits with:

git diff b5d71342f060fe1fb35e553ab69c02002fe1800e f8935e6d0df71b3f512806f310070540786de51d

but there are many commits between those two and that's a lot of noise to pick through.

What I did was to revert to the earlier of those two commits and run my application to see if I have the problem that originally got my attention. What I see is that (a) the error bars look correct, but (2) the data bars are incorrect, extending off the edge of the chart into the margin all the way to where the zero value on the Y-axis would be if the chart extended that far.

Based on this limited information (and my limited knowledge) my best guess is that a change was made to fix the problem with the data bars that inadvertently caused the problem with the error bars. This suggests that merely reverting to a previous version will be swapping one problem for another.

Conclusion

It would be nice if someone who knows more than either of us would come along and hand us an easy fix. The next best alternative might be for us to solve the glitch that you are referring to and then to submit a pull request, expecting that doing so will get the review of better experts and hopefully incorporation into the distributed version.

So again, if you can look at your plnkr example in a couple browsers and confirm that it's working, I will try to look at it again to see what the glitch is that you are talking about.

Thanks again.