Category based mapping is done by defining several color categories or ranges and setting a specific color category to a cell. We do not need to have numeric values to map to value ranges. Instead, a color-range label is used to map a cell with a color category.
In this section, you will be shown how you can create category-based heat map charts.
As an example, we will create a category-based heat map chart that shows the average temperature, across various seasons, for the top four cities in the U.S.
The category-based heat map chart thus rendered looks like this:
Given below is a brief description of the attributes used to create a category-based heat map chart:
| Attribute Name | Description |
|---|---|
mapByCateory |
It is used to specify whether a category-based heat map chart will be rendered. Setting this attribute to 1 will render a category-based chart, setting it to 0 (default) will render a numeric heat map chart. |
id |
It is used to assign a unique ID for the rows and columns. This attribute belongs to the row and column objects, which in turn belong to the rows and columns objects, respectively. |
label |
It is used to specify the labels to be rendered for the rows, columns, and the legend. This attribute belongs to the row, column, and color objects, which in turn belong to the rows, columns, and colorRange objects.
If the labels for the numeric ranges are not specified, the chart will display the range in place of the labels. For example, 0-5, 5-8.5 and 8.5-10. |
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 rendered 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 render a category-based heat map chart is given below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
{
"chart": {
"theme": "fint",
"caption": "Top 4 US Cities",
"subcaption": "Average temperature (°F) in seasons (2013-14)",
"xAxisName": "Seasons",
"yAxisName": "Cities",
"showPlotBorder": "1",
"mapByCategory": "1"
},
"rows": {
"row": [
{
"id": "NY",
"label": "New York"
},
{
"id": "LA",
"label": "Los Angeles"
},
{
"id": "CH",
"label": "Chicago"
},
{
"id": "HO",
"label": "Houston"
}
]
},
"columns": {
"column": [
{
"id": "wI",
"label": "Winter"
},
{
"id": "SU",
"label": "Summer"
},
{
"id": "SP",
"label": "Spring"
},
{
"id": "AU",
"label": "Autumn"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "LA",
"columnid": "WI",
"value": "60.10",
"colorRangeLabel": "Warm"
},
{
"rowid": "LA",
"columnid": "SP",
"displayValue": "64.5",
"colorRangeLabel": "Warm"
},
{
"rowid": "LA",
"columnid": "SU",
"displayValue": "68.2",
"colorRangeLabel": "Warm"
},
{
"rowid": "LA",
"columnid": "AU",
"displayValue": "65.7",
"colorRangeLabel": "Warm"
},
{
"rowid": "NY",
"columnid": "WI",
"displayValue": "33.7",
"colorRangeLabel": "Freezing"
},
{
"rowid": "NY",
"columnid": "SP",
"displayValue": "57.8",
"colorRangeLabel": "Warm"
},
{
"rowid": "NY",
"columnid": "SU",
"displayValue": "74.49",
"colorRangeLabel": "Hot"
},
{
"rowid": "NY",
"columnid": "AU",
"displayValue": "57.6",
"colorRangeLabel": "Warm"
},
{
"rowid": "CH",
"columnid": "WI",
"displayValue": "22.89",
"colorRangeLabel": "Freezing"
},
{
"rowid": "CH",
"columnid": "SP",
"displayValue": "55.7",
"colorRangeLabel": "Warm"
},
{
"rowid": "CH",
"columnid": "SU",
"displayValue": "72.2",
"colorRangeLabel": "Hot"
},
{
"rowid": "CH",
"columnid": "AU",
"displayValue": "51.6",
"colorRangeLabel": "Warm"
},
{
"rowid": "HO",
"columnid": "WI",
"displayValue": "53.0",
"colorRangeLabel": "Warm"
},
{
"rowid": "HO",
"columnid": "SP",
"displayValue": "72.7",
"colorRangeLabel": "Hot"
},
{
"rowid": "HO",
"columnid": "SU",
"displayValue": "83.3",
"colorRangeLabel": "Hot"
},
{
"rowid": "HO",
"columnid": "AU",
"displayValue": "53.0",
"colorRangeLabel": "Warm"
}
]
}
],
"colorRange": {
"gradient": "0",
"color": [
{
"code": "#6da81e",
"minValue": "0",
"maxValue": "50",
"label": "Freezing"
},
{
"code": "#f6bc33",
"minValue": "50",
"maxValue": "70",
"label": "Warm"
},
{
"code": "#e24b1a",
"minValue": "70",
"maxValue": "85",
"label": "Hot"
}
]
}
}...
In category based heat map charts we can only define a single color for a particular category. Any data set to that category will appear in the color specified for that particular group. It is not possible to use gradient colors in a category based heat map chart.
There! You have now seen how you can create a simple category-based heat map chart.