Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

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 will load here..
{ "chart": { "caption": "Top Smartphone Ratings", "subcaption": "By Features", "xAxisName": "Features", "yAxisName": "Model", "showplotborder": "1", "xAxisLabelsOnTop": "1", "plottooltext": "
$rowLabel :
{br}Rating : $dataValue{br}$columnLabel : $tlLabel{br}$trLabel", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "bgColor": "#ffffff", "showShadow": "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" } ] } }
{
    "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",
        "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"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '550',
    height: '270',
    dataFormat: 'json',
    dataSource: {
        "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>",

            //Cosmetics
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "bgColor": "#ffffff",
            "showShadow": "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"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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 will load here..
{ "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" } ] } }
{
    "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"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '550',
    height: '270',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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 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.

Top