Loading
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:
Given below is a brief description of the attributes used to create a simple numeric heat map chart:
| Attribute Name | Description |
|---|---|
|
It is used to refer to the unique ID of the row in which the data has to be entered. |
|
It is used to refer to the unique ID of the column in which the data has to be entered. |
|
It is used to specify the data value to be entered in a cell. |
|
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. |
|
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. |
|
It is used to specify the minimum value that can be plotted on the chart. |
|
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:
{
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [
{
"data": [
{
"rowid": "Samsung Galaxy S5",
"columnid": "Processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Screen Size",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Battery Backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Camera",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC One (M8)",
"columnid": "Processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC One (M8)",
"columnid": "Screen Size",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC One (M8)",
"columnid": "Price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC One (M8)",
"columnid": "Battery Backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC One (M8)",
"columnid": "Camera",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Screen Size",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Battery Backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Camera",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Screen Size",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Battery Backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Camera",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorrange": {
"gradient": "0",
"minvalue": "0",
"code": "E24B1A",
"startlabel": "Poor",
"endlabel": "Good",
"color": [
{
"code": "E24B1A",
"minvalue": "1",
"maxvalue": "5",
"label": "Bad"
},
{
"code": "F6BC33",
"minvalue": "5",
"maxvalue": "8.5",
"label": "Average"
},
{
"code": "6DA81E",
"minvalue": "8.5",
"maxvalue": "10",
"label": "Good"
}
]
}
}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:
| Attribute Name | Description |
|---|---|
|
It is used to define the unique ID for a data item. When defining a row entry, this attribute is used with the |
|
It is used to define the label for a data item. When defining a row entry, this attribute is used with the |
The data structure needed to pre-define rows and columns is given below:
{
"chart": {
"theme": "fint",
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showPlotBorder": "1"
},
"rows": {
"row": [
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "price",
"label": "Price"
},
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "backup",
"label": "Battery Backup"
},
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tlLabel": "Dual Core",
"trLabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tlLabel": "4 inch",
"trLabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tlLabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tlLabel": "10 Hrs",
"trLabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tlLabel": "8 MP",
"trLabel": "Front Camera : 1.2 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tlLabel": "Quad Core 2.3 GHz",
"trLabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tlLabel": "5 inch",
"trLabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tlLabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tlLabel": "20 Hrs",
"trLabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tlLabel": "4 MP",
"trLabel": "Front Camera : 5 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tlLabel": "Quad Core 2.2 GHz",
"trLabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tlLabel": "6 inch",
"trLabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tlLabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tlLabel": "27 Hrs",
"trLabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tlLabel": "20MP",
"trLabel": "Front Camera : 1.2 MP"
},
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tlLabel": "Quad Core 2.5 GHz",
"trLabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tlLabel": "5.1 inch",
"trLabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tlLabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tlLabel": "29 Hrs",
"trLabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tlLabel": "16 MP",
"trLabel": "Front Camera : 2.1 MP"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "7",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "7",
"maxValue": "10",
"label": "Good"
}
]
}
}Configuring Colors for Individual Cells
Given below is a brief description of the attribute used to configure colors for individual cells:
| Attribute Name | Description |
|---|---|
|
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 |
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.