Items Mapping

13 Feb 201814 minutes to read

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.

Let us see the difference between two types of mapping. Following table represents two different data structure to represent the same HeatMap.

CellMapping TableMapping
  • JS
    • var itemSource = [
                    { Year: "2010", ProductName: "Veggie-spread", Value: 64 },
                    { Year: "2010", ProductName: "Tofu", Value: 26 },
                    { Year: "2010", ProductName: "Alice Mutton", Value: 47 },
                    { Year: "2010", ProductName: "Donut", Value: 67 },

                    { Year: "2011", ProductName: "Veggie-spread", Value: 56 },
                    { Year: "2011", ProductName: "Tofu", Value: 93 },
                    { Year: "2011", ProductName: "Alice Mutton", Value: 67 },
                    { Year: "2011", ProductName: "Donut", Value: 36 },

                    { Year: "2012", ProductName: "Veggie-spread", Value: 15 },
                    { Year: "2012", ProductName: "Tofu", Value: 34 },
                    { Year: "2012", ProductName: "Alice Mutton", Value: 12 },
                    { Year: "2012", ProductName: "Donut", Value: 39 },

                    { Year: "2013", ProductName: "Veggie-spread", Value: 24 },
                    { Year: "2013", ProductName: "Tofu", Value: 73 },
                    { Year: "2013", ProductName: "Alice Mutton", Value: 56 },
                    { Year: "2013", ProductName: "Donut", Value: 10 }
                ];
  • JS
    • var itemsSource = [
                    { ProductName: "Veggie-spread", Y2010: 10, Y2011: 15, Y2012: 56, Y2013: 75 },
                    { ProductName: "Tofu", Y2010: 56, Y2011: 34, Y2012: 93, Y2013: 26 },
                    { ProductName: "Alice Mutton", Y2010: 73, Y2011: 12, Y2012: 67, Y2013: 47 },
                    { ProductName: "Donut", Y2010: 24, Y2011: 39, Y2012: 36, Y2013: 67 }
                ];
    Here, a single `ProductInfo` object represent a value for a particular product in a particular year Here, a single `ProductInfo` object represents value for a particular product from year 2010 to 2015.
  • JS
    • $("#heatmap").ejHeatMap({
                    itemsMapping: {
                        column: { "propertyName": "Year", "displayName": "Product Name" },
                        row: { "propertyName": "ProductName", "displayName": "ProductName", },
                        value: { "propertyName": "Value" },
                        headerMapping: { "propertyName": "ProductName", "displayName": "ProductName", columnStyle: { width: 140 } },
                        columnMapping: [
                            { "propertyName": "2010", "displayName": "Y2010", columnStyle: { width: 100 } },
                            { "propertyName": "2011", "displayName": "Y2011", columnStyle: { width: 100 } },
                            { "propertyName": "2012", "displayName": "Y2012", columnStyle: { width: 100 } },
                            { "propertyName": "2013", "displayName": "Y2013", columnStyle: { width: 100 } }
                        ]
                    }
                });
    		 * The [row](/api/js/ejheatmap#members:itemsmapping-row "row") [propertyName](/api/js/ejheatmap#members:itemsmapping-row-propertyname "propertyName") property is used to bind the row with specific field which is in datasource collection. The row [displayName](/api/js/ejheatmap#members:itemsmapping-row-displayname "displayName") property is used to specify your own name for row. * The [column](/api/js/ejheatmap#members:itemsmapping-column "column") [propertyName](/api/js/ejheatmap#members:itemsmapping-column-propertyname "propertyName") property is used to bind the column with specific field which is in datasource collection. The column [displayName](/api/js/ejheatmap#members:itemsmapping-column-displayname "displayName") property is used to specify your own name for column. * The [value](/api/js/ejheatmap#members:itemsmapping-value "value") [propertyName](/api/js/ejheatmap#members:itemsmapping-value-propertyname "propertyName") property is used to bind the heatmap column with specified data.
  • JS
    • $("#heatmap").ejHeatMap({
                    colorMappingCollection: colorMappingCollection,
                    isResponsive: true,
                    width: "540",
                    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 } }
                        ]
                    }
                });
    ![](Items-Mapping_images/ItemsMapping_img1.png) ![](Items-Mapping_images/ItemsMapping_img1.png)

    Mapping

    HeaderMapping

    • The headerMapping property allows you to bind the header column(first column) with specific field defined in user DataSource.

    • The headerMapping propertyName property is used to bind the specific field of datasource collection in it.

    • The headerMapping displayName property allows you to set name for an header.

    ColumnMapping

    • The columnMapping property allows you to bind the columns with user defined data.

    • The columnMapping propertyName property is used to bind the heatmap columns with specified data.

    • The columnMapping displayName property is used to specify the column name.

    Appearance

    • To Align the text of an individual heatmap column, columnStyle use textAlign property and to align text for an entire heatmap column, use defaultColumnStyle, textAlign.

    • The columnStyle width property is used to define the width for a particular heatmap column.

    • The columnStyle headerTemplateID is used to add the template within the header element of the particular column.

    • The columnStyle templateID property is used to set an templateId for individual heatmap column. To set an template id for all heatmap columns, use defaultColumnStyle templateID property.

    • To customize the header column, use headerMapping columnStyle property.

    • To hide the cell content, use heatmapCell showContent property as hidden and use showColor property to specify whether the cell color can be visible or not.

    Virtualization

    Virtualization support is used to render large number of records in Heatmap with effective performance. This mode can be enabled by setting enableVirtualization property as true.

    Responsive

    The heatmap control has support for the responsive behavior based on client browser’s width and height. To enable responsive, isResponsive property should be set as true.