KnockoutJS: Markers plot

Markers plot

You may want to read about general approach to the KnockoutJS support in IDD [here](KnockoutJS support). This page is about specific plot type.

To create marker plot you must create a plot with data-idd-plot="markers" attribute and two mandatory bindings.

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ю The plot will not be drawn until the length is 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"
    });

Interactive sample