#Items Mapping

External data source can be mapped with HeatMap using itemsMapping property. It supports 2 kind of data source.

• In TableMapping rows represents an objects in collection, columns represents numerical properties of that object.
• In CellMapping each cell represent an object in collection, this collection is grouped based on specific property to form as rows and columns.

JAVASCRIPT

<div style="margin: 0 auto; text-align: center;width:69%;">
    <ej-heatmap id="heatmap1" width="100%" [itemsMapping]="itemsMapping" [itemsSource]="itemsSource">
        <e-colormappingcollection>
            <e-colormapping [value]="0" color="#8ec8f8" [label]="label">
            </e-colormapping>
            <e-colormapping [value]="100" color="#0d47a1" [label]="label">
            </e-colormapping>
        </e-colormappingcollection>
    </ej-heatmap>

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/components/heatmap/celldatabinding.component.html'
})
export class DefaultComponent {
    margin: Object;
    itemsSource: Array<Object>;
    itemsMapping: Object;
    label: Object;
    constructor() {
        this.margin = { 'left': 25, 'right': 25 };
        let itemsSource = [
            { ProductName: "Vegie-spread", Y2010: 10, Y2011: 15, Y2012: 56, Y2013: 75 },
            { ProductName: "Tofuaa", Y2010: 56, Y2011: 34, Y2012: 93, Y2013: 26 },
            { ProductName: "Alice Mutton", Y2010: 73, Y2011: 12, Y2012: 67, Y2013: 47 },
            { ProductName: "Konbu", Y2010: 24, Y2011: 39, Y2012: 36, Y2013: 67 }];
        this.itemsSource = itemsSource;
        this.itemsMapping = {
            headerMapping:
            {
                "propertyName": "ProductName",
                "displayName": "Product Name",
                columnStyle: { width: 140 }
            },
            columnMapping: [
                {
                    "propertyName": "Y2010",
                    "displayName": "Y2010",
                    columnStyle: { width: 100 }
                },
                {
                    "propertyName": "Y2011",
                    "displayName": "Y2011",
                    columnStyle: { width: 100 }
                },
                {
                    "propertyName": "Y2012",
                    "displayName": "Y2012",
                    columnStyle: { width: 100 }
                },
                {
                    "propertyName": "Y2013",
                    "displayName": "Y2013",
                    columnStyle: { width: 100 }
                }]
        };
    }
}