Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..
{ "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" } ] } }
{
    "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"
            }
        ]
    }
}
<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: '300',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        }
    }
}
);
    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 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.

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.

Top