Creating Numeric Heat Map Charts

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:

Smartphone Ratings Processor Screen Size Price Battery Backup Camera
Samsung Galaxy S5 Quad Core 2.5 GHz 5.1 inch $600 29 Hrs 16 MP
HTC One (M8) Quad Core 2.3 GHz 5 inch $600 20 Hrs 5 MP
Apple iPhone 5S Dual Core 4 inch $649 10 Hrs 8 MP
Nokia Lumia 1520 Quad Core 2.2 GHz 6 inch $470 27 Hrs 20MP

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

Numeric Range Label Color
1-5 Bad "#e24b1a"
5-8.5 Average "#f6bc33"
8.5-10 Good "#6da81e"

The numeric heat map chart thus rendered looks like this:

FusionCharts should load here..

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

Attribute Name Description
rowID It is used to refer to the unique ID of the row in which the data has to be entered.
columnID It is used to refer to the unique ID of the column in which the data has to be entered.
value It is used to specify the data value to be entered in a cell.
tlLabel, trLabel, blLabel, brLabel They are used to specify the labels to be displayed at the top-left, top-right, bottom-left, and bottom-right corners, respectively, of the data plot.
code It is used to specify the hex code for the color that represents a particular range. For example, to show cells with good ratings in the green color, you can use the hex code #e24b1a.
minValue It is used to specify the minimum value that can be plotted on the chart.
maxValue It is used to specify the maximum value that can be plotted on the chart.

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

...

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:

FusionCharts should load here..

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

Attribute Name Description
id It is used to define the unique ID for a data item. When defining a row entry, this attribute is used with the row object, which belongs to the rows object. When defining a column entry, this attribute is used with the column object, which belongs to the columns object.
label It is used to define the label for a data item. When defining a row entry, this attribute is used with the row object, which belongs to the rows object. When defining a column entry, this attribute is used with the column object, which belongs to the columns object.

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

...

Configuring Colors for Individual Cells

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

Attribute Name Description
color It is used to define the hex code for the color that will be used to applied to a cell. This attribute is used with the data object, which belongs to the dataset object.

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.