KnockoutJS support

Abstract

IDD plots can be controlled with KnockoutJS. The bindings can control entire plot presence, plotted data, as well as individual plot properties.

How to start

1. Source KnocokutJS (ver 3.4.1) in your page
2. Source idd_knockout.js or idd_knockout.min.js
3. Start using bindings

If you prefer samples, there is a group of Knockout related samples here. Place a link here

General approach

Presence or absence of the plot is controlled with default Knockout control flow bindings (e.g. foreach, if)

Plotted data and individual properties are controlled with custom bindings.

Markers plot

Mandatory bindings:

• iddX (number array) - horizontal coordinates data series
• iddY (number array) - vertical coordinates data series

Remark: Length of iddX and iddY must be the same

Optional bindings:

• iddShape (string) - visual shape of the markers

  Allowed values:

  • "box"
  • "circle"
  • "diamond"
  • "cross"
  • "triangle"

• iddColor (string) - the inner color of the marker (e.g. "red","#FF0000", ...)

• iddBorder (string) - the color of the marker border (e.g. "red","#FF0000", ...)

• iddSize (number) - the size of each marker

Source code: View

    <div id="chart" data-idd-plot="chart">
        <div data-idd-plot="markers" data-bind="iddX: X, iddY: Y,iddColor: ActiveColour" />
    </div>

Source code:View Model

    ko.applyBindings({
        X: ko.observable([1,2,3]),
        Y: ko.observable([2,3,1]),
        ActiveColour: "Red"
    });

Sample link

Uncertainty markers plot (Box-and-whisker)

https://en.wikipedia.org/wiki/Box_plot

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)

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
    });

Sample link