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