Radar Chart
This chart type belongs to PowerCharts XT.
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
As an example, we will create our first 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.
To create a radar chart follow the steps given below:
Specify the chart type using the
typeattribute. To render a radar chart, setradar.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
In the JSON data:
Set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the label for a data item using the
labelattribute. This attribute belongs to thecategoryobject, which in turn belongs to thecategoriesobject.Specify the value for a data item using the
valueattribute within thedataobject.Specify the name of the series for a dataset using the
seriesnameattribute. This attribute belongs to thedatasetobject.
For a detailed list of attributes, refer to the chart attributes page of multi-series radar chart.
The radar chart created will look like as shown below:
{
"chart": {
"caption": "Store rating across parameters",
"subCaption": "Based on customer feedback survey",
"numberPreffix": "$",
"theme": "fusion",
"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"
}
]
}
]
}<chart caption="Store rating across parameters" subcaption="Based on customer feedback survey" numberpreffix="$" theme="fusion" radarfillcolor="#ffffff">
<categories>
<category label="Ambience" />
<category label="Product Assortment" />
<category label="Price Competitiveness" />
<category label="Service" />
<category label="Recommend to others" />
</categories>
<dataset seriesname="User Ratings">
<set value="3.5" />
<set value="4.8" />
<set value="3.1" />
<set value="4.0" />
<set value="3.6" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'radar',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store rating across parameters",
"subCaption": "Based on customer feedback survey",
"numberPreffix": "$",
"theme": "fusion",
"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"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the radar chart.
Now, 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 data structure to create the multi-series radar chart is same as that of radar chart.
The multi-series radar chart thus created looks like this:
{
"chart": {
"caption": "Budget Analysis",
"subCaption": "Current month",
"numberPreffix": "$",
"theme": "fusion",
"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"
}
]
}
]
}<chart caption="Budget Analysis" subcaption="Current month" numberpreffix="$" theme="fusion" radarfillcolor="#ffffff">
<categories>
<category label="Marketing" />
<category label="Product Management" />
<category label="Customer Service" />
<category label="Human Resources" />
<category label="Sales & Distribution" />
</categories>
<dataset seriesname="Allocated Budget">
<set value="19000" />
<set value="16500" />
<set value="14300" />
<set value="10000" />
<set value="9800" />
</dataset>
<dataset seriesname="Actual Cost">
<set value="6000" />
<set value="9500" />
<set value="11900" />
<set value="8000" />
<set value="9700" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'radar',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Budget Analysis",
"subCaption": "Current month",
"numberPreffix": "$",
"theme": "fusion",
"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"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the multi-series radar chart.