• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 650px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.  
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // full ZingChart schema can be found here:
    34.     // https://www.zingchart.com/docs/api/json-configuration/
    35.     let palette = [
    36.       '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
    37.       '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    38.     ];
    39.  
    40.     let transforms = [
    41.       [8, '0%', 'none', 'fixed=60%;50%'],
    42.       [8, '40%', 'none', 'fixed=60%;50%'],
    43.       [8, '0%', 'flat', 'fixed=60%;50%'],
    44.       [8, '40%', 'flat', 'fixed=50%;50%'],
    45.       [8, '0%', 'fold=20', 'fixed=50%;50%'],
    46.       [8, '40%', 'fold=20', 'fixed=35%;50%'],
    47.       [5, '40%', 'callout=8', 'fixed=50%;50%'],
    48.       [5, '60%', 'flow=10', 'fixed=50%;60%'],
    49.       [5, '60%', 'flow=-99', 'fixed=50%;40%'],
    50.       [8, '0%', 'bite=15', 'fixed=50%;50%'],
    51.       [8, '40%', 'bite=15', 'fixed=40%;50%'],
    52.       [4, '0%', 'droplet', 'fixed=70%;50%']
    53.     ];
    54.  
    55.     let chartConfig = {
    56.       graphset: []
    57.     };
    58.  
    59.     for (let r = 0; r < 3; r++) {
    60.       for (let c = 0; c < 4; c++) {
    61.         let idx = r * 4 + c;
    62.         if (transforms[idx]) {
    63.           let gdata = {
    64.             type: 'pie',
    65.             width: '200px',
    66.             height: '200px',
    67.             x: `${c*200}px`,
    68.             y: `${r*200}px`,
    69.             title: {
    70.               text: 'pieTransform:' + transforms[idx][2],
    71.               fontSize: '11px'
    72.             },
    73.             plot: {
    74.               borderWidth: '1px',
    75.               borderColor: '#fff',
    76.               borderAlpha: 0.2,
    77.               // PIE TRANSFORM ATTRIBUTES HERE
    78.               slice: transforms[idx][1],
    79.               pieTransform: transforms[idx][2],
    80.               hoverState: {
    81.                 visible: false
    82.               },
    83.               tooltip: {
    84.                 text: 'Pie #%plot-index'
    85.               },
    86.               valueBox: {
    87.                 placement: transforms[idx][3],
    88.                 fontSize: '11px',
    89.                 text: '#%plot-index'
    90.               }
    91.             },
    92.             plotarea: {
    93.               margin: '15px 5px 5px 5px'
    94.             },
    95.             series: []
    96.           };
    97.           for (let i = 0; i < transforms[idx][0]; i++) {
    98.             gdata.series.push({
    99.               values: [1],
    100.               backgroundColor: palette[i]
    101.             });
    102.           }
    103.           chartConfig.graphset.push(gdata);
    104.         }
    105.       }
    106.     }
    107.  
    108.     zingchart.render({
    109.       id: 'myChart',
    110.       width: '100%',
    111.       height: '100%',
    112.       data: chartConfig
    113.     });
    114.   </script>
    115. </body>
    116.  
    117. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 650px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. // full ZingChart schema can be found here:
    2. // https://www.zingchart.com/docs/api/json-configuration/
    3. let palette = [
    4.   '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
    5.   '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    6. ];
    7.  
    8. let transforms = [
    9.   [8, '0%', 'none', 'fixed=60%;50%'],
    10.   [8, '40%', 'none', 'fixed=60%;50%'],
    11.   [8, '0%', 'flat', 'fixed=60%;50%'],
    12.   [8, '40%', 'flat', 'fixed=50%;50%'],
    13.   [8, '0%', 'fold=20', 'fixed=50%;50%'],
    14.   [8, '40%', 'fold=20', 'fixed=35%;50%'],
    15.   [5, '40%', 'callout=8', 'fixed=50%;50%'],
    16.   [5, '60%', 'flow=10', 'fixed=50%;60%'],
    17.   [5, '60%', 'flow=-99', 'fixed=50%;40%'],
    18.   [8, '0%', 'bite=15', 'fixed=50%;50%'],
    19.   [8, '40%', 'bite=15', 'fixed=40%;50%'],
    20.   [4, '0%', 'droplet', 'fixed=70%;50%']
    21. ];
    22.  
    23. let chartConfig = {
    24.   graphset: []
    25. };
    26.  
    27. for (let r = 0; r < 3; r++) {
    28.   for (let c = 0; c < 4; c++) {
    29.     let idx = r * 4 + c;
    30.     if (transforms[idx]) {
    31.       let gdata = {
    32.         type: 'pie',
    33.         width: '200px',
    34.         height: '200px',
    35.         x: `${c*200}px`,
    36.         y: `${r*200}px`,
    37.         title: {
    38.           text: 'pieTransform:' + transforms[idx][2],
    39.           fontSize: '11px'
    40.         },
    41.         plot: {
    42.           borderWidth: '1px',
    43.           borderColor: '#fff',
    44.           borderAlpha: 0.2,
    45.           // PIE TRANSFORM ATTRIBUTES HERE
    46.           slice: transforms[idx][1],
    47.           pieTransform: transforms[idx][2],
    48.           hoverState: {
    49.             visible: false
    50.           },
    51.           tooltip: {
    52.             text: 'Pie #%plot-index'
    53.           },
    54.           valueBox: {
    55.             placement: transforms[idx][3],
    56.             fontSize: '11px',
    57.             text: '#%plot-index'
    58.           }
    59.         },
    60.         plotarea: {
    61.           margin: '15px 5px 5px 5px'
    62.         },
    63.         series: []
    64.       };
    65.       for (let i = 0; i < transforms[idx][0]; i++) {
    66.         gdata.series.push({
    67.           values: [1],
    68.           backgroundColor: palette[i]
    69.         });
    70.       }
    71.       chartConfig.graphset.push(gdata);
    72.     }
    73.   }
    74. }
    75.  
    76. zingchart.render({
    77.   id: 'myChart',
    78.   width: '100%',
    79.   height: '100%',
    80.   data: chartConfig
    81. });