FusionCharts - Multi-Level Pie Chart in Javascript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.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": "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",
           ...