Radar Chart in jQuery
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="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts-jquery-plugin.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- Container for radar chart -->
<div id="radar-chart">Radar chart will load here.</div>
JavaScript
$("#radar-chart").insertFusionCharts({
type: 'radar',
width: '100%',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "2015 Budget for Acme Inc.",
"captionFontSize": "22",
"numberPrefix": "$",
"baseFont": "Open Sans",
"baseFontSize": "14",
"paletteColors": "#008ee4,#6baa01",
"bgColor": "#ffffff",
"radarfillcolor": "#ffffff",
"showCanvasBorder": "0",
"legendShadow": "0",
"divLineAlpha": "35",
"usePlotGradientColor": "0",
"numberPreffix": "$",
"legendBorderAlpha": "0",
"yAxisMaxValue": "20000",
// line and anchor customizations
"anchorRadius": "4",
"anchorBorderThickness": "2",
"anchorTrackingRadius": "20",
"showHoverEffect": "1",
// tool tip customizations
"toolTipColor": "#e0e4e6",
"toolTipBorderColor": "#e0e4e6",
"toolTipBorderThickness": "1",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "70",
"toolTipBorderRadius": "2",
"toolTipPadding": "10",
"plotToolText": "<div style='text-align:center; line-height:1.5;'>$seriesname <br> $label: $dataValue</div>"
},
"categories": [{
"category": [{
"label": "Engineering"
}, {
"label": "Sales"
}, {
"label": "Marketing"
}, {
"label": "Quality Assurance"
}, {
"label": "R&D"
}]
}],
"dataset": [{
"seriesname": "Allocated Budget",
"data": [{
"value": "10000"
}, {
"value": "16500"
}, {
"value": "14300"
}, {
"value": "18000"
}, {
"value": "12800"
}]
}, {
"seriesname": "Actual Spend",
"data": [{
"value": "8000"
}, {
"value": "9500"
}, {
"value": "11900"
}, {
"value": "6000"
}, {
"value": "9700"
}]
}]
}
});