#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.
<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 }
}]
};
}
}
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page