FusionCharts - Gallery Example - Radar Chart in JavaScript
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--
Radar chart showing the allocated budget & actual cost in the different verticals of Harry's supermart
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var budgetChart = new FusionCharts({
type: 'radar',
renderAt: 'chart-container',
width: '500',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Budget analysis",
"subCaption": "Current month",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"numberPrefix":"$",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#008ee4,#6baa01",
"labelFontSize": "14",
"bgColor" : "#ffffff",
"radarfillcolor": "#ffffff",
"showBorder" : "0",
"showShadow" : "0",
"showCanvasBorder": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"divLineAlpha": "10",
"usePlotGradientColor": "0",
"numberPreffix": "$",
"legendBorderAlpha": "0",
"legendShadow": "0"
},
"categories": [
{
"category": [
{ "label": "Marketing" },
{ "label": "Product Management" },
{ "label": "Customer Service" },
{ "label": "Human Resource" },
{ "label": "Sales & Distribution" }
]
}
],
"dataset": [
{
"seriesname": "Allocated Budget",
"data": [
{ "value": "19000" },
{ "value": "16500" },
{ "value": "14300" },
{ "value": "10000" },
{ "value": "9800" }
...