Numeric heat map charts are created using numeric data for the chart for scientific calculations, temperature data, and many more.

In this section, you will be shown how you can:

• Create a simple numeric heat map chart

• Define the order of rows and columns

• Configure colors for individual cells

Creating a Simple Numeric Heat Map Charts

As an example, we will create a simple numeric heat map chart to plot the ratings for various brands of smartphones based on their features.

The following data will be used to create the chart:

The following data will be used to categorize the rating for a feature as bad, average, and good:

The numeric heat map chart thus rendered looks like this:

Given below is a brief description of the attributes used to create a simple numeric heat map chart:

The data structure needed to create a simple numeric heat map chart looks like this:

• JSON
• XML

Defining the Order of Rows and Columns

In the above example, the chart automatically decides the order of rows and columns according to the sequence in which they are defined for the data object. So, the chart is plotting 'Samsung Galaxy S5' in the first row, 'HTC One (M8)' in the second, and so on.

There is one more method to plot numeric based heat map charts that allows you to pre-define the order of rows and columns. This will give you the freedom of providing data in any order through the data object. The chart will abide by the pre-defined table structure.

The above chart with pre-defined rows and columns looks like this:

Given below is a brief description of the attributes used to pre-define rows and columns:

The data structure needed to pre-define rows and columns is given below:

• JSON
• XML

Configuring Colors for Individual Cells

Given below is a brief description of the attribute used to configure colors for individual cells:

Given below is a code snippet that shows how you can configure colors for individual cells:

{
    "chart": {
            ...
    },
    "dataset": [
        {
            "data": [
                {
                    "rowid": "SGS5",
                    "columnid": "processor",
                    "value": "8.7",
                    "tllabel": "Quad Core 2.5 GHz",
                    "trlabel": "OS : Android 4.4 Kitkat",
                    "color": "#d45faa"
                }, {
                    "rowid": "SGS5",
                    "columnid": "screen",
                    "value": "8.5",
                    "tllabel": "5.1 inch",
                    "trlabel": "AMOLED screen",
                    "color": "#ff9f55"
                },
                ...
            ]
        }
    ],
    ...
}

In the above data, the color attribute is used in two data elements to apply different colors for the first two cells of the chart. These two colors are different from the colors defined in the colorRange element. The transparency of the cell can also be controlled by using the alpha attribute with data object.

There! You have now seen how you can create a numeric heat map chart.