• 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.           "angle-padding": 0,
    55.           "radius": 120
    56.         },
    57.         "title": {
    58.           "text": "'angle-padding':0"
    59.         },
    60.         "series": [{
    61.             "values": [6637, 5700, 4789, 2771],
    62.             "text": "A"
    63.           },
    64.           {
    65.             "values": [7737, 2691, 2202, 7006],
    66.             "text": "B"
    67.           },
    68.           {
    69.             "values": [8574, 9898, 4084, 1765],
    70.             "text": "C"
    71.           },
    72.           {
    73.             "values": [5309, 1602, 8395, 2908],
    74.             "text": "D"
    75.           }
    76.         ]
    77.       };
    78.       const chordConfig2 = {
    79.         "type": "chord",
    80.         "options": {
    81.           "angle-padding": 50,
    82.           "radius": 120
    83.         },
    84.         "title": {
    85.           "text": "'angle-padding':50"
    86.         },
    87.         "series": [{
    88.             "values": [6637, 5700, 4789, 2771],
    89.             "text": "A"
    90.           },
    91.           {
    92.             "values": [7737, 2691, 2202, 7006],
    93.             "text": "B"
    94.           },
    95.           {
    96.             "values": [8574, 9898, 4084, 1765],
    97.             "text": "C"
    98.           },
    99.           {
    100.             "values": [5309, 1602, 8395, 2908],
    101.             "text": "D"
    102.           }
    103.         ]
    104.       };
    105.  
    106.       // render chart with width and height to
    107.       // fill the parent container CSS dimensions
    108.       zingchart.render({
    109.         id: 'myChart',
    110.         data: chordConfig1,
    111.         height: '100%',
    112.         width: '100%'
    113.       });
    114.       zingchart.render({
    115.         id: 'myChart1',
    116.         data: chordConfig2,
    117.         height: '100%',
    118.         width: '100%'
    119.       });
    120.     });
    121.   </script>
    122. </body>
    123.  
    124. </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.       "angle-padding": 0,
    12.       "radius": 120
    13.     },
    14.     "title": {
    15.       "text": "'angle-padding':0"
    16.     },
    17.     "series": [{
    18.         "values": [6637, 5700, 4789, 2771],
    19.         "text": "A"
    20.       },
    21.       {
    22.         "values": [7737, 2691, 2202, 7006],
    23.         "text": "B"
    24.       },
    25.       {
    26.         "values": [8574, 9898, 4084, 1765],
    27.         "text": "C"
    28.       },
    29.       {
    30.         "values": [5309, 1602, 8395, 2908],
    31.         "text": "D"
    32.       }
    33.     ]
    34.   };
    35.   const chordConfig2 = {
    36.     "type": "chord",
    37.     "options": {
    38.       "angle-padding": 50,
    39.       "radius": 120
    40.     },
    41.     "title": {
    42.       "text": "'angle-padding':50"
    43.     },
    44.     "series": [{
    45.         "values": [6637, 5700, 4789, 2771],
    46.         "text": "A"
    47.       },
    48.       {
    49.         "values": [7737, 2691, 2202, 7006],
    50.         "text": "B"
    51.       },
    52.       {
    53.         "values": [8574, 9898, 4084, 1765],
    54.         "text": "C"
    55.       },
    56.       {
    57.         "values": [5309, 1602, 8395, 2908],
    58.         "text": "D"
    59.       }
    60.     ]
    61.   };
    62.  
    63.   // render chart with width and height to
    64.   // fill the parent container CSS dimensions
    65.   zingchart.render({
    66.     id: 'myChart',
    67.     data: chordConfig1,
    68.     height: '100%',
    69.     width: '100%'
    70.   });
    71.   zingchart.render({
    72.     id: 'myChart1',
    73.     data: chordConfig2,
    74.     height: '100%',
    75.     width: '100%'
    76.   });
    77. });