• 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.     .chart--container {
    10.       height: 100%;
    11.       width: 100%;
    12.       min-height: 530px;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20. ​
    21.  
    22. <body class="zc-body">
    23.   ​
    24.   <div id="myChart" class="chart--container">
    25.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    26.   </div>
    27.  
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    30.     // -----------------------------
    31.     let chartConfig = {
    32.       type: 'nestedpie',
    33.       title: {
    34.         text: 'Animated Nested Pie Chart',
    35.       },
    36.       legend: {
    37.         borderColor: 'gray',
    38.         borderRadius: '5px',
    39.         borderWidth: '1px',
    40.         dragHandler: 'icon',
    41.         header: {
    42.           text: 'Ages',
    43.           fontColor: 'purple',
    44.           fontFamily: 'Georgia',
    45.           fontSize: '12px',
    46.           fontWeight: 'normal',
    47.         },
    48.         icon: {
    49.           lineColor: 'orange',
    50.         },
    51.         item: {
    52.           fontColor: 'black',
    53.           fontFamily: 'Georgia',
    54.         },
    55.         lineStyle: 'dashdot',
    56.         marker: {
    57.           type: 'circle',
    58.         },
    59.         minimize: true,
    60.         toggleAction: 'remove',
    61.       },
    62.       plot: {
    63.         tooltip: {
    64.           text: '%data-year Ages %t: %v',
    65.           padding: '10%',
    66.           alpha: 0.7,
    67.           backgroundColor: 'white',
    68.           borderColor: 'gray',
    69.           borderRadius: '3px',
    70.           borderWidth: '1px',
    71.           fontColor: 'black',
    72.           fontFamily: 'Georgia',
    73.           fontSize: '12px',
    74.           lineStyle: 'dashdot',
    75.           textAlpha: 1,
    76.         },
    77.         valueBox: {
    78.           text: '%data-year',
    79.           fontColor: 'white',
    80.           fontFamily: 'Georgia',
    81.           fontSize: '12px',
    82.           fontWeight: 'normal',
    83.           rules: [{
    84.             rule: '%p != 0',
    85.             visible: false,
    86.           }, ],
    87.         },
    88.         alpha: 0.8,
    89.         animation: {
    90.           effect: 'ANIMATION_EXPAND_LEFT',
    91.           onLegendToggle: false,
    92.           method: 'ANIMATION_BACK_EASE_OUT',
    93.           sequence: 'ANIMATION_BY_PLOT',
    94.           speed: 700,
    95.         },
    96.         borderColor: 'white',
    97.         borderWidth: '1px',
    98.         dataYear: ['2019', '2020', '2021'],
    99.         shadow: false,
    100.         sliceStart: '30%',
    101.       },
    102.       series: [{
    103.           text: '0-18',
    104.           values: [59, 55, 30],
    105.           backgroundColor: 'orange red',
    106.           tooltipText: 'Ages %t: %v',
    107.         },
    108.         {
    109.           text: '19-30',
    110.           values: [60, 50, 35],
    111.           backgroundColor: 'yellow orange',
    112.         },
    113.         {
    114.           text: '31-34',
    115.           values: [50, 40, 30],
    116.           backgroundColor: 'green blue',
    117.         },
    118.         {
    119.           text: '46-64',
    120.           values: [61, 59, 35],
    121.           backgroundColor: 'blue purple',
    122.         },
    123.         {
    124.           text: '65 and over',
    125.           values: [65, 55, 45],
    126.           backgroundColor: 'purple red',
    127.         },
    128.       ],
    129.     };
    130.  
    131.     // RENDER CHARTS
    132.     // -----------------------------
    133.     zingchart.render({
    134.       id: 'myChart',
    135.       data: chartConfig,
    136.     });
    137.   </script>
    138. </body>
    139.  
    140. </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. .chart--container {
    2.   height: 100%;
    3.   width: 100%;
    4.   min-height: 530px;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. // CHART CONFIG
    2. // -----------------------------
    3. let chartConfig = {
    4.   type: 'nestedpie',
    5.   title: {
    6.     text: 'Animated Nested Pie Chart',
    7.   },
    8.   legend: {
    9.     borderColor: 'gray',
    10.     borderRadius: '5px',
    11.     borderWidth: '1px',
    12.     dragHandler: 'icon',
    13.     header: {
    14.       text: 'Ages',
    15.       fontColor: 'purple',
    16.       fontFamily: 'Georgia',
    17.       fontSize: '12px',
    18.       fontWeight: 'normal',
    19.     },
    20.     icon: {
    21.       lineColor: 'orange',
    22.     },
    23.     item: {
    24.       fontColor: 'black',
    25.       fontFamily: 'Georgia',
    26.     },
    27.     lineStyle: 'dashdot',
    28.     marker: {
    29.       type: 'circle',
    30.     },
    31.     minimize: true,
    32.     toggleAction: 'remove',
    33.   },
    34.   plot: {
    35.     tooltip: {
    36.       text: '%data-year Ages %t: %v',
    37.       padding: '10%',
    38.       alpha: 0.7,
    39.       backgroundColor: 'white',
    40.       borderColor: 'gray',
    41.       borderRadius: '3px',
    42.       borderWidth: '1px',
    43.       fontColor: 'black',
    44.       fontFamily: 'Georgia',
    45.       fontSize: '12px',
    46.       lineStyle: 'dashdot',
    47.       textAlpha: 1,
    48.     },
    49.     valueBox: {
    50.       text: '%data-year',
    51.       fontColor: 'white',
    52.       fontFamily: 'Georgia',
    53.       fontSize: '12px',
    54.       fontWeight: 'normal',
    55.       rules: [{
    56.         rule: '%p != 0',
    57.         visible: false,
    58.       }, ],
    59.     },
    60.     alpha: 0.8,
    61.     animation: {
    62.       effect: 'ANIMATION_EXPAND_LEFT',
    63.       onLegendToggle: false,
    64.       method: 'ANIMATION_BACK_EASE_OUT',
    65.       sequence: 'ANIMATION_BY_PLOT',
    66.       speed: 700,
    67.     },
    68.     borderColor: 'white',
    69.     borderWidth: '1px',
    70.     dataYear: ['2019', '2020', '2021'],
    71.     shadow: false,
    72.     sliceStart: '30%',
    73.   },
    74.   series: [{
    75.       text: '0-18',
    76.       values: [59, 55, 30],
    77.       backgroundColor: 'orange red',
    78.       tooltipText: 'Ages %t: %v',
    79.     },
    80.     {
    81.       text: '19-30',
    82.       values: [60, 50, 35],
    83.       backgroundColor: 'yellow orange',
    84.     },
    85.     {
    86.       text: '31-34',
    87.       values: [50, 40, 30],
    88.       backgroundColor: 'green blue',
    89.     },
    90.     {
    91.       text: '46-64',
    92.       values: [61, 59, 35],
    93.       backgroundColor: 'blue purple',
    94.     },
    95.     {
    96.       text: '65 and over',
    97.       values: [65, 55, 45],
    98.       backgroundColor: 'purple red',
    99.     },
    100.   ],
    101. };
    102.  
    103. // RENDER CHARTS
    104. // -----------------------------
    105. zingchart.render({
    106.   id: 'myChart',
    107.   data: chartConfig,
    108. });