• 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 chartConfig = {
    28.       type: 'bubble-pie',
    29.       title: {
    30.         text: 'Corporate Survey',
    31.       },
    32.       subtitle: {
    33.         text: 'Public Perception',
    34.       },
    35.       legend: {
    36.         align: 'center',
    37.         item: {
    38.           text: '%data-pie',
    39.         },
    40.         verticalAlign: 'bottom',
    41.       },
    42.       plot: {
    43.         tooltip: {
    44.           text: '%data-pv% %data-pie',
    45.         },
    46.         valueBox: {
    47.           text: '%node-size-value total responses',
    48.           fontColor: 'black',
    49.           fontWeight: 'normal',
    50.           placement: 'bottom',
    51.         },
    52.         values: [
    53.           [2017, 2003, 2003],
    54.           [2018, 2543, 2543],
    55.           [2019, 3521, 3521],
    56.           [2020, 2804, 2804],
    57.           [2021, 4205, 4205],
    58.         ],
    59.         dataBubble: ['2017', '2018', '2019', '2020', '2021'],
    60.       },
    61.       scaleX: {
    62.         values: '2017:2021:1',
    63.       },
    64.       series: [{
    65.           dataPie: 'Positive',
    66.           dataV: [603, 789, 1800, 1502, 2105],
    67.           marker: {
    68.             backgroundColor: '#5dc911',
    69.           },
    70.         },
    71.         {
    72.           dataPie: 'Negative',
    73.           dataV: [1200, 1600, 1421, 1200, 1900],
    74.           marker: {
    75.             backgroundColor: '#e32143',
    76.           },
    77.         },
    78.         {
    79.           dataPie: 'Neutral',
    80.           dataV: [200, 154, 300, 102, 200],
    81.           marker: {
    82.             backgroundColor: '#bfbfbf',
    83.           },
    84.         },
    85.       ],
    86.     };
    87.  
    88.     zingchart.render({
    89.       id: 'myChart',
    90.       data: chartConfig,
    91.       height: '100%',
    92.       width: '100%',
    93.     });
    94.   </script>
    95. </body>
    96.  
    97. </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 chartConfig = {
    2.   type: 'bubble-pie',
    3.   title: {
    4.     text: 'Corporate Survey',
    5.   },
    6.   subtitle: {
    7.     text: 'Public Perception',
    8.   },
    9.   legend: {
    10.     align: 'center',
    11.     item: {
    12.       text: '%data-pie',
    13.     },
    14.     verticalAlign: 'bottom',
    15.   },
    16.   plot: {
    17.     tooltip: {
    18.       text: '%data-pv% %data-pie',
    19.     },
    20.     valueBox: {
    21.       text: '%node-size-value total responses',
    22.       fontColor: 'black',
    23.       fontWeight: 'normal',
    24.       placement: 'bottom',
    25.     },
    26.     values: [
    27.       [2017, 2003, 2003],
    28.       [2018, 2543, 2543],
    29.       [2019, 3521, 3521],
    30.       [2020, 2804, 2804],
    31.       [2021, 4205, 4205],
    32.     ],
    33.     dataBubble: ['2017', '2018', '2019', '2020', '2021'],
    34.   },
    35.   scaleX: {
    36.     values: '2017:2021:1',
    37.   },
    38.   series: [{
    39.       dataPie: 'Positive',
    40.       dataV: [603, 789, 1800, 1502, 2105],
    41.       marker: {
    42.         backgroundColor: '#5dc911',
    43.       },
    44.     },
    45.     {
    46.       dataPie: 'Negative',
    47.       dataV: [1200, 1600, 1421, 1200, 1900],
    48.       marker: {
    49.         backgroundColor: '#e32143',
    50.       },
    51.     },
    52.     {
    53.       dataPie: 'Neutral',
    54.       dataV: [200, 154, 300, 102, 200],
    55.       marker: {
    56.         backgroundColor: '#bfbfbf',
    57.       },
    58.     },
    59.   ],
    60. };
    61.  
    62. zingchart.render({
    63.   id: 'myChart',
    64.   data: chartConfig,
    65.   height: '100%',
    66.   width: '100%',
    67. });