• 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>
        .chart--container {
          min-height: 530px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <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"];
        let chartConfig = {
          type: 'bubble-pie',
          title: {
            text: 'Corporate Survey'
          },
          subtitle: {
            text: 'Public Perception'
          },
          legend: {
            align: 'center',
            item: {
              text: '%data-pie'
            },
            verticalAlign: 'bottom'
          },
          plot: {
            values: [
              [2015, 2003, 2003],
              [2016, 2543, 2543],
              [2017, 3521, 3521],
              [2018, 2804, 2804],
              [2019, 4205, 4205]
            ],
            tooltip: {
              text: '%data-pv% %data-pie'
            },
            valueBox: {
              text: '%node-size-value total responses',
              fontColor: 'black',
              fontWeight: 'normal',
              placement: 'bottom'
            },
            dataBubble: ['2015', '2016', '2017', '2018', '2019']
          },
          scaleX: {
            values: '2015:2019:1'
          },
          series: [{
              dataPie: 'Positive',
              dataV: [603, 789, 1800, 1502, 2105],
              marker: {
                backgroundColor: '#5dc911'
              }
            },
            {
              dataPie: 'Negative',
              dataV: [1200, 1600, 1421, 1200, 1900],
              marker: {
                backgroundColor: '#e32143'
              }
            },
            {
              dataPie: 'Neutral',
              dataV: [200, 154, 300, 102, 200],
              marker: {
                backgroundColor: '#bfbfbf'
              }
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
      </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>
    		<div id="myChart" class="chart--container">
    			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    		</div>
    	</body>
    </html>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      type: 'bubble-pie',
      title: {
        text: 'Corporate Survey'
      },
      subtitle: {
        text: 'Public Perception'
      },
      legend: {
        align: 'center',
        item: {
          text: '%data-pie'
        },
        verticalAlign: 'bottom'
      },
      plot: {
        values: [[2015, 2003, 2003], [2016, 2543, 2543], [2017, 3521, 3521], [2018, 2804, 2804], [2019, 4205, 4205]],
        tooltip: {
          text: '%data-pv% %data-pie'
        },
        valueBox: {
          text: '%node-size-value total responses',
          fontColor: 'black',
          fontWeight: 'normal',
          placement: 'bottom'
        },
        dataBubble: ['2015', '2016', '2017', '2018', '2019']
      },
      scaleX: {
        values: '2015:2019:1'
      },
      series: [
        {
          dataPie: 'Positive',
          dataV: [603, 789, 1800, 1502, 2105],
          marker: {
            backgroundColor: '#5dc911'
          }
        },
        {
          dataPie: 'Negative',
          dataV: [1200, 1600, 1421, 1200, 1900],
          marker: {
            backgroundColor: '#e32143'
          }
        },
        {
          dataPie: 'Neutral',
          dataV: [200, 154, 300, 102, 200],
          marker: {
            backgroundColor: '#bfbfbf'
          }
        }
      ]
    };
     
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });