• 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.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     let chartConfig = {
    37.       graphset: [{
    38.         type: 'pie',
    39.         title: {
    40.           text: 'Earnings Insights<br>Corporate Overview',
    41.           align: 'right',
    42.           fontColor: '#616161'
    43.         },
    44.         legend: {
    45.           text: '%t<br>',
    46.           borderWidth: '0px',
    47.           header: {
    48.             text: 'Business Units',
    49.             align: 'right',
    50.             bold: true,
    51.             fontColor: '#616161',
    52.             fontSize: '13px'
    53.           },
    54.           item: {
    55.             align: 'right',
    56.             padding: '10px',
    57.             borderRadius: '3px',
    58.             fontColor: '#fff',
    59.             width: '115px'
    60.           },
    61.           itemOff: {
    62.             alpha: 0.7,
    63.             fontColor: '#616161',
    64.             lineWidth: '2px',
    65.             textAlpha: 1,
    66.             textDecoration: 'line-through'
    67.           },
    68.           markerOff: {
    69.             alpha: 0.2
    70.           },
    71.           toggleAction: 'remove',
    72.           verticalAlign: 'middle',
    73.           width: '140px'
    74.         },
    75.         plot: {
    76.           valueBox: {
    77.             decimals: 2
    78.           },
    79.           animation: {
    80.             effect: 'ANIMATION_EXPAND_VERTICAL',
    81.             method: 'ANIMATION_BACK_EASE_OUT',
    82.             onLegendToggle: false,
    83.             sequence: 'ANIMATION_BY_PLOT'
    84.           },
    85.           decimals: 0,
    86.           detach: false,
    87.           refAngle: 270,
    88.           thousandsSeparator: ','
    89.         },
    90.         scale: {
    91.           sizeFactor: 0.75
    92.         },
    93.         tooltip: {
    94.           text: '%t<br>$%v',
    95.           align: 'right',
    96.           bold: true,
    97.           borderRadius: '3px',
    98.           fontColor: '#fff',
    99.           offsetR: 10,
    100.           placement: 'node:out',
    101.           width: '110px'
    102.         },
    103.         series: [{
    104.             text: 'Operating System',
    105.             values: [119968796],
    106.             url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_purp.txt',
    107.             target: 'graph',
    108.             tooltip: {
    109.               backgroundColor: '#4527A0'
    110.             },
    111.             backgroundColor: '#4527A0',
    112.             legendItem: {
    113.               backgroundColor: '#4527A0'
    114.             },
    115.             legendMarker: {
    116.               type: 'circle',
    117.               backgroundColor: '#fff',
    118.               borderColor: '#4527A0',
    119.               borderWidth: '4px',
    120.               size: '7px'
    121.             },
    122.             legendText: '%t<br><b>$%v</b>'
    123.           },
    124.           {
    125.             text: 'Network and Tools',
    126.             values: [97503958],
    127.             url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_blue.txt',
    128.             target: 'graph',
    129.             backgroundColor: '#1565C0',
    130.             legendItem: {
    131.               backgroundColor: '#1565C0'
    132.             },
    133.             legendMarker: {
    134.               type: 'circle',
    135.               backgroundColor: '#fff',
    136.               borderColor: '#1565C0',
    137.               borderWidth: '4px',
    138.               size: '7px'
    139.             },
    140.             legendText: '%t<br><b>$%v</b>'
    141.           },
    142.           {
    143.             text: 'Business Division',
    144.             values: [85948575],
    145.             url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_red.txt',
    146.             target: 'graph',
    147.             backgroundColor: '#AD1457',
    148.             legendItem: {
    149.               backgroundColor: '#AD1457'
    150.             },
    151.             legendMarker: {
    152.               type: 'circle',
    153.               backgroundColor: '#fff',
    154.               borderColor: '#AD1457',
    155.               borderWidth: '4px',
    156.               size: '7px'
    157.             },
    158.             legendText: '%t<br><b>$%v</b>'
    159.           },
    160.           {
    161.             text: 'Online Services',
    162.             values: [62096876],
    163.             url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_green.txt',
    164.             target: 'graph',
    165.             backgroundColor: '#00695C',
    166.             legendItem: {
    167.               backgroundColor: '#00695C'
    168.             },
    169.             legendMarker: {
    170.               type: 'circle',
    171.               backgroundColor: '#fff',
    172.               borderColor: '#00695C',
    173.               borderWidth: '4px',
    174.               size: '7px'
    175.             },
    176.             legendText: '%t<br><b>$%v</b>'
    177.           },
    178.           {
    179.             text: 'Entertainment',
    180.             values: [40467564],
    181.             url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_orange.txt',
    182.             target: 'graph',
    183.             backgroundColor: '#EF6C00',
    184.             legendItem: {
    185.               backgroundColor: '#EF6C00'
    186.             },
    187.             legendMarker: {
    188.               type: 'circle',
    189.               backgroundColor: '#fff',
    190.               borderColor: '#EF6C00',
    191.               borderWidth: '4px',
    192.               size: '7px'
    193.             },
    194.             legendText: '%t<br><b>$%v</b>'
    195.           }
    196.         ]
    197.       }],
    198.       history: {
    199.         borderColor: '#616161',
    200.         borderRadius: '2px',
    201.         borderWidth: '3px',
    202.         item: {
    203.           text: 'Some Text',
    204.           backgroundColor: '#616161',
    205.           borderColor: '#616161',
    206.           fontColor: 'red',
    207.           fontSize: '10px'
    208.         },
    209.         itemOff: {
    210.           backgroundColor: '#dcdcdc',
    211.           borderColor: '#6161663',
    212.           size: '3px',
    213.           width: '3px',
    214.           height: '3px'
    215.         },
    216.         width: '45px',
    217.         height: '30px',
    218.         y: '20px'
    219.       }
    220.     };
    221.  
    222.     zingchart.render({
    223.       id: 'myChart',
    224.       data: chartConfig,
    225.       height: '100%',
    226.       cacheControl: ''
    227.     });
    228.   </script>
    229. </body>
    230.  
    231. </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.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. let chartConfig = {
    2.   graphset: [{
    3.     type: 'pie',
    4.     title: {
    5.       text: 'Earnings Insights<br>Corporate Overview',
    6.       align: 'right',
    7.       fontColor: '#616161'
    8.     },
    9.     legend: {
    10.       text: '%t<br>',
    11.       borderWidth: '0px',
    12.       header: {
    13.         text: 'Business Units',
    14.         align: 'right',
    15.         bold: true,
    16.         fontColor: '#616161',
    17.         fontSize: '13px'
    18.       },
    19.       item: {
    20.         align: 'right',
    21.         padding: '10px',
    22.         borderRadius: '3px',
    23.         fontColor: '#fff',
    24.         width: '115px'
    25.       },
    26.       itemOff: {
    27.         alpha: 0.7,
    28.         fontColor: '#616161',
    29.         lineWidth: '2px',
    30.         textAlpha: 1,
    31.         textDecoration: 'line-through'
    32.       },
    33.       markerOff: {
    34.         alpha: 0.2
    35.       },
    36.       toggleAction: 'remove',
    37.       verticalAlign: 'middle',
    38.       width: '140px'
    39.     },
    40.     plot: {
    41.       valueBox: {
    42.         decimals: 2
    43.       },
    44.       animation: {
    45.         effect: 'ANIMATION_EXPAND_VERTICAL',
    46.         method: 'ANIMATION_BACK_EASE_OUT',
    47.         onLegendToggle: false,
    48.         sequence: 'ANIMATION_BY_PLOT'
    49.       },
    50.       decimals: 0,
    51.       detach: false,
    52.       refAngle: 270,
    53.       thousandsSeparator: ','
    54.     },
    55.     scale: {
    56.       sizeFactor: 0.75
    57.     },
    58.     tooltip: {
    59.       text: '%t<br>$%v',
    60.       align: 'right',
    61.       bold: true,
    62.       borderRadius: '3px',
    63.       fontColor: '#fff',
    64.       offsetR: 10,
    65.       placement: 'node:out',
    66.       width: '110px'
    67.     },
    68.     series: [{
    69.         text: 'Operating System',
    70.         values: [119968796],
    71.         url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_purp.txt',
    72.         target: 'graph',
    73.         tooltip: {
    74.           backgroundColor: '#4527A0'
    75.         },
    76.         backgroundColor: '#4527A0',
    77.         legendItem: {
    78.           backgroundColor: '#4527A0'
    79.         },
    80.         legendMarker: {
    81.           type: 'circle',
    82.           backgroundColor: '#fff',
    83.           borderColor: '#4527A0',
    84.           borderWidth: '4px',
    85.           size: '7px'
    86.         },
    87.         legendText: '%t<br><b>$%v</b>'
    88.       },
    89.       {
    90.         text: 'Network and Tools',
    91.         values: [97503958],
    92.         url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_blue.txt',
    93.         target: 'graph',
    94.         backgroundColor: '#1565C0',
    95.         legendItem: {
    96.           backgroundColor: '#1565C0'
    97.         },
    98.         legendMarker: {
    99.           type: 'circle',
    100.           backgroundColor: '#fff',
    101.           borderColor: '#1565C0',
    102.           borderWidth: '4px',
    103.           size: '7px'
    104.         },
    105.         legendText: '%t<br><b>$%v</b>'
    106.       },
    107.       {
    108.         text: 'Business Division',
    109.         values: [85948575],
    110.         url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_red.txt',
    111.         target: 'graph',
    112.         backgroundColor: '#AD1457',
    113.         legendItem: {
    114.           backgroundColor: '#AD1457'
    115.         },
    116.         legendMarker: {
    117.           type: 'circle',
    118.           backgroundColor: '#fff',
    119.           borderColor: '#AD1457',
    120.           borderWidth: '4px',
    121.           size: '7px'
    122.         },
    123.         legendText: '%t<br><b>$%v</b>'
    124.       },
    125.       {
    126.         text: 'Online Services',
    127.         values: [62096876],
    128.         url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_green.txt',
    129.         target: 'graph',
    130.         backgroundColor: '#00695C',
    131.         legendItem: {
    132.           backgroundColor: '#00695C'
    133.         },
    134.         legendMarker: {
    135.           type: 'circle',
    136.           backgroundColor: '#fff',
    137.           borderColor: '#00695C',
    138.           borderWidth: '4px',
    139.           size: '7px'
    140.         },
    141.         legendText: '%t<br><b>$%v</b>'
    142.       },
    143.       {
    144.         text: 'Entertainment',
    145.         values: [40467564],
    146.         url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_orange.txt',
    147.         target: 'graph',
    148.         backgroundColor: '#EF6C00',
    149.         legendItem: {
    150.           backgroundColor: '#EF6C00'
    151.         },
    152.         legendMarker: {
    153.           type: 'circle',
    154.           backgroundColor: '#fff',
    155.           borderColor: '#EF6C00',
    156.           borderWidth: '4px',
    157.           size: '7px'
    158.         },
    159.         legendText: '%t<br><b>$%v</b>'
    160.       }
    161.     ]
    162.   }],
    163.   history: {
    164.     borderColor: '#616161',
    165.     borderRadius: '2px',
    166.     borderWidth: '3px',
    167.     item: {
    168.       text: 'Some Text',
    169.       backgroundColor: '#616161',
    170.       borderColor: '#616161',
    171.       fontColor: 'red',
    172.       fontSize: '10px'
    173.     },
    174.     itemOff: {
    175.       backgroundColor: '#dcdcdc',
    176.       borderColor: '#6161663',
    177.       size: '3px',
    178.       width: '3px',
    179.       height: '3px'
    180.     },
    181.     width: '45px',
    182.     height: '30px',
    183.     y: '20px'
    184.   }
    185. };
    186.  
    187. zingchart.render({
    188.   id: 'myChart',
    189.   data: chartConfig,
    190.   height: '100%',
    191.   cacheControl: ''
    192. });