• 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-parent--container {
    18.       display: flex;
    19.     }
    20.  
    21.     .chart--container {
    22.       height: 100%;
    23.       width: 100%;
    24.       min-height: 400px;
    25.     }
    26.  
    27.     .zc-ref {
    28.       display: none;
    29.     }
    30.   </style>
    31. </head>
    32.  
    33. <body>
    34.   <!-- CHART CONTAINER -->
    35.   <div class="chart-parent--container">
    36.     <div id="myChart" class="chart--container">
    37.       <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    38.     </div>
    39.     <div id="myChart1" class="chart--container">
    40.       <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    41.     </div>
    42.   </div>
    43.   <script>
    44.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    45.     // because this Javascript is injected into the document head
    46.     window.addEventListener('load', () => {
    47.       // Javascript code to execute after DOM content
    48.  
    49.       // full ZingChart schema can be found here:
    50.       // https://www.zingchart.com/docs/api/json-configuration/
    51.       const chordConfig1 = {
    52.         "type": "chord",
    53.         "options": {
    54.           "radius": 120
    55.         },
    56.         "title": {
    57.           "text": "'radius':120"
    58.         },
    59.         "series": [{
    60.             "values": [6637, 5700, 4789, 2771],
    61.             "text": "A"
    62.           },
    63.           {
    64.             "values": [7737, 2691, 2202, 7006],
    65.             "text": "B"
    66.           },
    67.           {
    68.             "values": [8574, 9898, 4084, 1765],
    69.             "text": "C"
    70.           },
    71.           {
    72.             "values": [5309, 1602, 8395, 2908],
    73.             "text": "D"
    74.           }
    75.         ]
    76.       };
    77.       const chordConfig2 = {
    78.         "type": "chord",
    79.         "options": {
    80.           "radius": 60
    81.         },
    82.         "title": {
    83.           "text": "'radius':60"
    84.         },
    85.         "series": [{
    86.             "values": [6637, 5700, 4789, 2771],
    87.             "text": "A"
    88.           },
    89.           {
    90.             "values": [7737, 2691, 2202, 7006],
    91.             "text": "B"
    92.           },
    93.           {
    94.             "values": [8574, 9898, 4084, 1765],
    95.             "text": "C"
    96.           },
    97.           {
    98.             "values": [5309, 1602, 8395, 2908],
    99.             "text": "D"
    100.           }
    101.         ]
    102.       };
    103.  
    104.       // render chart with width and height to
    105.       // fill the parent container CSS dimensions
    106.       zingchart.render({
    107.         id: 'myChart',
    108.         data: chordConfig1,
    109.         height: '100%',
    110.         width: '100%'
    111.       });
    112.       zingchart.render({
    113.         id: 'myChart1',
    114.         data: chordConfig2,
    115.         height: '100%',
    116.         width: '100%'
    117.       });
    118.     });
    119.   </script>
    120. </body>
    121.  
    122. </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-parent--container">
    13.     <div id="myChart" class="chart--container">
    14.       <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    15.     </div>
    16.     <div id="myChart1" class="chart--container">
    17.       <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    18.     </div>
    19.   </div>
    20. </body>
    21.  
    22. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart-parent--container {
    10.   display: flex;
    11. }
    12.  
    13. .chart--container {
    14.   height: 100%;
    15.   width: 100%;
    16.   min-height: 400px;
    17. }
    18.  
    19. .zc-ref {
    20.   display: none;
    21. }
    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.   const chordConfig1 = {
    9.     "type": "chord",
    10.     "options": {
    11.       "radius": 120
    12.     },
    13.     "title": {
    14.       "text": "'radius':120"
    15.     },
    16.     "series": [{
    17.         "values": [6637, 5700, 4789, 2771],
    18.         "text": "A"
    19.       },
    20.       {
    21.         "values": [7737, 2691, 2202, 7006],
    22.         "text": "B"
    23.       },
    24.       {
    25.         "values": [8574, 9898, 4084, 1765],
    26.         "text": "C"
    27.       },
    28.       {
    29.         "values": [5309, 1602, 8395, 2908],
    30.         "text": "D"
    31.       }
    32.     ]
    33.   };
    34.   const chordConfig2 = {
    35.     "type": "chord",
    36.     "options": {
    37.       "radius": 60
    38.     },
    39.     "title": {
    40.       "text": "'radius':60"
    41.     },
    42.     "series": [{
    43.         "values": [6637, 5700, 4789, 2771],
    44.         "text": "A"
    45.       },
    46.       {
    47.         "values": [7737, 2691, 2202, 7006],
    48.         "text": "B"
    49.       },
    50.       {
    51.         "values": [8574, 9898, 4084, 1765],
    52.         "text": "C"
    53.       },
    54.       {
    55.         "values": [5309, 1602, 8395, 2908],
    56.         "text": "D"
    57.       }
    58.     ]
    59.   };
    60.  
    61.   // render chart with width and height to
    62.   // fill the parent container CSS dimensions
    63.   zingchart.render({
    64.     id: 'myChart',
    65.     data: chordConfig1,
    66.     height: '100%',
    67.     width: '100%'
    68.   });
    69.   zingchart.render({
    70.     id: 'myChart1',
    71.     data: chordConfig2,
    72.     height: '100%',
    73.     width: '100%'
    74.   });
    75. });