KnockoutJS: Area plot
You may want to read about general approach to the KnockoutJS support in IDD here. 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"
});