Pie Chart Transformation Infographic

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/3B8I8R59

<!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>
    .info {
      padding: 1rem 0 0;
      min-height: 680px;
      background: #fff;
      box-sizing: border-box;
    }

    .control-bar {
      margin: 0 auto;
      padding: 0 0 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .3s;
      flex-wrap: wrap;
    }

    .control-bar.loaded {
      display: flex !important;
      opacity: 1;
    }

    .control-bar>div {
      display: flex;
      align-items: center;
    }

    .control-bar>*+* {
      margin-left: 10px;
    }

    .control-bar span {
      margin-left: 7px;
      display: inline-block;
    }

    .control-bar select {
      min-width: 45px;
      height: 40px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 4px;
    }

    .control-bar .sel-wide {
      min-width: 60px;
    }

    .control-bar button {
      min-width: 45px;
      height: 40px;
      cursor: pointer;
      color: #fff;
      background: #074361;
      border: 1px solid #074361;
      border-radius: 4px;
    }

    .zc-body {
      background-color: #fff;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div class="info">

    <div data-jsref="control-bar" class="control-bar" hidden>
      <div>
        <select data-jsref="elements">
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6" selected="selected">6</option>
        </select>
        <span>elements, </span>
      </div>
      <div>
        <select data-jsref="aperture" class="sel-wide">
          <option value="180">180</option>
          <option value="270" selected="selected">270</option>
          <option value="360">360</option>
        </select>
        <span>aperture, starting at</span>
      </div>
      <div>
        <select data-jsref="degrees" class="sel-wide">
          <option value="0">0</option>
          <option value="45">45</option>
          <option value="90">90</option>
          <option value="135" selected="selected">135</option>
          <option value="180">180</option>
          <option value="225">225</option>
          <option value="270">270</option>
          <option value="315">315</option>
        </select>
        <span>degrees, with</span>
      </div>
      <div>
        <select data-jsref="effects">
          <option value="-1">no animation</option>
          <option value="0">effect 0</option>
          <option value="1" selected="selected">effect 1</option>
          <option value="2">effect 2</option>
          <option value="3">effect 3</option>
          <option value="4">effect 4</option>
        </select>
        ,
      </div>
      <select data-jsref="sequence">
        <option value="0">non-sequenced</option>
        <option value="1" selected="selected">in sequence</option>
      </select>
      <button data-jsref="renderBtn">Render</button>
    </div>

    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>

  </div>

  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';


    // DATA
    // -----------------------------
    let aPalette = [
      '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
      '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    ];
    let aIcons = [
      'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05',
      'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11'
    ];
    let aText = [
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
      'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
    ];
    let aTooltipText = [
      'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
      'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    ];


    // DOM ELEMENTS
    // -----------------------------
    let controlBar = document.querySelector('[data-jsref="control-bar"]');
    let elements = document.querySelector('[data-jsref="elements"]');
    let aperture = document.querySelector('[data-jsref="aperture"]');
    let degrees = document.querySelector('[data-jsref="degrees"]');
    let effects = document.querySelector('[data-jsref="effects"]');
    let sequence = document.querySelector('[data-jsref="sequence"]');
    let renderBtn = document.querySelector('[data-jsref="renderBtn"]');


    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'pie',
      plot: {
        borderWidth: 0,
        borderColor: '#fff',
        detach: false,
        pieTransform: 'fold=60',
        slice: '19%',
        hoverState: {
          visible: false
        }
      },
      plotarea: {
        margin: 0
      },
      scaleR: {
        aperture: parseInt(aperture.value, 10),
        refAngle: parseInt(degrees.value, 10)
      },
      resources: [{
        type: 'css',
        url: 'https://fonts.googleapis.com/css?family=Exo+2'
      }],
      series: []
    };


    // EVENTS
    // -----------------------------

    // Conditionally add elements
    function addEls(p) {
      let allowed = effects.value !== '-1';
      if (allowed) addElements(p);
    }

    function load(p) {
      addEls(p);
      controlBar.classList.add('loaded');
    }


    // RENDER CHARTS
    // -----------------------------
    WebFont.load({
      google: {
        families: ['Exo 2']
      },
      active: function() {
        // On load
        render();
        // On button click
        renderBtn.addEventListener('click', render);
      }
    });


    // HELPER FNS
    // -----------------------------
    function addElements(p) {
      let iPlots = zingchart.exec(p.id, 'getplotlength');
      let aObjects = [],
        oInfo;
      for (let i = 0; i < iPlots; i++) {
        oInfo = zingchart.exec(p.id, 'getobjectinfo', {
          object: 'node',
          plotindex: i,
          nodeindex: 0
        });
        let iSlice = oInfo.size * oInfo.slice;
        let aCP = cPoint(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2 - 4, oInfo.angleStart);

        aObjects.push({
          id: 'sh' + i,
          anchor: 'c',
          angle: oInfo.angleStart,
          backgroundColor: '#eee',
          gradientColors: 'rgba(0,0,0,0) rgba(0,0,0,0) rgba(100,100,100,0.5) rgba(100,100,100,0.4) rgba(100,100,100,0.3) rgba(100,100,100,0.2) rgba(100,100,100,0.1) rgba(100,100,100,0)',
          gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99',
          width: (oInfo.size - iSlice) - 2,
          height: 10,
          x: aCP[0],
          y: aCP[1]
        });
      }

      aObjects.push({
        text: 'INFOGRAPHIC<br>TEMPLATE',
        align: 'center',
        anchor: 'c',
        color: '#000',
        fontFamily: '"Exo 2"',
        fontSize: 14,
        fontWeight: 600,
        width: 1.75 * oInfo.slice * oInfo.size,
        x: oInfo.x,
        y: oInfo.y
      });

      zingchart.exec(p.id, 'addobject', {
        type: 'label',
        data: aObjects
      });
    };

    function cPoint(iX, iY, iR, iAngle) {
      return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
    }

    function render() {
      chartConfig.scaleR = {
        aperture: parseInt(aperture.value, 10),
        refAngle: parseInt(degrees.value, 10),
      }
      let chartConfigClone = JSON.parse(JSON.stringify(chartConfig));

      if (effects.value !== '-1') {
        chartConfigClone['plot'].animation = {
          speed: 200,
          method: 0,
          effect: parseInt(effects.value, 10),
          sequence: parseInt(sequence.value, 10)
        };
      }

      let items = parseInt(elements.value, 10);

      for (let i = 0; i < items; i++) {
        let no = i + 1;
        chartConfigClone['series'].push({
          values: [1],
          backgroundColor: aPalette[i],
          dataNo: ((no <= 9) ? '0' + no : no),
          gradientColors: ['#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
          gradientStops: [0.001, 0.30, 0.31, 0.35, 0.36, 0.5].join(' '),
          tooltipText: aTooltipText[i],
          valueBox: [{
              text: '<span style="font-size:27px">%data-no</span><br><span style="font-size:9px;color:' + aPalette[i] + '">\u2002\u2002OPTION</span>',
              borderRadius: '23px',
              borderWidth: 0,
              color: '#4B4B4B',
              decimals: 0,
              fontFamily: '"Exo 2"',
              fontSize: '6px',
              placement: 'fixed=90%;75%',
              shadow: false,
              width: '48px',
              height: '48px'
            },
            {
              text: ' ',
              backgroundColor: 'none',
              backgroundImage: ICONS24[aIcons[i]],
              backgroundRepeat: 'no-repeat',
              placement: 'fixed=80%;6',
              shadow: false,
              width: '24px',
              height: '24px'
            },
            {
              text: aText[i],
              align: 'left',
              backgroundColor: 'none',
              fontSize: '9px',
              placement: 'fixed=55%;50%',
              shadow: false
            }
          ]
        });
      }

      zingchart.render({
        id: chartId,
        width: '100%',
        height: '600px',
        output: 'svg',
        data: chartConfigClone,
        events: {
          animation_end: addEls,
          load: load
        }
      });
    }
  </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 class="zc-body">

  <div class="info">

    <div data-jsref="control-bar" class="control-bar" hidden>
      <div>
        <select data-jsref="elements">
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6" selected="selected">6</option>
        </select>
        <span>elements, </span>
      </div>
      <div>
        <select data-jsref="aperture" class="sel-wide">
          <option value="180">180</option>
          <option value="270" selected="selected">270</option>
          <option value="360">360</option>
        </select>
        <span>aperture, starting at</span>
      </div>
      <div>
        <select data-jsref="degrees" class="sel-wide">
          <option value="0">0</option>
          <option value="45">45</option>
          <option value="90">90</option>
          <option value="135" selected="selected">135</option>
          <option value="180">180</option>
          <option value="225">225</option>
          <option value="270">270</option>
          <option value="315">315</option>
        </select>
        <span>degrees, with</span>
      </div>
      <div>
        <select data-jsref="effects">
          <option value="-1">no animation</option>
          <option value="0">effect 0</option>
          <option value="1" selected="selected">effect 1</option>
          <option value="2">effect 2</option>
          <option value="3">effect 3</option>
          <option value="4">effect 4</option>
        </select>
        ,
      </div>
      <select data-jsref="sequence">
        <option value="0">non-sequenced</option>
        <option value="1" selected="selected">in sequence</option>
      </select>
      <button data-jsref="renderBtn">Render</button>
    </div>

    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>

  </div>

  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/icons.js'></script>

</body>

</html>

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';


// DATA
// -----------------------------
let aPalette = [
  '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC', 
  '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];
let aIcons = [
  'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 
  'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11' 
];
let aText = [
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
  'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
];
let aTooltipText = [
  'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
  'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
];


// DOM ELEMENTS
// -----------------------------
let controlBar = document.querySelector('[data-jsref="control-bar"]');
let elements = document.querySelector('[data-jsref="elements"]');
let aperture = document.querySelector('[data-jsref="aperture"]');
let degrees = document.querySelector('[data-jsref="degrees"]');
let effects = document.querySelector('[data-jsref="effects"]');
let sequence = document.querySelector('[data-jsref="sequence"]');
let renderBtn = document.querySelector('[data-jsref="renderBtn"]');


// CHART CONFIG
// -----------------------------
let chartConfig = {
  type : 'pie',
  plot : {
    borderWidth : 0,
    borderColor : '#fff',
    detach : false,
    pieTransform : 'fold=60',
    slice : '19%',
    hoverState : {
      visible : false
    }
  },
  plotarea : {
    margin : 0
  },
  scaleR : {
    aperture: parseInt(aperture.value, 10),
    refAngle: parseInt(degrees.value, 10)
  },
  resources : [
    {
      type : 'css',
      url : 'https://fonts.googleapis.com/css?family=Exo+2'
    }
  ],
  series:[]
};


// EVENTS
// -----------------------------

// Conditionally add elements
function addEls(p) {
  let allowed = effects.value !== '-1';
  if (allowed) addElements(p);
}

function load(p) {
  addEls(p);
  controlBar.classList.add('loaded');
}


// RENDER CHARTS
// -----------------------------
WebFont.load({
  google : {
    families: ['Exo 2']
  },
  active : function() {
    // On load
    render();
    // On button click
    renderBtn.addEventListener('click', render);
  }
});


// HELPER FNS
// -----------------------------
function addElements(p) {
  let iPlots = zingchart.exec(p.id, 'getplotlength');
  let aObjects = [], oInfo;
  for (let i=0;i<iPlots;i++) {
    oInfo = zingchart.exec(p.id, 'getobjectinfo', {
      object : 'node',
      plotindex : i,
      nodeindex : 0
    });
    let iSlice = oInfo.size * oInfo.slice;
    let aCP = cPoint(oInfo.x, oInfo.y, (iSlice + oInfo.size)/2 - 4, oInfo.angleStart);
    
    aObjects.push({
      id : 'sh'+i,
      anchor : 'c',
      angle : oInfo.angleStart,
      backgroundColor : '#eee',
      gradientColors : 'rgba(0,0,0,0) rgba(0,0,0,0) rgba(100,100,100,0.5) rgba(100,100,100,0.4) rgba(100,100,100,0.3) rgba(100,100,100,0.2) rgba(100,100,100,0.1) rgba(100,100,100,0)',
      gradientStops : '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99',
      width : (oInfo.size - iSlice) - 2,
      height : 10,
      x : aCP[0],
      y : aCP[1]
    });
  }

  aObjects.push(
    {
      text : 'INFOGRAPHIC<br>TEMPLATE',
      align : 'center',
      anchor : 'c',
      color : '#000',
      fontFamily : '"Exo 2"',
      fontSize : 14,
      fontWeight : 600,
      width : 1.75*oInfo.slice*oInfo.size,
      x : oInfo.x,
      y : oInfo.y
    }
  );

  zingchart.exec(p.id, 'addobject', {
    type : 'label',
    data : aObjects
  });
};

function cPoint(iX, iY, iR, iAngle) {
  return [iX + iR*Math.cos(iAngle*2*Math.PI/360), iY + iR*Math.sin(iAngle*2*Math.PI/360)];
}

function render() {
  chartConfig.scaleR = {
    aperture: parseInt(aperture.value, 10),
    refAngle: parseInt(degrees.value, 10),
  }
  let chartConfigClone = JSON.parse(JSON.stringify(chartConfig));

  if (effects.value !== '-1') {
    chartConfigClone['plot'].animation = {
      speed: 200,
      method: 0,
      effect: parseInt(effects.value, 10),
      sequence: parseInt(sequence.value, 10)
    };
  }

  let items = parseInt(elements.value, 10);

  for (let i=0;i<items;i++) {
    let no = i+1;
    chartConfigClone['series'].push({
      values : [1],
      backgroundColor : aPalette[i],
      dataNo : ((no<=9)?'0'+no:no),
      gradientColors : ['#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
      gradientStops : [0.001, 0.30, 0.31, 0.35, 0.36, 0.5].join(' '),
      tooltipText : aTooltipText[i],
      valueBox : [
        {
          text : '<span style="font-size:27px">%data-no</span><br><span style="font-size:9px;color:' + aPalette[i] + '">\u2002\u2002OPTION</span>',
          borderRadius : '23px',
          borderWidth : 0,
          color : '#4B4B4B',
          decimals : 0,
          fontFamily : '"Exo 2"',
          fontSize : '6px',
          placement : 'fixed=90%;75%',
          shadow : false,
          width : '48px',
          height : '48px'
        },
        {
          text : ' ',
          backgroundColor : 'none',
          backgroundImage : ICONS24[aIcons[i]],
          backgroundRepeat : 'no-repeat',
          placement : 'fixed=80%;6',
          shadow : false,
          width : '24px',
          height : '24px'
        },
        {
          text : aText[i],
          align : 'left',
          backgroundColor : 'none',
          fontSize : '9px',
          placement : 'fixed=55%;50%',
          shadow : false
        }
      ]
    });
  }

  zingchart.render({
    id : chartId,
    width : '100%',
    height : '600px',
    output : 'svg',
    data : chartConfigClone,
    events: {
      animation_end: addEls,
      load: load
    }
  });
}

.info { padding:1rem 0 0; min-height:680px; background:#fff; box-sizing:border-box; }
.control-bar { margin:0 auto; padding:0 0 1rem; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; flex-wrap: wrap;}
.control-bar.loaded { display:flex !important; opacity:1; }
.control-bar > div { display:flex; align-items:center; }
.control-bar > * + * { margin-left:10px; }
.control-bar span { margin-left:7px; display:inline-block; }
.control-bar select { min-width:45px; height:40px; background:#fff; border:1px solid #ebebeb; border-radius:4px; }
.control-bar .sel-wide { min-width:60px; }
.control-bar button { min-width:45px; height:40px; cursor:pointer; color:#fff; background:#074361; border:1px solid #074361; border-radius:4px; }

.zc-body { background-color:#fff; }
.zc-ref { display:none; }

Dynamic Scatter Chart 49/281 Custom Pie Chart - Student Debt in the US

Pie Chart Transformation Infographic

Related Documentation: