KnockoutJS: Uncertainty markers plot (Box and whisker)
https://en.wikipedia.org/wiki/Box_plot
You may want to read about general approach to the KnockoutJS support in IDD [here](KnockoutJS support). This page is about specific marker plot type.
To create box plot you must create marker plot and bind its shape to the special value: boxwhisker
Mandatory bindings:
- iddShape - must be "boxwhisker" string
- iddX (number array) - horizontal coordinates data series
- iddYMedian (number array) - median values data series
- iddUpper95 (number array) - upper 95% values data series (e.g. upper whisker)
- iddUpper68 (number array) - upper 68% values data series (e.g. top of the box)
- iddLower68 (number array) - lower 68% values data series (e.g. bottom of the box)
- iddLower95 (number array) - lower 95% values data series (e.g. lower whisker)
Remark: the length of all of the arrays above must be the same. The plot will not be drawn until the length is the same.
Optional bindings:
- iddSize (number) - a size in pixels, same for all markers
- iddColor (string) - box color (same for all markers)
- iddBorder (string) - box border and whiskers color (same for all markers)
Source code: View
<div id="chart" data-idd-plot="chart">
<div data-idd-plot="markers"
data-bind="
iddX:X,
iddYMedian: Median,
iddLower95: Lower95,
iddLower68: Lower68,
iddUpper68: Upper68,
iddUpper95: Upper95,
iddShape: BoxShape,
iddSize: BoxSize
">
</div>
</div>Source code:View Model
ko.applyBindings({
X: ko.observable([1,2,3]),
Lower95: ko.observable([0,3,1]),
Lower68: ko.observable([1,4,2]),
Median: ko.observable([2,5,3]),
Upper68: ko.observable([3,6,4]),
Upper95: ko.observable([4,7,5]),
BoxShape: "boxwhisker",
BoxSize: 15
});