• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
                min-height: 600px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
            <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
    
                // 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>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      </head>
      <body>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
          <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
      </body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
      min-height: 600px;
    }
    
    .zc-ref {
      display: none;
    }
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    
      // 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
      });
    });