Choose an item

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 type attribute. To render a radar chart, set radar.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

In the JSON data:

  • Set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the label for a data item using the label attribute. This attribute belongs to the category object, which in turn belongs to the categories object.

  • Specify the value for a data item using the value attribute within the data object.

  • Specify the name of the series for a dataset using the seriesname attribute. This attribute belongs to the dataset object.

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:

FusionCharts will load here..
{
    "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:

FusionCharts will load here..
{
    "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 &amp; 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.