FusionCharts - Multi-Level Pie 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>
<!--
Categorywise product sales breakup using Multi Level Pie Chart.
Deviation from theme:
# showPlotBorder - Set to 1
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales Breakup - Top Product Categories",
"subcaption": "Last Quarter",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "$",
"plottooltext": "$label, $$valueK, $percentValue",
"theme": "fint",
"showlabels":"1",
"enableSmartLabels": "1",
},
"category": [{
"label": "Products",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"tooltext": "Food & Beverages, $$valueK, $percentValue",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
}, {
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
}, {
"label": "Noodles",
"color": "#f8bd19",
"value": "9.99"
}, {
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
},
{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
}, {
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
}, {
"label": "Noodles",
"color": "#f8bd19",
"value": "9.99"
}, {
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
},
{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
...