Loading
Handling Out-of-range Data
If the data values are beyond the numeric ranges defined in the colorRange object, the chart will show blank data plots. For example, the numeric range defined is 0-30, 30-70 and 70-100 and in the data object there are values such as -10 and 123. The chart will display all the data values within the range but will show blank data plots in place of -10 and 123.
A chart with a blank data plot rendered for out-of-range data looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"caption": "Job Happiness Index By Roles",
"subCaption": "Harry's Supermart",
"showValues": "1",
"showBorder": "0",
"showPlotBorder": "1"
},
"rows": {
"row": [
{
"id": "Admin"
},
{
"id": "Accounting"
},
{
"id": "Operations"
},
{
"id": "Marketing"
},
{
"id": "Sales"
}
]
},
"columns": {
"column": [
{
"id": "BC",
"label": "Bakersfield Central"
},
{
"id": "GGH",
"label": "Garden Groove harbour"
},
{
"id": "LAT",
"label": "Los Angeles Topanga"
},
{
"id": "CRD",
"label": "Compton-Rancho Dom"
},
{
"id": "DCS",
"label": "Daly City Serramonte"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "Admin",
"columnid": "BC",
"value": "2",
"showValue": "0"
},
{
"rowid": "Admin",
"columnid": "GGH",
"value": "3",
"showValue": "0"
},
{
"rowid": "Admin",
"columnid": "LAT",
"value": "3",
"showValue": "0"
},
{
"rowid": "Admin",
"columnid": "CRD",
"value": "2",
"showValue": "0"
},
{
"rowid": "Admin",
"columnid": "DCS",
"value": "1",
"showValue": "0"
},
{
"rowid": "Accounting",
"columnid": "BC",
"value": "3",
"showValue": "0"
},
{
"rowid": "Accounting",
"columnid": "GGH",
"value": "2",
"showValue": "0"
},
{
"rowid": "Accounting",
"columnid": "LAT",
"value": "2",
"showValue": "0"
},
{
"rowid": "Accounting",
"columnid": "CRD",
"value": "-1",
"showValue": "0"
},
{
"rowid": "Accounting",
"columnid": "DCS",
"value": "5",
"showValue": "0"
},
{
"rowid": "Operations",
"columnid": "BC",
"value": "3",
"showValue": "0"
},
{
"rowid": "Operations",
"columnid": "GGH",
"value": "3",
"showValue": "0"
},
{
"rowid": "Operations",
"columnid": "LAT",
"value": "4",
"showValue": "0"
},
{
"rowid": "Operations",
"columnid": "CRD",
"value": "3",
"showValue": "0"
},
{
"rowid": "Operations",
"columnid": "DCS",
"value": "3",
"showValue": "0"
},
{
"rowid": "Marketing",
"columnid": "BC",
"value": "2",
"showValue": "0"
},
{
"rowid": "Marketing",
"columnid": "GGH",
"value": "-1",
"showValue": "0"
},
{
"rowid": "Marketing",
"columnid": "LAT",
"value": "5",
"showValue": "0"
},
{
"rowid": "Marketing",
"columnid": "CRD",
"value": "3",
"showValue": "0"
},
{
"rowid": "Marketing",
"columnid": "DCS",
"value": "2",
"showValue": "0"
},
{
"rowid": "Sales",
"columnid": "BC",
"value": "4",
"showValue": "0"
},
{
"rowid": "Sales",
"columnid": "GGH",
"value": "5",
"showValue": "0"
},
{
"rowid": "Sales",
"columnid": "LAT",
"value": "4",
"showValue": "0"
},
{
"rowid": "Sales",
"columnid": "CRD",
"value": "3",
"showValue": "0"
},
{
"rowid": "Sales",
"columnid": "DCS",
"value": "3",
"showValue": "0"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}<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": "Job Happiness Index By Roles",
"subCaption": "Harry's Supermart",
"showValues": "1",
"showBorder": "0",
"showPlotBorder": "1"
},
"rows": {
"row": [{
"id": "Admin"
}, {
"id": "Accounting"
}, {
"id": "Operations"
}, {
"id": "Marketing"
}, {
"id": "Sales"
}]
},
"columns": {
"column": [{
"id": "BC",
"label": "Bakersfield Central"
}, {
"id": "GGH",
"label": "Garden Groove harbour"
}, {
"id": "LAT",
"label": "Los Angeles Topanga"
}, {
"id": "CRD",
"label": "Compton-Rancho Dom"
}, {
"id": "DCS",
"label": "Daly City Serramonte"
}]
},
"dataset": [{
"data": [{
"rowid": "Admin",
"columnid": "BC",
"value": "2",
"showValue": "0"
}, {
"rowid": "Admin",
"columnid": "GGH",
"value": "3",
"showValue": "0"
}, {
"rowid": "Admin",
"columnid": "LAT",
"value": "3",
"showValue": "0"
}, {
"rowid": "Admin",
"columnid": "CRD",
"value": "2",
"showValue": "0"
}, {
"rowid": "Admin",
"columnid": "DCS",
"value": "1",
"showValue": "0"
}, {
"rowid": "Accounting",
"columnid": "BC",
"value": "3",
"showValue": "0"
}, {
"rowid": "Accounting",
"columnid": "GGH",
"value": "2",
"showValue": "0"
}, {
"rowid": "Accounting",
"columnid": "LAT",
"value": "2",
"showValue": "0"
}, {
"rowid": "Accounting",
"columnid": "CRD",
"value": "-1",
"showValue": "0"
}, {
"rowid": "Accounting",
"columnid": "DCS",
"value": "5",
"showValue": "0"
}, {
"rowid": "Operations",
"columnid": "BC",
"value": "3",
"showValue": "0"
}, {
"rowid": "Operations",
"columnid": "GGH",
"value": "3",
"showValue": "0"
}, {
"rowid": "Operations",
"columnid": "LAT",
"value": "4",
"showValue": "0"
}, {
"rowid": "Operations",
"columnid": "CRD",
"value": "3",
"showValue": "0"
}, {
"rowid": "Operations",
"columnid": "DCS",
"value": "3",
"showValue": "0"
}, {
"rowid": "Marketing",
"columnid": "BC",
"value": "2",
"showValue": "0"
}, {
"rowid": "Marketing",
"columnid": "GGH",
"value": "-1",
"showValue": "0"
}, {
"rowid": "Marketing",
"columnid": "LAT",
"value": "5",
"showValue": "0"
}, {
"rowid": "Marketing",
"columnid": "CRD",
"value": "3",
"showValue": "0"
}, {
"rowid": "Marketing",
"columnid": "DCS",
"value": "2",
"showValue": "0"
}, {
"rowid": "Sales",
"columnid": "BC",
"value": "4",
"showValue": "0"
}, {
"rowid": "Sales",
"columnid": "GGH",
"value": "5",
"showValue": "0"
}, {
"rowid": "Sales",
"columnid": "LAT",
"value": "4",
"showValue": "0"
}, {
"rowid": "Sales",
"columnid": "CRD",
"value": "3",
"showValue": "0"
}, {
"rowid": "Sales",
"columnid": "DCS",
"value": "3",
"showValue": "0"
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#2a7faa",
"startLabel": "Not satisfied",
"endLabel": "Love it!"
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the above chart, the cells that represent the job happiness index for the accounting department at Compton-Rancho Dom and the marketing department at Garden Groove Harbour are blank.
Look at the data structure. The data values specified for the accounting department at Compton-Rancho Dom and the marketing department at Garden Groove Harbour fall outside the defined range.
To avoid such blank data plots, you can enable percentage mapping for heat map charts.
Using Percentage Mapping to Handle Out-of-range Data
Percentage mapping is a feature that allows the chart to display the data values in percentage.
A heat map chart with percentage mapping looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"caption": "Distribution of Marks for Students",
"subcaption": "Bell Curve Grading",
"xAxisName": "Subjects",
"yAxisName": "Student Name",
"showPlotBorder": "1",
"valueFontColor": "#ffffff",
"plotTooltext": "Grading : $value"
},
"rows": {
"row": [
{
"id": "JA",
"label": "Jacob"
},
{
"id": "EM",
"label": "Emma"
},
{
"id": "JY",
"label": "Jayden"
},
{
"id": "WL",
"label": "William"
}
]
},
"columns": {
"column": [
{
"id": "EN",
"label": "English"
},
{
"id": "MT",
"label": "Maths"
},
{
"id": "PY",
"label": "Physics"
},
{
"id": "HS",
"label": "History"
},
{
"id": "EC",
"label": "Economics"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "JA",
"columnid": "EN",
"value": "3.7"
},
{
"rowid": "JA",
"columnid": "PY",
"value": "4.3"
},
{
"rowid": "JA",
"columnid": "MT",
"value": "4.0"
},
{
"rowid": "JA",
"columnid": "HS",
"value": "3.3"
},
{
"rowid": "JA",
"columnid": "EC",
"value": "3.1"
},
{
"rowid": "EM",
"columnid": "EN",
"value": "3.6"
},
{
"rowid": "EM",
"columnid": "PY",
"value": "4.0"
},
{
"rowid": "EM",
"columnid": "MT",
"value": "3.2"
},
{
"rowid": "EM",
"columnid": "HS",
"value": "2.6"
},
{
"rowid": "EM",
"columnid": "EC",
"value": "3.2"
},
{
"rowid": "JY",
"columnid": "EN",
"value": "3.8"
},
{
"rowid": "JY",
"columnid": "PY",
"value": "4.1"
},
{
"rowid": "JY",
"columnid": "MT",
"value": "3.9"
},
{
"rowid": "JY",
"columnid": "HS",
"value": "2.6"
},
{
"rowid": "JY",
"columnid": "EC",
"value": "2"
},
{
"rowid": "WL",
"columnid": "EN",
"value": "3.4"
},
{
"rowid": "WL",
"columnid": "PY",
"value": "3.2"
},
{
"rowid": "WL",
"columnid": "MT",
"value": "4"
},
{
"rowid": "WL",
"columnid": "HS",
"value": "2.5"
},
{
"rowid": "WL",
"columnid": "EC",
"value": "3.1"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#00dd77",
"mapByPercent": "1",
"startLabel": "Poor",
"endLabel": "Outstanding"
}
}<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": "Distribution of Marks for Students",
"subcaption": "Bell Curve Grading",
"xAxisName": "Subjects",
"yAxisName": "Student Name",
"showPlotBorder": "1",
"valueFontColor": "#ffffff",
"plotTooltext": "Grading : $value"
},
"rows": {
"row": [{
"id": "JA",
"label": "Jacob"
}, {
"id": "EM",
"label": "Emma"
}, {
"id": "JY",
"label": "Jayden"
}, {
"id": "WL",
"label": "William"
}]
},
"columns": {
"column": [{
"id": "EN",
"label": "English"
}, {
"id": "MT",
"label": "Maths"
}, {
"id": "PY",
"label": "Physics"
}, {
"id": "HS",
"label": "History"
}, {
"id": "EC",
"label": "Economics"
}]
},
"dataset": [{
"data": [{
"rowid": "JA",
"columnid": "EN",
"value": "3.7"
}, {
"rowid": "JA",
"columnid": "PY",
"value": "4.3"
}, {
"rowid": "JA",
"columnid": "MT",
"value": "4.0"
}, {
"rowid": "JA",
"columnid": "HS",
"value": "3.3"
}, {
"rowid": "JA",
"columnid": "EC",
"value": "3.1"
}, {
"rowid": "EM",
"columnid": "EN",
"value": "3.6"
}, {
"rowid": "EM",
"columnid": "PY",
"value": "4.0"
}, {
"rowid": "EM",
"columnid": "MT",
"value": "3.2"
}, {
"rowid": "EM",
"columnid": "HS",
"value": "2.6"
}, {
"rowid": "EM",
"columnid": "EC",
"value": "3.2"
}, {
"rowid": "JY",
"columnid": "EN",
"value": "3.8"
}, {
"rowid": "JY",
"columnid": "PY",
"value": "4.1"
}, {
"rowid": "JY",
"columnid": "MT",
"value": "3.9"
}, {
"rowid": "JY",
"columnid": "HS",
"value": "2.6"
}, {
"rowid": "JY",
"columnid": "EC",
"value": "2"
}, {
"rowid": "WL",
"columnid": "EN",
"value": "3.4"
}, {
"rowid": "WL",
"columnid": "PY",
"value": "3.2"
}, {
"rowid": "WL",
"columnid": "MT",
"value": "4"
}, {
"rowid": "WL",
"columnid": "HS",
"value": "2.5"
}, {
"rowid": "WL",
"columnid": "EC",
"value": "3.1"
}]
}],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#00dd77",
"mapByPercent": "1",
"startLabel": "Poor",
"endLabel": "Outstanding"
}
}
}
);
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 attribute used to enable percentage mapping:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether percentage mapping will be enabled for heat map charts. Setting this attribute to |
When percentage mapping is used, the lowest data value from the JSON data is considered to be the lower limit and will be displayed as 0%; the highest data value is considered as the upper limit and will be displayed as 100%. Color ranges have to be created with 0 as the lower limit and 100 as the upper limit.
You can choose to enable percentage mapping even when all your data values fall within the defined range.
In category based heat map chart, if you provide a category name by the attribute colorRangeLabel through the data element which is not defined in the colorRange element, the chart will show blank dataplot.