Heat Map Chart: Numeric based Mapping

Numeric based heat map charts are created using numeric data for the chart like scentific calculations, temperature data and many more. The chart that we created in Creating a Heat Map Chart page is a numeric based chart. Let's add some more data to the chart and change the color gradient of the entire chart. The chart will look like as under:

The data for the chart above, is as follows:

<chart Caption='Weekly Performance' subCaption='In percentage' xAxisName='Week Days' yAxisName='Companies' >

<dataset>
    
     <set rowId='Google' columnId='Mon' value='68'/>
     <set rowId='Google' columnId='Tue' value='35'/>
     <set rowId='Google' columnId='Wed' value='95'/>
     <set rowId='Google' columnId='Thu' value='17'/>
     <set rowId='Google' columnId='Fri' value='55.98'/>
     
     <set rowId='Yahoo' columnId='Mon' value='0'/>
     <set rowId='Yahoo' columnId='Tue' value='71'/>
     <set rowId='Yahoo' columnId='Wed' value='70'/>
     <set rowId='Yahoo' columnId='Thu' value='63'/>
     <set rowId='Yahoo' columnId='Fri' value='79'/>

     <set rowId='Microsoft' columnId='Mon' value='98'/>
     <set rowId='Microsoft' columnId='Tue' value='48'/>
     <set rowId='Microsoft' columnId='Wed' value='31'/>
     <set rowId='Microsoft' columnId='Thu' value='79'/>
     <set rowId='Microsoft' columnId='Fri' value='39'/>
     
     <set rowId='Symantec' columnId='Mon' value='89'/>
     <set rowId='Symantec' columnId='Tue' value='68'/>
     <set rowId='Symantec' columnId='Wed' value='90'/>
     <set rowId='Symantec' columnId='Thu' value='19'/>
     <set rowId='Symantec' columnId='Fri' value='69'/>
     
     <set rowId='AOL' columnId='Mon' value='58'/>
     <set rowId='AOL' columnId='Tue' value='27'/>
     <set rowId='AOL' columnId='Wed' value='100'/>
     <set rowId='AOL' columnId='Thu' value='70'/>
     <set rowId='AOL' columnId='Fri' value='89'/>

</dataset>

   <colorRange gradient='1' minValue='0' code='57743A' startlabel='Very Bad' endLabel="Very Good">
   
    <color code ='8AA660'  maxValue='30' label='BAD'/>
    <color code ='E5F2D0'  maxValue='70' label='AVERAGE'/>
    <color code ='2A5F55'  maxValue='100' />  
        
   </colorRange>

</chart>  

In the above data, numeric values are provided using the <set> elements' value attribute. The rowId and the columnId attributes are used to specify the cell positions where the values are to be placed. The <colorRange> element is used to specify the lower limit of the numeric range by the minValue attribute. The boolean attribute gradient is set to '1' to show gradient legend in the chart.The code attribute is used to set the starting color for the range. The attributes startLabel and endLabel are used to set the labels for the upper and lower limits of the gradient scale. In the <color> elements the upper limits of the numeric range is defined by the maxValue attribute and the code attribute is used to set the colors for the particular range.

Pre-defined Rows & Columns

In the above example the chart automatically decides the order of rows and columns according to the sequence of the <set> elements. So, the chart is plotting 'Google in the first row, Yahoo in the second and so on.

There is one more method to plot numeric based heat map charts, in which you can provide pre defined order of rows and columns. This will give you the freedom of providing data in any order through the <set> element. The chart will abide by the pre-defined table structure. Let's see the same chart addding pre-defined rows and columns.

The data for this method is shown below:

