This repository was archived by the owner on Apr 5, 2025. It is now read-only.
KnockoutJS: Area 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 area plot you must create a plot with data-idd-plot="area" attribute and three mandatory bindings.
Mandatory bindings:
- iddX (number array) - horizontal coordinates data series
- iddY1 (number array) - vertical coordinates of lower area bound
- iddY2 (number array) - vertical coordinates of upper area bound
Remark: Length of iddX, iddY1 and iddY2 must be the same. The plot will not be drawn until the length is the same.
Optional bindings:
- iddFill (string) - the fill color of the area (e.g. "red","#FF0000", ...)
Source code: View
<div id="chart" data-idd-plot="chart">
<div data-idd-plot="area" data-bind="iddX: X, iddY1: Y1, iddY2: Y2, iddFill : ActiveColour" />
</div>Source code:View Model
ko.applyBindings({
X: ko.observable([1,2,3]),
Y1: ko.observable([2,3,1]),
Y2: ko.observable([3,5,2]),
ActiveColour: "Red"
});