Multi-level Pie Chart
This chart type belongs to PowerCharts XT.
The multi-level pie chart is a special type of chart that allows you to show symmetrical and asymmetrical tree structures in a consolidated pie-like structure. It presents the entire hierarchical data in a single-screen snapshot, which makes it a preferred choice over a tree view. Also, the pie slices can assume numerical values and thereby divide the visual segments in a ratio based on the numerical values. The chart also offers advanced interactivity options like visual path tracing from any child to parent.
This chart can be used to show various types of data like:
Organization structure
Multi-tiered data presentation, e.g., keyword analysis
Inter-linked tree data, e.g., friends of friends
Sales breakup, e.g., for top product categories
As an example, we will create a multi-level pie chart that shows the sales breakup of top product categories for the last quarter at Harry's SuperMart.
To create a multi-level pie chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a multi-level pie chart, setmultilevelpie.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of multi-level pie chart.
The multi-level pie chart thus rendered looks like this:
{
"chart": {
"caption": "Sales Breakup - Top Product Categories",
"subcaption": "Last Quarter",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"numberprefix": "$",
"plottooltext": "$label, $$valueK, $percentValue",
"theme": "fint"
},
"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": "Apparel &{br}Accessories",
"color": "#33ccff",
"value": "42",
"tooltext": "Apparel & Accessories, $$valueK, $percentValue",
"category": [
{
"label": "Sun Glasses",
"color": "#33ccff",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#33ccff",
"value": "18.9"
},
{
"label": "Handbags",
"color": "#33ccff",
"value": "6.3"
},
{
"label": "Shoes",
"color": "#33ccff",
"value": "6.72"
}
]
},
{
"label": "Baby {br}Products",
"color": "#ffcccc",
"value": "22.5",
"tooltext": "Baby Products, $$valueK, $percentValue",
"category": [
{
"label": "Bath &{br}Grooming",
"color": "#ffcccc",
"value": "9.45",
"tooltext": "Bath & Grooming, $$valueK, $percentValue"
},
{
"label": "Food",
"color": "#ffcccc",
"value": "6.3"
},
{
"label": "Diapers",
"color": "#ffcccc",
"value": "6.75"
}
]
},
{
"label": "Electronics",
"color": "#ccff66",
"value": "30",
"category": [
{
"label": "Laptops",
"color": "#ccff66",
"value": "8.1"
},
{
"label": "Televisions",
"color": "#ccff66",
"value": "10.5"
},
{
"label": "SmartPhones",
"color": "#ccff66",
"value": "11.4"
}
]
}
]
}
]
}<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: 'multilevelpie',
renderAt: 'chart-container',
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales Breakup - Top Product Categories",
"subcaption": "Last Quarter",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "$",
"plottooltext": "$label, $$valueK, $percentValue",
//Theme
"theme": "fint"
},
"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": "Apparel &{br}Accessories",
"color": "#33ccff",
"value": "42",
"tooltext": "Apparel & Accessories, $$valueK, $percentValue",
"category": [{
"label": "Sun Glasses",
"color": "#33ccff",
"value": "10.08"
}, {
"label": "Clothing",
"color": "#33ccff",
"value": "18.9"
}, {
"label": "Handbags",
"color": "#33ccff",
"value": "6.3"
}, {
"label": "Shoes",
"color": "#33ccff",
"value": "6.72"
}]
}, {
"label": "Baby {br}Products",
"color": "#ffcccc",
"value": "22.5",
"tooltext": "Baby Products, $$valueK, $percentValue",
"category": [{
"label": "Bath &{br}Grooming",
"color": "#ffcccc",
"value": "9.45",
"tooltext": "Bath & Grooming, $$valueK, $percentValue",
}, {
"label": "Food",
"color": "#ffcccc",
"value": "6.3"
}, {
"label": "Diapers",
"color": "#ffcccc",
"value": "6.75"
}]
}, {
"label": "Electronics",
"color": "#ccff66",
"value": "30",
"category": [{
"label": "Laptops",
"color": "#ccff66",
"value": "8.1"
}, {
"label": "Televisions",
"color": "#ccff66",
"value": "10.5"
}, {
"label": "SmartPhones",
"color": "#ccff66",
"value": "11.4"
}]
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the multi-level pie chart.