Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

  • Create a single-series radar chart

  • Create a multi-series radar chart

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:

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

label

It is used to specify the label for a data item. The label appears on the x-axis. This attribute belongs to the category object, which in turn belongs to the categories object.

value

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 data object, which in turn belongs to the dataset object.

seriesname

It is used to specify the series name for a data-set. This attribute belongs to the dataset object.

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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>
Top