KnockoutJS: Uncertainty markers plot (Petals and BullEye)

Uncertainty markers plot (Petals)

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 petals plot you must create marker plot and bind its shape to the special value: petals

Mandatory bindings:

• iddShape - must be "petals" string
• iddX (number array) - horizontal coordinates data series
• iddY (number array) - vertical coordinates data series
• iddUpper95 (number array) - upper bound of uncertain values data series
• iddLower95 (number array) - lower bound of uncertain values data series

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.

Source code: View

    <div id="chart" data-idd-plot="chart">
        <div data-idd-plot="markers"
                data-bind="
                iddX: X,
                iddY: Y,
                iddLower95: Lower95,
                iddUpper95: Upper95">
        </div>
    </div>

Source code:View Model

    ko.applyBindings({
        X: ko.observable([1,2,3]),
        Y: ko.observable([3,1,2]),
        Lower95: ko.observable([0,3,1]),
        Upper95: ko.observable([4,4,5]),
        BoxShape: "petals"
    });

Interactive sample

Uncertainty markers plot (BullEye)

To create bull-eye plot you must create marker plot and bind its shape to the special value: bulleye

Mandatory bindings:

• iddShape - must be "bulleye" string
• iddX (number array) - horizontal coordinates data series
• iddY (number array) - vertical coordinates data series
• iddUpper95 (number array) - upper bound of uncertain values data series
• iddLower95 (number array) - lower bound of uncertain values data series

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.

Source code: View

    <div id="chart" data-idd-plot="chart">
        <div data-idd-plot="markers"
                data-bind="
                iddX: X,
                iddY: Y,
                iddLower95: Lower95,
                iddMedian: Median,
                iddUpper95: Upper95">
        </div>
    </div>

Source code:View Model

    ko.applyBindings({
        X: ko.observable([1,2,3]),
        Y: ko.observable([3,1,2]),
        Lower95: ko.observable([0,3,1]),
        Median: ko.observable([1,3.5,3]),
        Upper95: ko.observable([4,4,5]),
        BoxShape: "bulleye"
    });

Interactive sample