FusionCharts - Multi-Level Pie Chart in Javascript
Created using FusionCharts Suite XT - www.fusioncharts.com
by karimkhan
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": "Topic modeling on instagram",
"subcaption": "Result",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "$",
"plottooltext": "$label, $$valueK, $percentValue",
//Theme
"theme": "fint"
},
"category": [
{
"label": "City",
"color": "#ffffff",
"value": "150",
"category": [
{
"label": "Ahmedabad",
"color": "#f8bd19",
"value": "55.5",
"tooltext" : "Ahmedabad, $$valueK, $percentValue",
"category": [
{
"label": "#Pinkathon",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "#Ahmedabad",
"color": "#f8bd19",
"value": "27.75"
},
{
"label": "#sabarmatiriverfront",
"color": "#f8bd19",
"value": "9.99"
...