• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-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.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.       zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    40.  
    41.       // full ZingChart schema can be found here:
    42.       // https://www.zingchart.com/docs/api/json-configuration/
    43.       let chartConfig = {
    44.         type: 'waterfall',
    45.         backgroundColor: '#F1F2F4',
    46.         borderColor: '#B9BABC',
    47.         borderRadius: '3px',
    48.         borderWidth: '1px',
    49.         options: {
    50.           final: {
    51.             backgroundColor: '#0091ea'
    52.           },
    53.           intermediate: {
    54.             backgroundColor: '#ffab00'
    55.           },
    56.           line: {
    57.             lineGapSize: 4,
    58.             lineSegmentSize: '4px',
    59.             lineStyle: 'dashed',
    60.             lineWidth: '1px'
    61.           },
    62.           negative: {
    63.             backgroundColor: '#c51162'
    64.           },
    65.           positive: {
    66.             backgroundColor: '#00bfa5'
    67.           }
    68.         },
    69.         plot: {
    70.           valueBox: {
    71.             text: '$%vk',
    72.             backgroundColor: '#FFF',
    73.             color: 'black',
    74.             shadow: false
    75.           },
    76.           animation: {
    77.             delay: 100,
    78.             effect: 'ANIMATION_UNFOLD_VERTICAL',
    79.             method: 'ELASTIC_EASE_OUT',
    80.             sequence: 'ANIMATION_BY_NODE',
    81.             speed: 100
    82.           },
    83.           barWidth: '30px'
    84.         },
    85.         plotarea: {
    86.           marginTop: '20px',
    87.           marginRight: '20px',
    88.           borderColor: '#B9BABC',
    89.           borderWidth: '1px'
    90.         },
    91.         scaleX: {
    92.           backgroundColor: 'white',
    93.           item: {
    94.             color: '#666',
    95.             offsetY: '0px',
    96.             rules: [{
    97.               offsetY: '20px',
    98.               rule: '%i%2==0'
    99.             }]
    100.           },
    101.           itemsOverlap: true,
    102.           labels: [
    103.             'Product Revenue',
    104.             'Services Revenue',
    105.             'Fixed Costs',
    106.             'Variable Costs',
    107.             'Total'
    108.           ],
    109.           lineColor: '#B9BABC',
    110.           lineWidth: '1px',
    111.           offsetStart: '16px',
    112.           offsetEnd: '16px',
    113.           guide: {
    114.             visible: false
    115.           },
    116.           tick: {
    117.             visible: false
    118.           }
    119.         },
    120.         scaleY: {
    121.           values: '0:700:140',
    122.           format: '%vK',
    123.           guide: {
    124.             lineStyle: 'solid'
    125.           },
    126.           item: {
    127.             color: '#666'
    128.           },
    129.           lineColor: '#B9BABC',
    130.           lineWidth: '1px',
    131.           tick: {
    132.             visible: false
    133.           }
    134.         },
    135.         series: [{
    136.           values: [420, 210, -170, -140, 'SUM']
    137.         }]
    138.       };
    139.  
    140.       // render chart
    141.       zingchart.render({
    142.         id: 'myChart',
    143.         data: chartConfig,
    144.         height: '100%',
    145.         width: '100%',
    146.       });
    147.     });
    148.   </script>
    149. </body>
    150.  
    151. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-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 class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.   zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    6.  
    7.   // full ZingChart schema can be found here:
    8.   // https://www.zingchart.com/docs/api/json-configuration/
    9.   let chartConfig = {
    10.     type: 'waterfall',
    11.     backgroundColor: '#F1F2F4',
    12.     borderColor: '#B9BABC',
    13.     borderRadius: '3px',
    14.     borderWidth: '1px',
    15.     options: {
    16.       final: {
    17.         backgroundColor: '#0091ea'
    18.       },
    19.       intermediate: {
    20.         backgroundColor: '#ffab00'
    21.       },
    22.       line: {
    23.         lineGapSize: 4,
    24.         lineSegmentSize: '4px',
    25.         lineStyle: 'dashed',
    26.         lineWidth: '1px'
    27.       },
    28.       negative: {
    29.         backgroundColor: '#c51162'
    30.       },
    31.       positive: {
    32.         backgroundColor: '#00bfa5'
    33.       }
    34.     },
    35.     plot: {
    36.       valueBox: {
    37.         text: '$%vk',
    38.         backgroundColor: '#FFF',
    39.         color: 'black',
    40.         shadow: false
    41.       },
    42.       animation: {
    43.         delay: 100,
    44.         effect: 'ANIMATION_UNFOLD_VERTICAL',
    45.         method: 'ELASTIC_EASE_OUT',
    46.         sequence: 'ANIMATION_BY_NODE',
    47.         speed: 100
    48.       },
    49.       barWidth: '30px'
    50.     },
    51.     plotarea: {
    52.       marginTop: '20px',
    53.       marginRight: '20px',
    54.       borderColor: '#B9BABC',
    55.       borderWidth: '1px'
    56.     },
    57.     scaleX: {
    58.       backgroundColor: 'white',
    59.       item: {
    60.         color: '#666',
    61.         offsetY: '0px',
    62.         rules: [{
    63.           offsetY: '20px',
    64.           rule: '%i%2==0'
    65.         }]
    66.       },
    67.       itemsOverlap: true,
    68.       labels: [
    69.         'Product Revenue',
    70.         'Services Revenue',
    71.         'Fixed Costs',
    72.         'Variable Costs',
    73.         'Total'
    74.       ],
    75.       lineColor: '#B9BABC',
    76.       lineWidth: '1px',
    77.       offsetStart: '16px',
    78.       offsetEnd: '16px',
    79.       guide: {
    80.         visible: false
    81.       },
    82.       tick: {
    83.         visible: false
    84.       }
    85.     },
    86.     scaleY: {
    87.       values: '0:700:140',
    88.       format: '%vK',
    89.       guide: {
    90.         lineStyle: 'solid'
    91.       },
    92.       item: {
    93.         color: '#666'
    94.       },
    95.       lineColor: '#B9BABC',
    96.       lineWidth: '1px',
    97.       tick: {
    98.         visible: false
    99.       }
    100.     },
    101.     series: [{
    102.       values: [420, 210, -170, -140, 'SUM']
    103.     }]
    104.   };
    105.  
    106.   // render chart
    107.   zingchart.render({
    108.     id: 'myChart',
    109.     data: chartConfig,
    110.     height: '100%',
    111.     width: '100%',
    112.   });
    113. });