• Edit
  • Download
  • <!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 (var r = 0; r < 3; r++) {
          for (var c = 0; c < 4; c++) {
            var idx = r * 4 + c;
            if (transforms[idx]) {
              var gdata = {
                x: c * 200,
                y: r * 200,
                width: 200,
                height: 200,
                type: 'pie',
                plotarea: {
                  margin: '15 5 5 5'
                },
                title: {
                  fontSize: 11,
                  text: 'pieTransform:' + transforms[idx][2]
                },
                plot: {
                  borderWidth: 1,
                  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: 11,
                    text: '#%plot-index'
                  }
                },
                series: []
              };
              for (var 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 (var r = 0; r < 3; r++) {
      for (var c = 0; c < 4; c++) {
        var idx = r * 4 + c;
        if (transforms[idx]) {
          var gdata = {
            x: c * 200,
            y: r * 200,
            width: 200,
            height: 200,
            type: 'pie',
            plotarea: {
              margin: '15 5 5 5'
            },
            title: {
              fontSize: 11,
              text: 'pieTransform:' + transforms[idx][2]
            },
            plot: {
              borderWidth: 1,
              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: 11,
                text: '#%plot-index'
              }
            },
            series: []
          };
          for (var 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
    });