Multi-level Pie Chart
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.
In this section, you will be introduced to:
Basics of a Multi-level Pie Chart
The multi-level pie chart 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
Creating a Simple Multi-level Pie Chart
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.
The multi-level pie chart thus rendered looks like this:
FusionCharts will load here..
{
"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',
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",
"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>Given below is a brief description of the attributes used to create a simple multi-level pie chart:
| Attribute Name | Description |
|---|---|
|
It is used to show the numerical value for the data represented by a pie slice. For example, for the slice representing breads, the value will be 11.1. This attribute belongs to the |
|
It is used to specify the label to be be rendered for a pie slice, e.g. “Apparel & Accessories”. This attribute belongs to the |
|
It is used to specify the hex code of the color that will be used to render a pie slice. |