• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <style>
        * {
          font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
          font-size: 12px;
        }
      </style>
      <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
      <script nonce="PFDhyayoH3wtfDWWboTe/g==" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
    
      <script nonce="PFDhyayoH3wtfDWWboTe/g==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
    
      <div style="padding:5px;">
        <select id="n">
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    		<option value="7" selected="selected">7</option>
    	</select> elements,
        <select id="a">
    		<option value="180">180</option>
    		<option value="270">270</option>
    		<option value="360" selected="selected">360</option>
    	</select> aperture, starting at
        <select id="ra">
    		<option value="0">0</option>
    		<option value="45">45</option>
    		<option value="90">90</option>
    		<option value="135">135</option>
    		<option value="180">180</option>
    		<option value="225">225</option>
    		<option value="270" selected="selected">270</option>
    		<option value="315">315</option>
    	</select> degrees, with
        <select id="an">
    		<option value="-1" selected="selected">no animation</option>
    		<option value="0">effect 0</option>
    		<option value="1">effect 1</option>
    		<option value="2">effect 2</option>
    		<option value="3">effect 3</option>
    		<option value="4">effect 4</option>
    	</select>,
        <select id="s">
    		<option value="0" selected="selected">non-sequenced</option>
    		<option value="1">in sequence</option>
    	</select>
        <button id="r">Render</button>
      </div>
    
      <div id="zc"></div>
    
      <script nonce="PFDhyayoH3wtfDWWboTe/g==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
        var aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
        var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    
        var aText = [
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet',
          'Lorem ipsum<br>dolor sit amet'
        ];
    
        var aTooltipText = [
          'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
          'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
        ];
    
        var render = function() {
    
          var cdata = {
            resources: [{
              type: 'css',
              url: 'https://fonts.googleapis.com/css?family=Exo+2'
            }],
    
            type: 'pie',
            plotarea: {
              margin: 0
            },
    
            scaleR: {
              aperture: parseInt(a.value, 10),
              refAngle: parseInt(ra.value, 10)
            },
    
            plot: {
              detach: false,
              borderWidth: 8,
              borderColor: '#FFF',
              slice: '30%',
              pieTransform: 'none',
              hoverState: {
                visible: false
              }
            },
            series: []
          };
    
          if (an.value !== '-1') {
            cdata['plot'].animation = {
              speed: 200,
              method: 0,
              effect: parseInt(an.value, 10),
              sequence: parseInt(s.value, 10)
            };
          }
    
          var items = parseInt(n.value, 10);
    
          for (var i = 0; i < items; i++) {
            var no = i + 1;
            cdata['series'].push({
              values: [1],
              tooltipText: aTooltipText[i],
              dataNo: ((no <= 9) ? '0' + no : no),
              valueBox: [{
                  width: 48,
                  height: 48,
                  align: 'center',
                  placement: 'fixed=94%;50%',
                  borderRadius: 48,
                  backgroundColor: aPalette[i],
                  fontSize: 24,
                  shadow: false,
                  color: '#FFF',
                  decimals: 0,
                  fontFamily: '"Exo 2"',
                  text: '%data-no'
                },
                {
                  align: 'left',
                  placement: 'fixed=50%;50%;+0',
                  backgroundColor: 'none',
                  shadow: false,
                  fontWeight: 'none',
                  fontFamily: '"Exo 2"',
                  fontSize: 12,
                  text: aText[i]
                }
              ],
              backgroundColor: aPalette[i],
              gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
              gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
            });
          }
    
          WebFont.load({
            google: {
              families: ['Exo 2']
            },
            active: function() {
    
              zingchart.render({
                id: 'zc',
                width: 450,
                height: 450,
                output: 'svg',
                data: cdata,
                events: {
                  animation_end: function(p) {
                    if (an.value !== '-1') {
                      addElements(p);
                    }
                  },
                  load: function(p) {
                    if (an.value === '-1') {
                      addElements(p);
                    }
                  }
                }
              });
            }
          });
        }
    
        window.addEventListener('load', function() {
    
          r.addEventListener('click', function() {
            render();
          });
          render();
    
    
          window.addElements = function(p) {
            var iPlots = zingchart.exec(p.id, 'getplotlength');
            var aObjects = [],
              oInfo;
    
            for (var i = 0; i < iPlots; i++) {
              oInfo = zingchart.exec(p.id, 'getobjectinfo', {
                object: 'node',
                plotindex: i,
                nodeindex: 0
              });
            }
    
            aObjects.push({
              x: oInfo.x,
              y: oInfo.y,
              width: 1.75 * oInfo.slice * oInfo.size,
              fontFamily: '"Exo 2"',
              fontSize: 14,
              align: 'center',
              fontWeight: 600,
              color: '#666',
              anchor: 'c',
              text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
            });
    
            zingchart.exec(p.id, 'addobject', {
              type: 'label',
              data: aObjects
            });
          };
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <style>
        * {
          font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
          font-size: 12px;
        }
      </style>
      <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
    
      <div style="padding:5px;">
        <select id="n">
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    		<option value="7" selected="selected">7</option>
    	</select> elements,
        <select id="a">
    		<option value="180">180</option>
    		<option value="270">270</option>
    		<option value="360" selected="selected">360</option>
    	</select> aperture, starting at
        <select id="ra">
    		<option value="0">0</option>
    		<option value="45">45</option>
    		<option value="90">90</option>
    		<option value="135">135</option>
    		<option value="180">180</option>
    		<option value="225">225</option>
    		<option value="270" selected="selected">270</option>
    		<option value="315">315</option>
    	</select> degrees, with
        <select id="an">
    		<option value="-1" selected="selected">no animation</option>
    		<option value="0">effect 0</option>
    		<option value="1">effect 1</option>
    		<option value="2">effect 2</option>
    		<option value="3">effect 3</option>
    		<option value="4">effect 4</option>
    	</select>,
        <select id="s">
    		<option value="0" selected="selected">non-sequenced</option>
    		<option value="1">in sequence</option>
    	</select>
        <button id="r">Render</button>
      </div>
    
      <div id="zc"></div>
    
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
    var aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
    var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    
    var aText = [
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet',
      'Lorem ipsum<br>dolor sit amet'
    ];
    
    var aTooltipText = [
      'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
      'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    ];
    
    var render = function() {
    
      var cdata = {
        resources: [{
          type: 'css',
          url: 'https://fonts.googleapis.com/css?family=Exo+2'
        }],
    
        type: 'pie',
        plotarea: {
          margin: 0
        },
    
        scaleR: {
          aperture: parseInt(a.value, 10),
          refAngle: parseInt(ra.value, 10)
        },
    
        plot: {
          detach: false,
          borderWidth: 8,
          borderColor: '#FFF',
          slice: '30%',
          pieTransform: 'none',
          hoverState: {
            visible: false
          }
        },
        series: []
      };
    
      if (an.value !== '-1') {
        cdata['plot'].animation = {
          speed: 200,
          method: 0,
          effect: parseInt(an.value, 10),
          sequence: parseInt(s.value, 10)
        };
      }
    
      var items = parseInt(n.value, 10);
    
      for (var i = 0; i < items; i++) {
        var no = i + 1;
        cdata['series'].push({
          values: [1],
          tooltipText: aTooltipText[i],
          dataNo: ((no <= 9) ? '0' + no : no),
          valueBox: [{
              width: 48,
              height: 48,
              align: 'center',
              placement: 'fixed=94%;50%',
              borderRadius: 48,
              backgroundColor: aPalette[i],
              fontSize: 24,
              shadow: false,
              color: '#FFF',
              decimals: 0,
              fontFamily: '"Exo 2"',
              text: '%data-no'
            },
            {
              align: 'left',
              placement: 'fixed=50%;50%;+0',
              backgroundColor: 'none',
              shadow: false,
              fontWeight: 'none',
              fontFamily: '"Exo 2"',
              fontSize: 12,
              text: aText[i]
            }
          ],
          backgroundColor: aPalette[i],
          gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
          gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
        });
      }
    
      WebFont.load({
        google: {
          families: ['Exo 2']
        },
        active: function() {
    
          zingchart.render({
            id: 'zc',
            width: 450,
            height: 450,
            output: 'svg',
            data: cdata,
            events: {
              animation_end: function(p) {
                if (an.value !== '-1') {
                  addElements(p);
                }
              },
              load: function(p) {
                if (an.value === '-1') {
                  addElements(p);
                }
              }
            }
          });
        }
      });
    }
    
    window.addEventListener('load', function() {
    
      r.addEventListener('click', function() {
        render();
      });
      render();
    
    
      window.addElements = function(p) {
        var iPlots = zingchart.exec(p.id, 'getplotlength');
        var aObjects = [],
          oInfo;
    
        for (var i = 0; i < iPlots; i++) {
          oInfo = zingchart.exec(p.id, 'getobjectinfo', {
            object: 'node',
            plotindex: i,
            nodeindex: 0
          });
        }
    
        aObjects.push({
          x: oInfo.x,
          y: oInfo.y,
          width: 1.75 * oInfo.slice * oInfo.size,
          fontFamily: '"Exo 2"',
          fontSize: 14,
          align: 'center',
          fontWeight: 600,
          color: '#666',
          anchor: 'c',
          text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
        });
    
        zingchart.exec(p.id, 'addobject', {
          type: 'label',
          data: aObjects
        });
      };
    });