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": {
              "xaxisminvalue": "0",
              "xaxismaxvalue": "100",
              "yaxisminvalue": "0",
              "yaxismaxvalue": "100",
              "bubblescale": "3",
              "is3d": "1",
              "numdivlines": "0",
              "showformbtn": "0",
              "showborder": "0"
          },
          "dataset": [
              {
                  "plotborderalpha": "100",
                  "data": [
                      {
                          "x": "50",
                          "y": "90",
                          "width": "110",
                          "height": "90",
                          "color": "FFFFFF",
                          "name": "Mr. Harry Sawyer, CEO",
                          "alpha": "100",
                          "tooltext": "CEO",
                          "id": "CEO",
                          "imagenode": "1",
                          "imageurl": "/explore/Resources/CEO.jpg",
                          "imagealign": "bottom",
                          "imageheight": "65",
                          "imagewidth": "108"
                      },
                      {
                          "x": "20",
                          "y": "70",
                          "width": "130",
                          "height": "40",
                          "name": "Name:Tom McQuin 
      Age: 54yrs 
      Designation:CTO",
                          "color": "62D0FE",
                          "id": "CTO"
                      },
                      {
                          "x": "51",
                          "y": "70",
                          "width": "130",
                          "height": "40",
                          "name": "Name:Jim Kerry 
      Age: 46yrs 
    ...