• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    14.   <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    15.  
    16.  
    17.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    18.   <style>
    19.     html,
    20.     body {
    21.       height: 100%;
    22.       width: 100%;
    23.       margin: 0;
    24.       padding: 0;
    25.     }
    26.  
    27.     #myChart {
    28.       height: 100%;
    29.       width: 100%;
    30.       min-height: 150px;
    31.     }
    32.  
    33.     .zc-ref {
    34.       display: none;
    35.     }
    36.   </style>
    37. </head>
    38.  
    39. <body>
    40.  
    41.   <div style="padding:5px;">
    42.     <select id="n">
    43.       <option value="3">3</option>
    44.       <option value="4">4</option>
    45.       <option value="5">5</option>
    46.       <option value="6">6</option>
    47.       <option value="7" selected="selected">7</option>
    48.     </select> elements,
    49.     <select id="a">
    50.       <option value="180">180</option>
    51.       <option value="270">270</option>
    52.       <option value="360" selected="selected">360</option>
    53.     </select> aperture, starting at
    54.     <select id="ra">
    55.       <option value="0">0</option>
    56.       <option value="45">45</option>
    57.       <option value="90">90</option>
    58.       <option value="135">135</option>
    59.       <option value="180">180</option>
    60.       <option value="225">225</option>
    61.       <option value="270" selected="selected">270</option>
    62.       <option value="315">315</option>
    63.     </select> degrees, with
    64.     <select id="an">
    65.       <option value="-1" selected="selected">no animation</option>
    66.       <option value="0">effect 0</option>
    67.       <option value="1">effect 1</option>
    68.       <option value="2">effect 2</option>
    69.       <option value="3">effect 3</option>
    70.       <option value="4">effect 4</option>
    71.     </select>,
    72.     <select id="s">
    73.       <option value="0" selected="selected">non-sequenced</option>
    74.       <option value="1">in sequence</option>
    75.     </select>
    76.     <button id="r">Render</button>
    77.   </div>
    78.  
    79.   <div id="zc"></div>
    80.  
    81.   <script>
    82.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    83.     var aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
    84.     var aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
    85.     var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    86.  
    87.     var aText = [
    88.       'Lorem ipsum<br>dolor sit amet',
    89.       'Lorem ipsum<br>dolor sit amet',
    90.       'Lorem ipsum<br>dolor sit amet',
    91.       'Lorem ipsum<br>dolor sit amet',
    92.       'Lorem ipsum<br>dolor sit amet',
    93.       'Lorem ipsum<br>dolor sit amet',
    94.       'Lorem ipsum<br>dolor sit amet'
    95.     ];
    96.  
    97.     var aTooltipText = [
    98.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    99.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    100.     ];
    101.  
    102.     var render = function() {
    103.  
    104.       var cdata = {
    105.         resources: [{
    106.           type: 'css',
    107.           url: 'https://fonts.googleapis.com/css?family=Exo+2'
    108.         }],
    109.  
    110.         type: 'pie',
    111.         plotarea: {
    112.           margin: 0
    113.         },
    114.  
    115.         scaleR: {
    116.           aperture: parseInt(a.value, 10),
    117.           refAngle: parseInt(ra.value, 10)
    118.         },
    119.  
    120.         plot: {
    121.           detach: false,
    122.           borderWidth: 8,
    123.           borderColor: '#FFF',
    124.           slice: '30%',
    125.           pieTransform: 'none',
    126.           hoverState: {
    127.             visible: false
    128.           }
    129.         },
    130.         series: []
    131.       };
    132.  
    133.       if (an.value !== '-1') {
    134.         cdata['plot'].animation = {
    135.           speed: 200,
    136.           method: 0,
    137.           effect: parseInt(an.value, 10),
    138.           sequence: parseInt(s.value, 10)
    139.         };
    140.       }
    141.  
    142.       var items = parseInt(n.value, 10);
    143.  
    144.       for (var i = 0; i < items; i++) {
    145.         var no = i + 1;
    146.         cdata['series'].push({
    147.           values: [1],
    148.           tooltipText: aTooltipText[i],
    149.           dataNo: ((no <= 9) ? '0' + no : no),
    150.           valueBox: [{
    151.               width: 48,
    152.               height: 48,
    153.               align: 'center',
    154.               placement: 'fixed=94%;50%',
    155.               borderRadius: 48,
    156.               backgroundColor: aPalette[i],
    157.               fontSize: 24,
    158.               shadow: false,
    159.               color: '#FFF',
    160.               decimals: 0,
    161.               fontFamily: '"Exo 2"',
    162.               text: '%data-no'
    163.             },
    164.             {
    165.               align: 'left',
    166.               placement: 'fixed=50%;50%;+0',
    167.               backgroundColor: 'none',
    168.               shadow: false,
    169.               fontWeight: 'none',
    170.               fontFamily: '"Exo 2"',
    171.               fontSize: 12,
    172.               text: aText[i]
    173.             }
    174.           ],
    175.           backgroundColor: aPalette[i],
    176.           gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
    177.           gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
    178.         });
    179.       }
    180.  
    181.       WebFont.load({
    182.         google: {
    183.           families: ['Exo 2']
    184.         },
    185.         active: function() {
    186.  
    187.           zingchart.render({
    188.             id: 'zc',
    189.             width: 450,
    190.             height: 450,
    191.             output: 'svg',
    192.             data: cdata,
    193.             events: {
    194.               animation_end: function(p) {
    195.                 if (an.value !== '-1') {
    196.                   addElements(p);
    197.                 }
    198.               },
    199.               load: function(p) {
    200.                 if (an.value === '-1') {
    201.                   addElements(p);
    202.                 }
    203.               }
    204.             }
    205.           });
    206.         }
    207.       });
    208.     }
    209.  
    210.     window.addEventListener('load', function() {
    211.  
    212.       r.addEventListener('click', function() {
    213.         render();
    214.       });
    215.       render();
    216.  
    217.  
    218.       window.addElements = function(p) {
    219.         var iPlots = zingchart.exec(p.id, 'getplotlength');
    220.         var aObjects = [],
    221.           oInfo;
    222.  
    223.         for (var i = 0; i < iPlots; i++) {
    224.           oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    225.             object: 'node',
    226.             plotindex: i,
    227.             nodeindex: 0
    228.           });
    229.         }
    230.  
    231.         aObjects.push({
    232.           x: oInfo.x,
    233.           y: oInfo.y,
    234.           width: 1.75 * oInfo.slice * oInfo.size,
    235.           fontFamily: '"Exo 2"',
    236.           fontSize: 14,
    237.           align: 'center',
    238.           fontWeight: 600,
    239.           color: '#666',
    240.           anchor: 'c',
    241.           text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
    242.         });
    243.  
    244.         zingchart.exec(p.id, 'addobject', {
    245.           type: 'label',
    246.           data: aObjects
    247.         });
    248.       };
    249.     });
    250.   </script>
    251. </body>
    252.  
    253. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    14.   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    15.  
    16.  
    17.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    18. </head>
    19.  
    20. <body>
    21.  
    22.   <div style="padding:5px;">
    23.     <select id="n">
    24.       <option value="3">3</option>
    25.       <option value="4">4</option>
    26.       <option value="5">5</option>
    27.       <option value="6">6</option>
    28.       <option value="7" selected="selected">7</option>
    29.     </select> elements,
    30.     <select id="a">
    31.       <option value="180">180</option>
    32.       <option value="270">270</option>
    33.       <option value="360" selected="selected">360</option>
    34.     </select> aperture, starting at
    35.     <select id="ra">
    36.       <option value="0">0</option>
    37.       <option value="45">45</option>
    38.       <option value="90">90</option>
    39.       <option value="135">135</option>
    40.       <option value="180">180</option>
    41.       <option value="225">225</option>
    42.       <option value="270" selected="selected">270</option>
    43.       <option value="315">315</option>
    44.     </select> degrees, with
    45.     <select id="an">
    46.       <option value="-1" selected="selected">no animation</option>
    47.       <option value="0">effect 0</option>
    48.       <option value="1">effect 1</option>
    49.       <option value="2">effect 2</option>
    50.       <option value="3">effect 3</option>
    51.       <option value="4">effect 4</option>
    52.     </select>,
    53.     <select id="s">
    54.       <option value="0" selected="selected">non-sequenced</option>
    55.       <option value="1">in sequence</option>
    56.     </select>
    57.     <button id="r">Render</button>
    58.   </div>
    59.  
    60.   <div id="zc"></div>
    61.  
    62. </body>
    63.  
    64. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
    2. var aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
    3. var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    4.  
    5. var aText = [
    6.   'Lorem ipsum<br>dolor sit amet',
    7.   'Lorem ipsum<br>dolor sit amet',
    8.   'Lorem ipsum<br>dolor sit amet',
    9.   'Lorem ipsum<br>dolor sit amet',
    10.   'Lorem ipsum<br>dolor sit amet',
    11.   'Lorem ipsum<br>dolor sit amet',
    12.   'Lorem ipsum<br>dolor sit amet'
    13. ];
    14.  
    15. var aTooltipText = [
    16.   'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    17.   'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    18. ];
    19.  
    20. var render = function() {
    21.  
    22.   var cdata = {
    23.     resources: [{
    24.       type: 'css',
    25.       url: 'https://fonts.googleapis.com/css?family=Exo+2'
    26.     }],
    27.  
    28.     type: 'pie',
    29.     plotarea: {
    30.       margin: 0
    31.     },
    32.  
    33.     scaleR: {
    34.       aperture: parseInt(a.value, 10),
    35.       refAngle: parseInt(ra.value, 10)
    36.     },
    37.  
    38.     plot: {
    39.       detach: false,
    40.       borderWidth: 8,
    41.       borderColor: '#FFF',
    42.       slice: '30%',
    43.       pieTransform: 'none',
    44.       hoverState: {
    45.         visible: false
    46.       }
    47.     },
    48.     series: []
    49.   };
    50.  
    51.   if (an.value !== '-1') {
    52.     cdata['plot'].animation = {
    53.       speed: 200,
    54.       method: 0,
    55.       effect: parseInt(an.value, 10),
    56.       sequence: parseInt(s.value, 10)
    57.     };
    58.   }
    59.  
    60.   var items = parseInt(n.value, 10);
    61.  
    62.   for (var i = 0; i < items; i++) {
    63.     var no = i + 1;
    64.     cdata['series'].push({
    65.       values: [1],
    66.       tooltipText: aTooltipText[i],
    67.       dataNo: ((no <= 9) ? '0' + no : no),
    68.       valueBox: [{
    69.           width: 48,
    70.           height: 48,
    71.           align: 'center',
    72.           placement: 'fixed=94%;50%',
    73.           borderRadius: 48,
    74.           backgroundColor: aPalette[i],
    75.           fontSize: 24,
    76.           shadow: false,
    77.           color: '#FFF',
    78.           decimals: 0,
    79.           fontFamily: '"Exo 2"',
    80.           text: '%data-no'
    81.         },
    82.         {
    83.           align: 'left',
    84.           placement: 'fixed=50%;50%;+0',
    85.           backgroundColor: 'none',
    86.           shadow: false,
    87.           fontWeight: 'none',
    88.           fontFamily: '"Exo 2"',
    89.           fontSize: 12,
    90.           text: aText[i]
    91.         }
    92.       ],
    93.       backgroundColor: aPalette[i],
    94.       gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
    95.       gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
    96.     });
    97.   }
    98.  
    99.   WebFont.load({
    100.     google: {
    101.       families: ['Exo 2']
    102.     },
    103.     active: function() {
    104.  
    105.       zingchart.render({
    106.         id: 'zc',
    107.         width: 450,
    108.         height: 450,
    109.         output: 'svg',
    110.         data: cdata,
    111.         events: {
    112.           animation_end: function(p) {
    113.             if (an.value !== '-1') {
    114.               addElements(p);
    115.             }
    116.           },
    117.           load: function(p) {
    118.             if (an.value === '-1') {
    119.               addElements(p);
    120.             }
    121.           }
    122.         }
    123.       });
    124.     }
    125.   });
    126. }
    127.  
    128. window.addEventListener('load', function() {
    129.  
    130.   r.addEventListener('click', function() {
    131.     render();
    132.   });
    133.   render();
    134.  
    135.  
    136.   window.addElements = function(p) {
    137.     var iPlots = zingchart.exec(p.id, 'getplotlength');
    138.     var aObjects = [],
    139.       oInfo;
    140.  
    141.     for (var i = 0; i < iPlots; i++) {
    142.       oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    143.         object: 'node',
    144.         plotindex: i,
    145.         nodeindex: 0
    146.       });
    147.     }
    148.  
    149.     aObjects.push({
    150.       x: oInfo.x,
    151.       y: oInfo.y,
    152.       width: 1.75 * oInfo.slice * oInfo.size,
    153.       fontFamily: '"Exo 2"',
    154.       fontSize: 14,
    155.       align: 'center',
    156.       fontWeight: 600,
    157.       color: '#666',
    158.       anchor: 'c',
    159.       text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
    160.     });
    161.  
    162.     zingchart.exec(p.id, 'addobject', {
    163.       type: 'label',
    164.       data: aObjects
    165.     });
    166.   };
    167. });