Pie Chart Transformation Templates

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 650px;
    }

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


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

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // full ZingChart schema can be found here:
    // https://www.zingchart.com/docs/api/json-configuration/
    let palette = [
      '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
      '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    ];

    let transforms = [
      [8, '0%', 'none', 'fixed=60%;50%'],
      [8, '40%', 'none', 'fixed=60%;50%'],
      [8, '0%', 'flat', 'fixed=60%;50%'],
      [8, '40%', 'flat', 'fixed=50%;50%'],
      [8, '0%', 'fold=20', 'fixed=50%;50%'],
      [8, '40%', 'fold=20', 'fixed=35%;50%'],
      [5, '40%', 'callout=8', 'fixed=50%;50%'],
      [5, '60%', 'flow=10', 'fixed=50%;60%'],
      [5, '60%', 'flow=-99', 'fixed=50%;40%'],
      [8, '0%', 'bite=15', 'fixed=50%;50%'],
      [8, '40%', 'bite=15', 'fixed=40%;50%'],
      [4, '0%', 'droplet', 'fixed=70%;50%']
    ];

    let chartConfig = {
      graphset: []
    };

    for (let r = 0; r < 3; r++) {
      for (let c = 0; c < 4; c++) {
        let idx = r * 4 + c;
        if (transforms[idx]) {
          let gdata = {
            type: 'pie',
            width: '200px',
            height: '200px',
            x: `${c*200}px`,
            y: `${r*200}px`,
            title: {
              text: 'pieTransform:' + transforms[idx][2],
              fontSize: '11px'
            },
            plot: {
              borderWidth: '1px',
              borderColor: '#fff',
              borderAlpha: 0.2,
              // PIE TRANSFORM ATTRIBUTES HERE
              slice: transforms[idx][1],
              pieTransform: transforms[idx][2],
              hoverState: {
                visible: false
              },
              tooltip: {
                text: 'Pie #%plot-index'
              },
              valueBox: {
                placement: transforms[idx][3],
                fontSize: '11px',
                text: '#%plot-index'
              }
            },
            plotarea: {
              margin: '15px 5px 5px 5px'
            },
            series: []
          };
          for (let i = 0; i < transforms[idx][0]; i++) {
            gdata.series.push({
              values: [1],
              backgroundColor: palette[i]
            });
          }
          chartConfig.graphset.push(gdata);
        }
      }
    }

    zingchart.render({
      id: 'myChart',
      width: '100%',
      height: '100%',
      data: chartConfig
    });
  </script>
</body>

</html>

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

</body>

</html>

.zc-body {
  background: #fff;
}

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 650px;
}

.zc-ref {
  display: none;
}

// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let palette = [
  '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
  '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];

let transforms = [
  [8, '0%', 'none', 'fixed=60%;50%'],
  [8, '40%', 'none', 'fixed=60%;50%'],
  [8, '0%', 'flat', 'fixed=60%;50%'],
  [8, '40%', 'flat', 'fixed=50%;50%'],
  [8, '0%', 'fold=20', 'fixed=50%;50%'],
  [8, '40%', 'fold=20', 'fixed=35%;50%'],
  [5, '40%', 'callout=8', 'fixed=50%;50%'],
  [5, '60%', 'flow=10', 'fixed=50%;60%'],
  [5, '60%', 'flow=-99', 'fixed=50%;40%'],
  [8, '0%', 'bite=15', 'fixed=50%;50%'],
  [8, '40%', 'bite=15', 'fixed=40%;50%'],
  [4, '0%', 'droplet', 'fixed=70%;50%']
];

let chartConfig = {
  graphset: []
};

for (let r = 0; r < 3; r++) {
  for (let c = 0; c < 4; c++) {
    let idx = r * 4 + c;
    if (transforms[idx]) {
      let gdata = {
        type: 'pie',
        width: '200px',
        height: '200px',
        x: `${c*200}px`,
        y: `${r*200}px`,
        title: {
          text: 'pieTransform:' + transforms[idx][2],
          fontSize: '11px'
        },
        plot: {
          borderWidth: '1px',
          borderColor: '#fff',
          borderAlpha: 0.2,
          // PIE TRANSFORM ATTRIBUTES HERE
          slice: transforms[idx][1],
          pieTransform: transforms[idx][2],
          hoverState: {
            visible: false
          },
          tooltip: {
            text: 'Pie #%plot-index'
          },
          valueBox: {
            placement: transforms[idx][3],
            fontSize: '11px',
            text: '#%plot-index'
          }
        },
        plotarea: {
          margin: '15px 5px 5px 5px'
        },
        series: []
      };
      for (let i = 0; i < transforms[idx][0]; i++) {
        gdata.series.push({
          values: [1],
          backgroundColor: palette[i]
        });
      }
      chartConfig.graphset.push(gdata);
    }
  }
}

zingchart.render({
  id: 'myChart',
  width: '100%',
  height: '100%',
  data: chartConfig
});