Organizational Charts

Two independent series - 2007 and 2008 sold quantities, in US, France and UK - with nested doughnut charts. When not supported by the chart app, we emulate it.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js" type="text/javascript"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 485px;
    height: 300px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 300px; }
img { z-index: -1; }
.ttip {
    padding: 2px;
	font-family: Arial; 
	font-style: normal; 
	font-weight: normal; 
	font-size: 15px; 
	color: #000000; 
}

JavaScript

$(function () {
   var options = {
      renderAt: "chart_div",
      dataFormat: "json",
      width: "485",
      height: "300",
      containerBackgroundOpacity: 0,
      type: "dragnode",
      dataSource: {
          "chart": {
            "plotborderthickness": "2",
            "animation": "0",
            allowDrag: 0,
            viewMode: 1,
        },
        "dataset": [{
            "data": [{
                "id": "country",
                "label": "country (555)",
                //"color": "#ffffff",
                "x": "30",
                "y": "80",
              "width": "60",
              "height": "40",
            }, {
                "id": "France",
                "label": "France   (78)",
                //"color": "#ffffff",
                "x": "10",
                "y": "50",
              "width": "60",
              "height": "40",
            }, {
                "id": "UK",
                "label": "UK      (88)",
                //"color": "#ffffff",
                "x": "30",
                "y": "50",
              "width": "60",
              "height": "40",
            }, {
                "id": "US",
                "label": "US    (993)",
                //"color": "#ffffff",
                "x": "50",
                "y": "50",
              "width": "60",
              "height": "40",
            }, {
                "id": "2003",
                "label": "2003           (89)",
              //  "color": "#ffffff",
                "x": "40",
                "y": "20",
              "width": "60",
              "height": "40",
            }, {
                "id": "2004",
                "label": "2004     (88)",
             //   "color": "#ffffff",
                "x": "60",
                "y": "20",
              "width": "60",
              "height": "40",
            }]
        }],
        "connectors": [{
            //"color": "#ffffff",
            "stdthickness": "2",
            "connector": [{
             ...