KnockoutJS: Heatmap

Heatmap 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 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]]
    });

Interactive sample