KnockoutJS: Bar 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 bar plot you must create a plot with data-idd-plot="markers" attribute and three mandatory bindings.
Mandatory bindings:
- iddShape (string) - must be 'bars'
- iddX (number array) - horizontal coordinates of bar centers
- iddY (number array) - height of the bars
Remark: Length of iddX and iddY must be the same. The plot will not be drawn until the length is the same.
Optional bindings:
- iddColor (string array) - colors of the bars
- iddBarWidth (number) - the width of each bar
- iddShadow (string) - the color of the bar shadow (e.g. 'grey')
Source code: View
<div id="chart" data-idd-plot="chart">
<div data-idd-plot="markers" data-bind="
iddX: X,
iddY: Height,
iddColor: ['red','blue'],
iddBarWidth: 0.9,
iddShadow: 'grey'" />
</div>Source code:View Model
ko.applyBindings({
X: ko.observable([1,2]),
Height: ko.observable([2,3]),
});