SetSeriesData API Drilldown

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
  </style>
</head>

<body>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'ring',
      title: {
        text: 'Drilldown Pie'
      },
      plot: {
        detach: false,
        cursor: 'hand',
        shadow: 8,
        valueBox: {
          placement: 'out'
        }
      },
      tooltip: {
        text: '%t: %v (%npv%)',
        borderRadius: 5
      },
      series: [{
          values: [69],
          backgroundColor: '#F44336',
          text: 'Visualization<br>Tools',
          'data-id': 'vt'
        },
        {
          values: [69],
          backgroundColor: '#009688',
          text: 'Site<br>Performance',
          'data-id': 'sp'
        },
        {
          values: [69],
          backgroundColor: '#00BCD4',
          text: 'Dev<br>Tools',
          'data-id': 'dt'
        },
        {
          values: [69],
          backgroundColor: '#03A9F4',
          text: 'Security<br>Tools',
          'data-id': 'st'
        },
        {
          values: [69],
          backgroundColor: '#673AB7',
          text: 'Data<br>Management',
          'data-id': 'dm'
        }
      ],
      shapes: [{
        x: 25,
        y: 20,
        size: 10,
        angle: -90,
        type: 'triangle',
        backgroundColor: '#C4C4C4',
        padding: 5,
        cursor: 'hand',
        id: 'backwards',
        hoverState: {
          borderWidth: 1,
          borderColor: '#000'
        }
      }]
    }

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });



    /**
     * Create associative array to manage drilldown config
     */
    let drilldownDataStructure = [];
    drilldownDataStructure['vt'] = {
      series: [{
          values: [10],
          backgroundColor: '#EF5350'
        },
        {
          values: [25],
          backgroundColor: '#E53935'
        },
        {
          values: [34],
          backgroundColor: '#C62828'
        }
      ]
    };
    drilldownDataStructure['sp'] = {
      series: [{
          values: [15],
          backgroundColor: '#26A69A'
        },
        {
          values: [5],
          backgroundColor: '#80CBC4'
        },
        {
          values: [35],
          backgroundColor: '#00695C'
        },
        {
          values: [20],
          backgroundColor: '#00897B'
        }
      ]
    };
    drilldownDataStructure['dt'] = {
      series: [{
          values: [20],
          backgroundColor: '#26C6DA'
        },
        {
          values: [8],
          backgroundColor: '#80DEEA'
        },
        {
          values: [35],
          backgroundColor: '#00838F'
        },
        {
          values: [20],
          backgroundColor: '#00ACC1'
        }
      ]
    };
    drilldownDataStructure['st'] = {
      series: [{
          values: [35],
          backgroundColor: '#1565C0'
        },
        {
          values: [15],
          backgroundColor: '#42A5F5'
        },
        {
          values: [25],
          backgroundColor: '#1E88E5'
        },
        {
          values: [10],
          backgroundColor: '#90CAF9'
        }
      ]
    };
    drilldownDataStructure['dm'] = {
      series: [{
          values: [10],
          backgroundColor: '#5E35B1'
        },
        {
          values: [25],
          backgroundColor: '#4527A0'
        },
        {
          values: [35],
          backgroundColor: '#7E57C2'
        }
      ]
    };


    /*
     * Built in zingchart API event used to capture node click events.
     * Starting from this scope you will handle drilldown functionality.
     */
    zingchart.node_click = function(p) {
      // You could use this data to help construct drilldown graphs check it out...
      if (drilldownDataStructure[p['data-id']]) {
        zingchart.exec('myChart', 'setseriesdata', {
          data: drilldownDataStructure[p['data-id']]['series']
        });
      }
    }

    /*
     * Handle history buttons. You can assign
     * shapes id's and based on id you can go 
     * 'forward' or 'backwards'. You could 
     * also handle this with HTML and register
     * click events to those DOM elements.
     */
    zingchart.shape_click = function(p) {
      let shapeId = p.shapeid;

      switch (shapeId) {
        case 'forwards':
        case 'backwards':
        case 'default':
          zingchart.exec('myChart', 'destroy');
          zingchart.render({
            id: 'myChart',
            data: chartConfig,
            height: '100%',
            width: '100%'
          });
          break;
      }
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

let chartConfig = {
  type: 'ring',
  title: {
    text: 'Drilldown Pie'
  },
  plot: {
    detach: false,
    cursor: 'hand',
    shadow: 8,
    valueBox: {
      placement: 'out'
    }
  },
  tooltip: {
    text: '%t: %v (%npv%)',
    borderRadius: 5
  },
  series: [{
      values: [69],
      backgroundColor: '#F44336',
      text: 'Visualization<br>Tools',
      'data-id': 'vt'
    },
    {
      values: [69],
      backgroundColor: '#009688',
      text: 'Site<br>Performance',
      'data-id': 'sp'
    },
    {
      values: [69],
      backgroundColor: '#00BCD4',
      text: 'Dev<br>Tools',
      'data-id': 'dt'
    },
    {
      values: [69],
      backgroundColor: '#03A9F4',
      text: 'Security<br>Tools',
      'data-id': 'st'
    },
    {
      values: [69],
      backgroundColor: '#673AB7',
      text: 'Data<br>Management',
      'data-id': 'dm'
    }
  ],
  shapes: [{
    x: 25,
    y: 20,
    size: 10,
    angle: -90,
    type: 'triangle',
    backgroundColor: '#C4C4C4',
    padding: 5,
    cursor: 'hand',
    id: 'backwards',
    hoverState: {
      borderWidth: 1,
      borderColor: '#000'
    }
  }]
}

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});