<chart Caption='Weekly Performance' subCaption='In percentage' xAxisName='Week Days' yAxisName='Companies'>
    
    <rows>
        <row id='Google'/>
        <row id='Yahoo'/>
        <row id='Microsoft'/>
        <row id='Symantec'/>
        <row id='AOL'/>
        
    </rows>

    <columns>

        <column id='MON'/>
        <column id='TUE'/>
        <column id='WED'/>
        <column id='THU'/>
        <column id='FRI'/>
        
    </columns>
    
    <dataset>
    
     <set rowId='Yahoo' columnId='Mon' value='0'/>
     <set rowId='Yahoo' columnId='Tue' value='71'/>
     <set rowId='Yahoo' columnId='Wed' value='70'/>
     <set rowId='Yahoo' columnId='Thu' value='63'/>
     <set rowId='Yahoo' columnId='Fri' value='79'/>
     
     <set rowId='Google' columnId='Mon' value='68'/>
     <set rowId='Google' columnId='Tue' value='35'/>
     <set rowId='Microsoft' columnId='Wed' value='31'/>
     <set rowId='Microsoft' columnId='Thu' value='79'/>
     <set rowId='Google' columnId='Fri' value='55.98'/>
     
     <set rowId='Microsoft' columnId='Mon' value='98'/>
     <set rowId='Microsoft' columnId='Tue' value='48'/>
     <set rowId='Google' columnId='Wed' value='95'/>
     <set rowId='Google' columnId='Thu' value='17'/>
     <set rowId='Microsoft' columnId='Fri' value='39'/>
     
     <set rowId='Symantec' columnId='Mon' value='89'/>
     <set rowId='Symantec' columnId='Tue' value='68'/>
     <set rowId='Symantec' columnId='Wed' value='90'/>
     <set rowId='Symantec' columnId='Thu' value='19'/>
     <set rowId='Symantec' columnId='Fri' value='69'/>
     
     <set rowId='AOL' columnId='Mon' value='58'/>
     <set rowId='AOL' columnId='Tue' value='27'/>
     <set rowId='AOL' columnId='Wed' value='100'/>
     <set rowId='AOL' columnId='Thu' value='70'/>
     <set rowId='AOL' columnId='Fri' value='89'/>

   </dataset>

   <colorRange gradient='1' minValue='0' code='57743A' startlabel='Very Bad' endLabel="Very Good">
    <color code ='8AA660'  maxValue='30' label='BAD'/>
    <color code ='E5F2D0' maxValue='70' label='AVERAGE'/>
    <color code ='2A5F55' maxValue='100' />
   </colorRange>

</chart>

The above data contains two new elements - <rows> and <columns>. These two elements are used to explicitly define the order of rows and columns in a table. The element <rows> is a collection of <row> elements and the element <columns> is a collection of <column> elements. Each row and column is set with an unique ID using the Id attribute through the <row> and <column> elements, respectively. Later on, in the <set> element this unique id is used to map and place tha data in the defined location by the columnId and rowId attributes. For better understanding, we have used data in random order. Still the chart uses the same order which is specified in the <rows> and <columns> elements.

<colorRange> Element

The <colorRange> element is used to specify single color ranges or gradient color scale for a range of numbers.

Single color: When a single color is set in the <colorRange> element then the chart displays a single color icon on the legend for a numeric range. For example, there are three numeric ranges: 0-30, 30-70 and 70-100. The colors red, yellow and green are set for each of the ranges respectively. So, any number greater than or equals to 0 and less than 30 will appear in the color red, any number greater than equals to 30 and less than 70 will appear in the color yellow and any number greater than equals to 70 and less than equals to 100 will appear in the color green.

For more details refer to the Icon Legend page.

Gradient color: When gradient color is used in the <colorRange> element the chart displays a gradient scale on the legend which contains the mixture of one or more colors along with the original colors. For more details refer to the Gradient Legend page.

Providing individual cell colors

You can also set individual colors for a particular cell apart from the colors defined in the <colorRange> element. To do this, you need to use the color attribute within the <set> element. To show this, let's use the same chart and change the color of the first two data plots or cells. The chart will look like as under:

The data for the above chart is as follows:

<chart Caption='Weekly Performance' subCaption='In percentage' xAxisName='Week Days' yAxisName='Companies' >

<dataset>
    
     <set rowId='Google' columnId='Mon' value='68' color='D45FAA'/>
     <set rowId='Google' columnId='Tue' value='35' color='FF9F55'/>
     <set rowId='Google' columnId='Wed' value='95'/>
     <set rowId='Google' columnId='Thu' value='17'/>
     <set rowId='Google' columnId='Fri' value='55.98'/>
     ...
</dataset>
 <colorRange gradient='1' minValue='0' code='57743A' startlabel='Very Bad' endLabel="Very Good">
   
    <color code ='8AA660' maxValue='30' label='BAD'/>
    <color code ='E5F2D0' maxValue='70' label='AVERAGE'/>
    <color code ='2A5F55' maxValue='100' />  
                
   </colorRange>

</chart>
     

In the above data, the color attribute is used in two <set> 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 through the <set> elemeents.