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": "fusion"
},
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></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": "fusion"
},
"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.
Now, let's customize the appearance and properties of the multi-level pie chart.
Configure highlight effect
Set the direction of the highlight effect of the plots, when hovered over, using the highlightParentPieSlices and highlightChildPieSlices attributes. For instance:
Set the value of
highlightParentPieSlicesto0to prevent child pie slices from getting highlighted, when you hover over the parent slices.Set the value of
highlightChildPieSlicesto1to automatically also highlight parent slices when you hover over the child pie slices.
Refer to the code below:
{
"chart": {
...
"highlightParentPieSlices": "0",
"highlightChildPieSlices": "1"
},
}The chart will look as shown below:
Click here to edit the multi-level pie chart.
Configure inner radius
Use the InnerRadius attribute to explicitly set the inner radius of the pie chart to a value of your choosing.
Refer to the code below:
{
"chart": {
...
"innerRadius": "10"
},
}The chart will look as shown below:
Click here to edit the multi-level pie chart.
Export Multi-level pie chart in CSV or XLS formats
In version 3.13.0, you can export data from multi-level pie charts in CSV or XLS formats. Set the value of the enableExport attribute to 1 to do so.
Refer to the code below:
{
"chart": {
...
"exportEnabled": "1"
},
}The chart will look as shown below:
Click here to edit the multi-level pie chart.