/**
 * Create associative array to manage drilldown config
 */
let drilldownDataStructure = [];
drilldownDataStructure['vt'] = {
  series: [{
      values: [10],
      backgroundColor: '#EF5350'
    },
    {
      values: [25],
      backgroundColor: '#E53935'
    },
    {
      values: [34],
      backgroundColor: '#C62828'
    }
  ]
};
drilldownDataStructure['sp'] = {
  series: [{
      values: [15],
      backgroundColor: '#26A69A'
    },
    {
      values: [5],
      backgroundColor: '#80CBC4'
    },
    {
      values: [35],
      backgroundColor: '#00695C'
    },
    {
      values: [20],
      backgroundColor: '#00897B'
    }
  ]
};
drilldownDataStructure['dt'] = {
  series: [{
      values: [20],
      backgroundColor: '#26C6DA'
    },
    {
      values: [8],
      backgroundColor: '#80DEEA'
    },
    {
      values: [35],
      backgroundColor: '#00838F'
    },
    {
      values: [20],
      backgroundColor: '#00ACC1'
    }
  ]
};
drilldownDataStructure['st'] = {
  series: [{
      values: [35],
      backgroundColor: '#1565C0'
    },
    {
      values: [15],
      backgroundColor: '#42A5F5'
    },
    {
      values: [25],
      backgroundColor: '#1E88E5'
    },
    {
      values: [10],
      backgroundColor: '#90CAF9'
    }
  ]
};
drilldownDataStructure['dm'] = {
  series: [{
      values: [10],
      backgroundColor: '#5E35B1'
    },
    {
      values: [25],
      backgroundColor: '#4527A0'
    },
    {
      values: [35],
      backgroundColor: '#7E57C2'
    }
  ]
};


/*
 * Built in zingchart API event used to capture node click events.
 * Starting from this scope you will handle drilldown functionality.
 */
zingchart.node_click = function(p) {
  // You could use this data to help construct drilldown graphs check it out...
  if (drilldownDataStructure[p['data-id']]) {
    zingchart.exec('myChart', 'setseriesdata', {
      data: drilldownDataStructure[p['data-id']]['series']
    });
  }
}

/*
 * Handle history buttons. You can assign
 * shapes id's and based on id you can go 
 * 'forward' or 'backwards'. You could 
 * also handle this with HTML and register
 * click events to those DOM elements.
 */
zingchart.shape_click = function(p) {
  let shapeId = p.shapeid;

  switch (shapeId) {
    case 'forwards':
    case 'backwards':
    case 'default':
      zingchart.exec('myChart', 'destroy');
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%'
      });
      break;
  }
}