This repository was archived by the owner on Apr 5, 2025. It is now read-only.
KnockoutJS: Heatmap
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 heatmap plot you must create a plot with data-idd-plot="heatmap" attribute and three mandatory bindings.
Mandatory bindings:
- iddX (number array) - horizontal grid coordinates
- iddY (number array) - vertical grid coordinates
- iddValues ((number array) array) - values to color
Remark: Length of iddX and outer iddValues array must be the same. Length of iddY and inner iddValues arrays must be the same. The plot will not be drawn until the length is the same.
Optional bindings:
- iddOpacity (number) - must be between 0 and 1. 1 is opaque heatmap, 0 is fully transparent
- iddColorPalette (string) - a color palette string. See color palette definition syntax
Source code: View
<div id="chart" data-idd-plot="chart">
<div data-idd-plot="area" data-bind="iddX: X, iddY: Y, iddValues : V" />
</div>Source code:View Model
ko.applyBindings({
X: [1,2],
Y: [2,3,1],
V: [[0,1,0],[1,2,1]]
});