Heat Map Chart: Category Based Mapping

Category based mapping is done by defining several color categories or ranges and setting a specific color category to a cell. You do not need to have numeric values to map to value ranges. Instead a category id is used to map a cell with a color category. The category id defined in the <color> element using label attribute. This category id is mapped in the <set> element using categoryId attribute. This process sets color to cells. You can always set a numeric or non-numeric values of each cell to display information.

To show a simple example let's create a part of the periodic table showing only the Metalloids and Other Metals. The chart will look as under:

The data for the chart would be:

<chart caption='Periodic Table' subCaption='Other Metals-Metalloids' xAxisName='Group' yAxisName='Period' canvasBgColor='FFFFFF' mapByCategory='1'>

<colorRange>

  <color code ='CCCCCC' label='Other metals'/>
  <color code ='CCCC99' label='Metalloids'/>

</colorRange>

<dataset>
        
  <set columnId='13' rowId='2' categoryId='Metalloids' displayValue='B'/>
  <set columnId='13' rowId='3' categoryId='Other metals' displayValue='Al'/>
  <set columnId='14' rowId='3' categoryId='Metalloids' displayValue='Si'/>
  <set columnId='13' rowId='4' categoryId='Other metals' displayValue='Ga'/>
  <set columnId='14' rowId='4' categoryId='Metalloids' displayValue='Ge'/>
  <set columnId='15' rowId='4' categoryId='Metalloids' displayValue='As'/>
  <set columnId='13' rowId='5' categoryId='Other metals' displayValue='In'/>
  <set columnId='14' rowId='5' categoryId='Other metals' displayValue='Sn'/>
  <set columnId='15' rowId='5' categoryId='Metalloids' displayValue='Sb'/>
  <set columnId='16' rowId='5' categoryId='Metalloids' displayValue='Te'/>
  <set columnId='13' rowId='6' categoryId='Other metals' displayValue='Tl'/>
  <set columnId='14' rowId='6' categoryId='Other metals' displayValue='Pb'/>
  <set columnId='15' rowId='6' categoryId='Other metals' displayValue='Bi'/>
  <set columnId='16' rowId='6' categoryId='Metalloids' displayValue='Po'/>

</dataset>

</chart>
    

• A new attribute mapByCategory has been added in <chart>. For category based mapping it is mandatory to set this attribute to '1'
• The <colorRange> element is used to define different categories through the <color> elements
• The label attribute is used to specify the id of the category and the code attribute is used to set the color in which the category will be displayed
• Then, through the <set> elements the same category ids are specified through categoryId attribute to map with the colors defined in the <color> elements
• The rowId attribute is used to specify the position of rows where the data plots are placed
• The columnId attribute is used to specify the position of columns where the data plots are to be placed
• To display a value or text in the data plot the displayValue attribute is used. You can also use the following attributes:   
  • value : Displays numeric values which can be formatted using Number formatting settings
  • tlLabel : Displays as text at the top left corner of the cell
  • trLabel : Displays as text at the top right corner of the cell
  • blLabel : Displays as text at the bottom left corner of the cell
  • brLabel : Displays as text at the bottom right corner of the cell

  For more details view the Labels page.

Color Range

In category based heat map charts you 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.

Providing individual cell color

The data for the above chart is given below:

<chart caption='Periodic Table' subCaption='Other Metals-Metalloids' xAxisName='Group' yAxisName='Period' canvasBgColor='FFFFFF' mapByCategory='1' >

<colorRange>

<color code ='CCCCCC' label='Other metals'/>
<color code ='CCCC99' label='Metalloids'/>

</colorRange>

<dataset>
                
  <set columnId='13' rowId='2' categoryId='Metalloids' displayValue='B' color='7F7F00'/>
  <set columnId='13' rowId='3' categoryId='Other metals' displayValue='Al' color='7FBFAA'/>
  <set columnId='14' rowId='3' categoryId='Metalloids' displayValue='Si'/>
  <set columnId='13' rowId='4' categoryId='Other metals' displayValue='Ga'/>
  <set columnId='14' rowId='4' categoryId='Metalloids' displayValue='Ge'/>
  <set columnId='15' rowId='4' categoryId='Metalloids' displayValue='As'/>
  <set columnId='13' rowId='5' categoryId='Other metals' displayValue='In'/>
  <set columnId='14' rowId='5' categoryId='Other metals' displayValue='Sn'/>
  <set columnId='15' rowId='5' categoryId='Metalloids' displayValue='Sb'/>
  <set columnId='16' rowId='5' categoryId='Metalloids' displayValue='Te'/>
  <set columnId='13' rowId='6' categoryId='Other metals' displayValue='Tl'/>
  <set columnId='14' rowId='6' categoryId='Other metals' displayValue='Pb'/>
  <set columnId='15' rowId='6' categoryId='Other metals' displayValue='Bi'/>
  <set columnId='16' rowId='6' categoryId='Metalloids' displayValue='Po'/>

</dataset>

</chart>   
     

In the above data, the color attribute is used in two <set> elements to define different colors for these cells. These two colors are different from the colors defined in the <colorRange> element. The transparency of the colors can also be controlled by using the alpha attribute through the <set> elements.