• 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 myConfig = {
    37.       history: { // allows for navigation of drilldown charts
    38.         backgroundColor: '#ee5e64',
    39.         item: {
    40.           backgroundColor: '#e6f04b',
    41.           size: '10px',
    42.         },
    43.         itemOff: {
    44.           backgroundColor: '#333333'
    45.         },
    46.       },
    47.       graphset: [{
    48.         id: 'd1',
    49.         type: 'pie',
    50.         subtitle: {
    51.           text: 'Click a pie slice to drill down to the next level',
    52.           y: '2%'
    53.         },
    54.         plot: {
    55.           detach: false,
    56.           valueBox: {
    57.             text: '%t<br>%npv%' // see tokens for details on chart data populated text
    58.           }
    59.         },
    60.         series: [
    61.           /* The code for the charts associated to the url attribute are inlcuded at the bottom*/
    62.           {
    63.             values: [80],
    64.             url: '//cdn.zingchart.com/resources/history-series-1.txt',
    65.             target: 'graph=d1'
    66.           },
    67.           {
    68.             values: [65],
    69.             url: '//cdn.zingchart.com/resources/history-series-2.txt',
    70.             target: 'graph=d1'
    71.           },
    72.           {
    73.             values: [60],
    74.             url: '//cdn.zingchart.com/resources/history-series-3.txt',
    75.             target: 'graph=d1'
    76.           },
    77.           {
    78.             values: [50],
    79.             url: '//cdn.zingchart.com/resources/history-series-4.txt',
    80.             target: 'graph=d1'
    81.           },
    82.           {
    83.             values: [48],
    84.             url: '//cdn.zingchart.com/resources/history-series-5.txt',
    85.             target: 'graph=d1'
    86.           }
    87.         ]
    88.       }]
    89.     };
    90.  
    91.     zingchart.render({
    92.       id: 'myChart',
    93.       data: myConfig,
    94.       height: '100%',
    95.       width: '100%'
    96.     });
    97.   </script>
    98. </body>
    99.  
    100. </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 myConfig = {
    2.   history: { // allows for navigation of drilldown charts
    3.     backgroundColor: '#ee5e64',
    4.     item: {
    5.       backgroundColor: '#e6f04b',
    6.       size: '10px',
    7.     },
    8.     itemOff: {
    9.       backgroundColor: '#333333'
    10.     },
    11.   },
    12.   graphset: [{
    13.     id: 'd1',
    14.     type: 'pie',
    15.     subtitle: {
    16.       text: 'Click a pie slice to drill down to the next level',
    17.       y: '2%'
    18.     },
    19.     plot: {
    20.       detach: false,
    21.       valueBox: {
    22.         text: '%t<br>%npv%' // see tokens for details on chart data populated text
    23.       }
    24.     },
    25.     series: [
    26.       /* The code for the charts associated to the url attribute are inlcuded at the bottom*/
    27.       {
    28.         values: [80],
    29.         url: '//cdn.zingchart.com/resources/history-series-1.txt',
    30.         target: 'graph=d1'
    31.       },
    32.       {
    33.         values: [65],
    34.         url: '//cdn.zingchart.com/resources/history-series-2.txt',
    35.         target: 'graph=d1'
    36.       },
    37.       {
    38.         values: [60],
    39.         url: '//cdn.zingchart.com/resources/history-series-3.txt',
    40.         target: 'graph=d1'
    41.       },
    42.       {
    43.         values: [50],
    44.         url: '//cdn.zingchart.com/resources/history-series-4.txt',
    45.         target: 'graph=d1'
    46.       },
    47.       {
    48.         values: [48],
    49.         url: '//cdn.zingchart.com/resources/history-series-5.txt',
    50.         target: 'graph=d1'
    51.       }
    52.     ]
    53.   }]
    54. };
    55.  
    56. zingchart.render({
    57.   id: 'myChart',
    58.   data: myConfig,
    59.   height: '100%',
    60.   width: '100%'
    61. });