FusionCharts - Multi-Level Pie Chart in Javascript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nofiden Noble

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: '600',
    height: '600',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "HBO MAX",
        "subcaption": "DISCO",
        "showPlotBorder": "1",
        "piefillalpha": "60",
        "pieborderthickness": "2",
        "piebordercolor": "#FFFFFF",
        "hoverfillcolor": "#CCCCCC",
        "numberprefix": "",
        "plottooltext": "$label, $percentValue",
        "theme": "fusion"
      },
      "category": [{
        "label": "HBO MAX : All Active \n 21000",
        "color": "#ffffff",
        "value": "150",
        "category": [{
          "label": "Pre-Processing \n 50",
          "color": "#a4f280",
          "value": "20",
          "tooltext": "Pre-Processing, $percentValue",
         "category": [ {
            "label": "InProgress \n 10",
            "color": "#ababf5",
            "value": "5"
          }, {
            "label": "Error \n 5",
            "color": "#ade374",
            "value": "5"
          }, {
            "label": "Not-Started \n 23",
            "color": "#ed8598",
            "value": "5"
          }]
        },{
          "label": "Encoding \n 37",
          "color": "#44def2",
          "value": "20",
          "tooltext": "Encoding, $percentValue",
        "category": [{
            "label": "InProgress \n 17",
            "color": "#ababf5",
            "value": "5"
          }, {
            "label": "Error \n 11",
            "color": "#ade374",
            "value": "5"
          }, {
            "label": "Not-Started \n 13",
            "color": "#ed8598",
            "value": "5"
          }]
        },{
          "label": "QC \n 23",
          "color": "#c076e3",
          "value": "20",
          "tooltext": "QC, $percentValue",
        "category": [ {
            "label": "InProgress \n 40",
            "color": "#ababf5",
...