• Edit
  • Download
    1. <!DOCTYPE html>
    2. <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.     .chart--container {
    10.       min-height: 530px;
    11.       width: 100%;
    12.       height: 100%;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20.  
    21. <body>
    22.   <div id="myChart" class="chart--container">
    23.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    24.   </div>
    25.   <script>
    26.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    27.     let chartData = [{
    28.         text: 'Major donors',
    29.         values: [35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    30.       },
    31.       {
    32.         text: 'New mixed giver',
    33.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    34.       },
    35.       {
    36.         text: 'New COG',
    37.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    38.       },
    39.       {
    40.         text: 'Active mixed giver',
    41.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    42.       },
    43.       {
    44.         text: 'Active COG',
    45.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    46.       },
    47.       {
    48.         text: 'New cash',
    49.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    50.       },
    51.       {
    52.         text: 'Lapsing COG active cash',
    53.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    54.       },
    55.       {
    56.         text: 'Lapsing COG',
    57.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    58.       },
    59.       {
    60.         text: 'Active cash',
    61.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    62.       },
    63.       {
    64.         text: 'Active action',
    65.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    66.       },
    67.       {
    68.         text: 'Lapsed COG',
    69.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    70.       },
    71.       {
    72.         text: 'Lapsed cash',
    73.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    74.       },
    75.       {
    76.         text: 'Lapsed action',
    77.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    78.       },
    79.       {
    80.         text: 'Emailable',
    81.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    82.       },
    83.       {
    84.         text: 'Other',
    85.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    86.       },
    87.       {
    88.         text: 'New contact',
    89.         values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 89],
    90.       },
    91.     ];
    92.  
    93.     let chartConfig = {
    94.       type: 'chord',
    95.       options: {
    96.         sizeFactor: 0.5,
    97.         anglePadding: 1,
    98.         colorType: 'palette',
    99.         palette: [
    100.           '#F44336',
    101.           '#E91E63',
    102.           '#9C27B0',
    103.           '#673AB7',
    104.           '#3F51B5',
    105.           '#2196F3',
    106.           '#03A9F4',
    107.           '#00BCD4',
    108.           '#009688',
    109.           '#4CAF50',
    110.           '#8BC34A',
    111.           '#CDDC39',
    112.           '#FFEB3B',
    113.           '#FFC107',
    114.           '#FF9800',
    115.           '#FF5722',
    116.         ],
    117.         style: {
    118.           label: {
    119.             visible: false,
    120.           },
    121.         },
    122.       },
    123.       series: chartData,
    124.     };
    125.  
    126.     zingchart.render({
    127.       id: 'myChart',
    128.       data: chartConfig,
    129.       height: '100%',
    130.       width: '100%',
    131.     });
    132.   </script>
    133. </body>
    134.  
    135. </html>
    1. <!DOCTYPE html>
    2. <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. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. .chart--container {
    2.   min-height: 530px;
    3.   width: 100%;
    4.   height: 100%;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. let chartData = [{
    2.     text: 'Major donors',
    3.     values: [35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    4.   },
    5.   {
    6.     text: 'New mixed giver',
    7.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    8.   },
    9.   {
    10.     text: 'New COG',
    11.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    12.   },
    13.   {
    14.     text: 'Active mixed giver',
    15.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    16.   },
    17.   {
    18.     text: 'Active COG',
    19.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    20.   },
    21.   {
    22.     text: 'New cash',
    23.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    24.   },
    25.   {
    26.     text: 'Lapsing COG active cash',
    27.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    28.   },
    29.   {
    30.     text: 'Lapsing COG',
    31.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    32.   },
    33.   {
    34.     text: 'Active cash',
    35.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    36.   },
    37.   {
    38.     text: 'Active action',
    39.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    40.   },
    41.   {
    42.     text: 'Lapsed COG',
    43.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    44.   },
    45.   {
    46.     text: 'Lapsed cash',
    47.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    48.   },
    49.   {
    50.     text: 'Lapsed action',
    51.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    52.   },
    53.   {
    54.     text: 'Emailable',
    55.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    56.   },
    57.   {
    58.     text: 'Other',
    59.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 0],
    60.   },
    61.   {
    62.     text: 'New contact',
    63.     values: [28, 40, 39, 36, 35, 42, 67, 89, 35, 42, 67, 89, 35, 42, 67, 89],
    64.   },
    65. ];
    66.  
    67. let chartConfig = {
    68.   type: 'chord',
    69.   options: {
    70.     sizeFactor: 0.5,
    71.     anglePadding: 1,
    72.     colorType: 'palette',
    73.     palette: [
    74.       '#F44336',
    75.       '#E91E63',
    76.       '#9C27B0',
    77.       '#673AB7',
    78.       '#3F51B5',
    79.       '#2196F3',
    80.       '#03A9F4',
    81.       '#00BCD4',
    82.       '#009688',
    83.       '#4CAF50',
    84.       '#8BC34A',
    85.       '#CDDC39',
    86.       '#FFEB3B',
    87.       '#FFC107',
    88.       '#FF9800',
    89.       '#FF5722',
    90.     ],
    91.     style: {
    92.       label: {
    93.         visible: false,
    94.       },
    95.     },
    96.   },
    97.   series: chartData,
    98. };
    99.  
    100. zingchart.render({
    101.   id: 'myChart',
    102.   data: chartConfig,
    103.   height: '100%',
    104.   width: '100%',
    105. });