KnockoutJS: Polyline plot

Polyline

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

To create polyline you must create a plot with data-idd-plot="polyline" 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:

• iddStroke (string) - a color of the polyline (e.g. "red","#FF0000",...)

• iddThickness (number) - a thickness of the polyline

• iddLineCap (string) - the shape of polyline ends

  Allowed values:

  • "butt"
  • "round"
  • "square"

• iddLineJoin (string) - the visual form of joints between different polyline segments

  Allowed values:

  • "bevel"
  • "round"
  • "miter"

• iddLineDash (string or [dash_length1,space1,dash_length2,space2,...] array) - to draw a dashed line

  Allowed string values:

  • "dot"
  • "dash"
  • "dash dot"
  • "long dash"
  • "long dash dot"
  • "long dash dot dot"

You may try to open and explore the interactive sample at the bottom of the page to see the visual difference between the options presented above.

Source code: View

    <div id="chart" data-idd-plot="chart">
        <div data-idd-plot="polyline" data-bind="iddX: X, iddY: Y, iddiddStroke: ActiveColour, iddLineJoin: 'round', iddLineCap: 'round', iddLineDash: 'long dash dot dot'" />
    </div>

Source code:View Model

    ko.applyBindings({
        X: ko.observable([1,2,3]),
        Y: ko.observable([2,3,1]),

        ActiveColour : ko.observable("Green"),
        ColoursToChoose: ["Red","Green","Blue","Black"],

        LineCap: ko.observable("butt"),
        LineCapsToChoose: ["butt","round","square"],

        LineJoin: ko.observable("round"),
        LineJoinsToChoose: ["bevel", "round", "miter"],

        LineDashManual: ko.observable([2,2]),
        LineDashManualChoice: [ [2,2], [10, 5], [10, 5, 2, 5], [25, 10], [25, 10, 2, 10], [25, 10, 2, 10, 2, 10] ],

        LineDashWords: ko.observable("dot"),
        LineDashWordsChoice: [ "dot", "dash", "dash dot", "long dash", "long dash dot", "long dash dot dot", "", "3 a 6 7" ]
    });

Interactive sample