Radar Chart
A radar chart (also known as a spider chart) is a visual interpretation of data bearing multiple dimensions. With the radial grid like structure, the chart displays the values of different categories on its axis. Radar charts are primarily used as a data comparison tool to visually correlate and contrast entities over its diverse aspects such as growth against benchmarks, progress over several criteria, etc. Radar charts can be plotted for a single dataset (single-series radar chart) or multiple datasets (multi-series radar chart).
Common application areas for radar charts include:
-
Business performance
-
Quality analysis
-
Product comparison
In this section, you will be shown how you can:
Creating a Single-series Radar Chart
As an example, we will create a radar chart that plots the results of a customer feedback survey based on five categories. The radar chart will be used to compare the results for each category and determine what service needs improvement.
The radar chart thus created looks like this:
{
"chart": {
"caption": "Store rating across parameters",
"subCaption": "Based on customer feedback survey",
"numberPreffix": "$",
"theme": "fint",
"radarfillcolor": "#ffffff"
},
"categories": [
{
"category": [
{
"label": "Ambience"
},
{
"label": "Product Assortment"
},
{
"label": "Price Competitiveness"
},
{
"label": "Service"
},
{
"label": "Recommend to others"
}
]
}
],
"dataset": [
{
"seriesname": "User Ratings",
"data": [
{
"value": "3.5"
},
{
"value": "4.8"
},
{
"value": "3.1"
},
{
"value": "4.0"
},
{
"value": "3.6"
}
]
}
]
}<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: 'radar',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store rating across parameters",
"subCaption": "Based on customer feedback survey",
"numberPreffix": "$",
"theme": "fint",
"radarfillcolor": "#ffffff",
},
"categories": [{
"category": [{
"label": "Ambience"
}, {
"label": "Product Assortment"
}, {
"label": "Price Competitiveness"
}, {
"label": "Service"
}, {
"label": "Recommend to others"
}]
}],
"dataset": [{
"seriesname": "User Ratings",
"data": [{
"value": "3.5"
}, {
"value": "4.8"
}, {
"value": "3.1"
}, {
"value": "4.0"
}, {
"value": "3.6"
}]
}]
}
}
);
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 radar chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the label for a data item. The label appears on the x-axis. This attribute belongs to the |
|
It is used to specify the numerical value for a data item. This value will be plotted on the chart. This attribute belongs to the |
|
It is used to specify the series name for a data-set. This attribute belongs to the |
Creating a Multi-series Radar Chart
As an example, we will create a multi-series radar chart for the budget analysis for the current month for the five key departments at a store. For each department, we will plot the allocated budget and the actual cost. This will help to determine how accurate the budget estimation at the beginning of the month was - whether the budget was over-allocated, under-allocated, or correctly allocated.
The radar chart thus created looks like this:
{
"chart": {
"caption": "Budget Analysis",
"subCaption": "Current month",
"numberPreffix": "$",
"theme": "fint",
"radarfillcolor": "#ffffff"
},
"categories": [
{
"category": [
{
"label": "Marketing"
},
{
"label": "Product Management"
},
{
"label": "Customer Service"
},
{
"label": "Human Resources"
},
{
"label": "Sales & Distribution"
}
]
}
],
"dataset": [
{
"seriesname": "Allocated Budget",
"data": [
{
"value": "19000"
},
{
"value": "16500"
},
{
"value": "14300"
},
{
"value": "10000"
},
{
"value": "9800"
}
]
},
{
"seriesname": "Actual Cost",
"data": [
{
"value": "6000"
},
{
"value": "9500"
},
{
"value": "11900"
},
{
"value": "8000"
},
{
"value": "9700"
}
]
}
]
}<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: 'radar',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Budget Analysis",
"subCaption": "Current month",
"numberPreffix": "$",
"theme": "fint",
"radarfillcolor": "#ffffff"
},
"categories": [{
"category": [{
"label": "Marketing"
}, {
"label": "Product Management"
}, {
"label": "Customer Service"
}, {
"label": "Human Resources"
}, {
"label": "Sales & Distribution"
}]
}],
"dataset": [{
"seriesname": "Allocated Budget",
"data": [{
"value": "19000"
}, {
"value": "16500"
}, {
"value": "14300"
}, {
"value": "10000"
}, {
"value": "9800"
}]
}, {
"seriesname": "Actual Cost",
"data": [{
"value": "6000"
}, {
"value": "9500"
}, {
"value": "11900"
}, {
"value": "8000"
}, {
"value": "9700"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>