• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     .chart--main {
    18.       display: flex;
    19.       flex-direction: column;
    20.       height: 100%;
    21.     }
    22.  
    23.     .chart--row {
    24.       display: flex;
    25.       height: 50%;
    26.     }
    27.  
    28.     .chart--container {
    29.       height: 100%;
    30.       width: 100%;
    31.       min-height: 350px;
    32.     }
    33.  
    34.     .zc-ref {
    35.       display: none;
    36.     }
    37.   </style>
    38. </head>
    39.  
    40. <body>
    41.   <!-- CHART CONTAINER -->
    42.   <div class="chart--main">
    43.     <div class="chart--row">
    44.       <div id="myChart1" class="chart--container">
    45.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    46.       </div>
    47.     </div>
    48.     <div class="chart--row">
    49.       <div id="myChart2" class="chart--container">
    50.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    51.       </div>
    52.       <div id="myChart3" class="chart--container">
    53.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    54.       </div>
    55.     </div>
    56.   </div>
    57.   <script>
    58.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    59.     // because this Javascript is injected into the document head
    60.     window.addEventListener('load', () => {
    61.       // Javascript code to execute after DOM content
    62.  
    63.       // full ZingChart schema can be found here:
    64.       // https://www.zingchart.com/docs/api/json-configuration/
    65.       let chartConfig1 = {
    66.         type: 'line',
    67.         series: [{
    68.             values: [76, 23, 15, 85, 13]
    69.           },
    70.           {
    71.             values: [36, 53, 65, 25, 45]
    72.           }
    73.         ]
    74.       };
    75.       let chartConfig2 = {
    76.         type: 'funnel',
    77.         series: [{
    78.             values: [30]
    79.           },
    80.           {
    81.             values: [15]
    82.           },
    83.           {
    84.             values: [5]
    85.           },
    86.           {
    87.             values: [3]
    88.           }
    89.         ]
    90.       };
    91.       let chartConfig3 = {
    92.         type: 'pie',
    93.         series: [{
    94.             values: [15]
    95.           },
    96.           {
    97.             values: [30]
    98.           },
    99.           {
    100.             values: [34]
    101.           }
    102.         ]
    103.       };
    104.  
    105.  
    106.  
    107.       // render chart with width and height to
    108.       // fill the parent container CSS dimensions
    109.       zingchart.render({
    110.         id: 'myChart1',
    111.         data: chartConfig1,
    112.         height: '100%',
    113.         width: '100%',
    114.       });
    115.       zingchart.render({
    116.         id: 'myChart2',
    117.         data: chartConfig2,
    118.         height: '100%',
    119.         width: '100%',
    120.       });
    121.       zingchart.render({
    122.         id: 'myChart3',
    123.         data: chartConfig3,
    124.         height: '100%',
    125.         width: '100%',
    126.       });
    127.  
    128.     });
    129.   </script>
    130. </body>
    131.  
    132. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div class="chart--main">
    13.     <div class="chart--row">
    14.       <div id="myChart1" class="chart--container">
    15.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    16.       </div>
    17.     </div>
    18.     <div class="chart--row">
    19.       <div id="myChart2" class="chart--container">
    20.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    21.       </div>
    22.       <div id="myChart3" class="chart--container">
    23.         <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    24.       </div>
    25.     </div>
    26.   </div>
    27. </body>
    28.  
    29. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart--main {
    10.   display: flex;
    11.   flex-direction: column;
    12.   height: 100%;
    13. }
    14.  
    15. .chart--row {
    16.   display: flex;
    17.   height: 50%;
    18. }
    19.  
    20. .chart--container {
    21.   height: 100%;
    22.   width: 100%;
    23.   min-height: 350px;
    24. }
    25.  
    26. .zc-ref {
    27.   display: none;
    28. }
    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.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig1 = {
    9.     type: 'line',
    10.     series: [{
    11.         values: [76, 23, 15, 85, 13]
    12.       },
    13.       {
    14.         values: [36, 53, 65, 25, 45]
    15.       }
    16.     ]
    17.   };
    18.   let chartConfig2 = {
    19.     type: 'funnel',
    20.     series: [{
    21.         values: [30]
    22.       },
    23.       {
    24.         values: [15]
    25.       },
    26.       {
    27.         values: [5]
    28.       },
    29.       {
    30.         values: [3]
    31.       }
    32.     ]
    33.   };
    34.   let chartConfig3 = {
    35.     type: 'pie',
    36.     series: [{
    37.         values: [15]
    38.       },
    39.       {
    40.         values: [30]
    41.       },
    42.       {
    43.         values: [34]
    44.       }
    45.     ]
    46.   };
    47.  
    48.  
    49.  
    50.   // render chart with width and height to
    51.   // fill the parent container CSS dimensions
    52.   zingchart.render({
    53.     id: 'myChart1',
    54.     data: chartConfig1,
    55.     height: '100%',
    56.     width: '100%',
    57.   });
    58.   zingchart.render({
    59.     id: 'myChart2',
    60.     data: chartConfig2,
    61.     height: '100%',
    62.     width: '100%',
    63.   });
    64.   zingchart.render({
    65.     id: 'myChart3',
    66.     data: chartConfig3,
    67.     height: '100%',
    68.     width: '100%',
    69.   });
    70.  
    71. });