FusionCharts - Gallery Example -Multi-Level Pie Chart in Javascript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ayan Ghatak

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>
<!-- 
    Sales by category shown using Multi-level Pie Chart.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

/*
 Recursively removes the data containing falsy values.
 @param data {Object} - The original data.
 @return {Object} - The refined data.
*/
function dataRefiner(data) {
  var i,
    category = data.category,
    len = category && category.length;
  for (i = 0; i < len; i += 1) {
    elem = category[i];
    if (elem.category) {
      dataRefiner(elem);
    } else if (!Number(elem.value)) {
      category.splice(i, 1);
      i -= 1;
      len -= 1;
    }
  }
  return data;
}
var overlapManager = (function() {
  return function(chartRef, dataSet) {
    var jsonData = chartRef.getJSONData(),
      chartAttrs = jsonData.chart;
    if (Number(chartAttrs.enablesmartlabels) === 0 || Number(chartAttrs.managelabeloverflow) === 0) {
      return;
    }
    /*
     * Returns the point to point distance for two points.
     * @return {Number}
     */
    function dist_point(point1, point2) {
      var math = Math;
      return math.sqrt((math.pow((point1.x - point2.x), 2)) + (math.pow((point1.y - point2.y), 2)))
    }

    /*
     * given a radius, center, and two ends of a chord.
     * return: {
        inner: Coordinate of the dipped point on the inner circle.
        outer: coordinate of the dipped point on the outer circle. 
     }
    */
    function give_dips(center_circle, angle, innerRadius, outerRadius) {
      var math = Math,
        res = {
          inner: {},
          outer: {}
        },
        getExtreme = function(radius) {
          return {
            x: center_circle.x + (radius * math.cos(angle)),
            y: center_circle.y - (radius * math.sin(angle))
          }
        };

      if (center_circle) {
        res.inner = getExtreme(innerRadius);
        res.outer = getExtreme(outerRadius);
      }
      return res;
    }

    /*
     * Manages the overlapping of the texts in ML pie chart.
     * @params: elem - {Object} - Internal store for the graphic and configurations.
     * @params: chartRef - {Object} - The reference for the chart.
    ...