Bar Chart with Error Bars

[prashant22april]

Hi All,
I urgently require a error bar chart using dc.js. Any help in this area would be highly appreciated. Something similar to the below image I am looking out for:

I am sorry I dont have any code right now to put on jsfiddle. Thank you very much for your help in advance.

[prashant22april]

Hi,
For the ease of use I have created a JSFiddle:
https://jsfiddle.net/prashant22april/3kwvfk1w/
its not working right now but you can definitely have a look upon:
http://dc-js.github.io/dc.js/examples/bar.html

I need an additional functionality over the Bar Chart.

[gordonwoodhull]

It would be nice to incorporate this feature in the library. In the meantime, here is a fiddle demonstrating the use of a renderlet to do this:

http://jsfiddle.net/gordonwoodhull/cw86goxy/26/

(It does need to be a renderlet and not a pretransition, because there is no public API to get the bar width; it's pulling the bar width from the bars themselves after they are in place.)

I may clean this up and add an example, but notably this is missing the math to do incremental removal of values from the variance/standard deviation. And the renderlet code is kind of messy. But hey, it works!

[gordonwoodhull]

[prashant22april]

Hi Gordonwoodhull, Sincere thanks. Actually, I am new to Javascript and AngularJS all together, so not able to extend and explore too much. But you made my life easy. Thanks once again.

[prashant22april]

Hi Gordon, thanks for your help, In addition to Bar Chart, I also require one more variation of the same error bar chart but this time the bars should be Horizontal (can say-Row chart). I am attaching a screenshot for your reference.

Do we have something similar to the above shown sceenshot ? Thanks in advance.

[aaronrudkin]

Related to this but probably much more difficult than the error bars @prashant22april is asking for: it would be nice if linecharts could have "confidence intervals" around them. You can hack on this by using a compositeChart and just adding additional lineCharts for low and high boundaries, but it won't fill properly. areaCharts are also not correct, because they are designed to shade from 0 upwards, not between arbitrary positive values. Ideally lineChart objects could take both a colour and a range for confidence intervals around the core data--and because different confidence measures can be asymmetrical, you'd want to be able to take the full confidence interval as input rather than just the width around the data. Not sure if it makes sense to open a separate issue on this.

[prashant22april]

I support you suggestion but this time requirement is like this only. We have to have a Horizontal Bar Chart with error bars. I have seen many JavaScript libraries providing this bar chart but I can not go with them (policy issues). If we can have anything similar to this would be really great.

[gordonwoodhull]

@aaronrudkin, could you open another issue for that? It's slightly more complicated but it's very similar to series or stacked charts, as you say. I've seen this in ggplot. In general dc.js doesn't do statistics (the box plot is one exception, but I'm not sure if that's the right approach), so we'll have to figure out a way to specify this extra data in a consistent way, and then provide examples calculating the confidence interval in crossfilter.

@prashant22april, policy issues about the source code license? Anyway, yeah, it shouldn't be hard to work up an example for adding similar error bars to the row chart, but I just haven't had time yesterday or today. This is all new stuff for dc.js but it's a flexible framework so it's pretty easy to add it in postprocessing (which is what these renderlets do).

[gordonwoodhull]

Might be solved for you, @prashant22april, but this isn't implemented in the library - and it's a good suggestion. So I'll reopen this.