Gallery Back to Gallery

Pie Chart Generator Transformation 2

<!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: 529px;
      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">

  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

  <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">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

  </div>

  <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

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


    // DATA
    // -----------------------------
    let aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
    let aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
    let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];

    let aText = [
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet'
    ];

    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: '8px',
        borderColor: '#FFF',
        detach: false,
        pieTransform: 'none',
        slice: '30%',
        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
    // -----------------------------
    // 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
        });
      }

      aObjects.push({
        text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>',
        align: 'center',
        anchor: 'c',
        color: '#666',
        fontFamily: '"Exo 2"',
        fontSize: '14px',
        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 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 = {
          effect: parseInt(effects.value, 10),
          method: 'ANIMATION_LINEAR',
          sequence: parseInt(sequence.value, 10),
          speed: 200
        };
      }

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

      for (let i = 0; i < items; i++) {
        let no = i + 1;
        chartConfigClone['series'].push({
          values: [1],
          dataNo: ((no <= 9) ? '0' + no : no),
          backgroundColor: aPalette[i],
          gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
          gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' '),
          tooltipText: aTooltipText[i],
          valueBox: [{
              text: '%data-no',
              color: '#FFF',
              align: 'center',
              backgroundColor: aPalette[i],
              borderRadius: '48px',
              decimals: 0,
              fontFamily: '"Exo 2"',
              fontSize: '24px',
              placement: 'fixed=94%;50%',
              shadow: false,
              width: '48px',
              height: '48px'
            },
            {
              text: aText[i],
              align: 'left',
              backgroundColor: 'none',
              fontFamily: '"Exo 2"',
              fontSize: '12px',
              fontWeight: 'none',
              placement: 'fixed=50%;50%;+0',
              shadow: false
            }
          ]
        });
      }

      WebFont.load({
        google: {
          families: ['Exo 2']
        },
        active: function() {
          zingchart.render({
            id: chartId,
            width: '100%',
            height: '450px',
            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">
  
  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

  <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">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

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


// DATA
// -----------------------------
let aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
let aGradientColors = ['#ECCD63','#EFB060','#9FC26E','#A65FA1','#E15B96','#A0A5CB','#DF97AD','#459BCA'];
let aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];

let aText = [
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet', 
  'Lorem ipsum<br>dolor sit amet'
];

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: '8px',
    borderColor: '#FFF',
    detach: false,
    pieTransform: 'none',
    slice: '30%',
    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
// -----------------------------
// 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
    });
  }

  aObjects.push(
    {
      text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>',
      align: 'center',
      anchor: 'c',
      color: '#666',
      fontFamily: '"Exo 2"',
      fontSize: '14px',
      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 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 = {
      effect: parseInt(effects.value, 10),
      method: 'ANIMATION_LINEAR',
      sequence: parseInt(sequence.value, 10),
      speed: 200
    };
  }

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

  for (let i=0;i<items;i++) {
    let no = i+1;
    chartConfigClone['series'].push({
      values: [1],
      dataNo: ((no<=9)?'0'+no:no),
      backgroundColor: aPalette[i],
      gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
      gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' '),
      tooltipText: aTooltipText[i],
      valueBox: [
        {
          text: '%data-no',
          color: '#FFF',
          align: 'center',
          backgroundColor: aPalette[i],
          borderRadius: '48px',
          decimals: 0,
          fontFamily: '"Exo 2"',
          fontSize: '24px',
          placement: 'fixed=94%;50%',
          shadow: false,
          width: '48px',
          height: '48px'
        },
        {
          text: aText[i],
          align: 'left',
          backgroundColor: 'none',
          fontFamily: '"Exo 2"',
          fontSize: '12px',
          fontWeight: 'none',
          placement: 'fixed=50%;50%;+0',
          shadow: false
        }
      ]
    });
  }

  WebFont.load({
    google: {
      families: ['Exo 2']
    },
    active: function() {
      zingchart.render({
        id: chartId,
        width: '100%',
        height: '450px',
        output: 'svg',
        data: chartConfigClone,
        events: {
          animation_end: addEls,
          load: load
        }
      });
    }
  });
}
.info { padding:1rem 0 0; min-height:529px; 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; }
Pie Chart Generator with Image 40/275 Scatter Plot with Markers

Related Documentation: