• 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 config1 = {
    52.         "type": "rankflow",
    53.         "title": {
    54.           "text": "`col-space`: 0",
    55.           "font-size": 14,
    56.         },
    57.         "options": {
    58.           "col-space": 0
    59.         },
    60.         "plotarea": {
    61.           "margin": 20
    62.         },
    63.         "scale-x": {
    64.           "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    65.           "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    66.         },
    67.         "series": [{
    68.             "text": "Air West",
    69.             "ranks": [3, 4, 1],
    70.             "rank": 3
    71.           },
    72.           {
    73.             "text": "Braniff",
    74.             "ranks": [1, 1, 5],
    75.             "rank": 1
    76.           },
    77.           {
    78.             "text": "Capital",
    79.             "ranks": [5, 2, 4],
    80.             "rank": 4
    81.           },
    82.           {
    83.             "text": "Eastern",
    84.             "ranks": [2, 3, 2],
    85.             "rank": 2
    86.           },
    87.           {
    88.             "text": "Galaxy",
    89.             "ranks": [4, 5, 3],
    90.             "rank": 5
    91.           }
    92.         ]
    93.       };
    94.       const config2 = {
    95.         "type": "rankflow",
    96.         "title": {
    97.           "text": "`col-space`: 50",
    98.           "font-size": 14
    99.         },
    100.         "options": {
    101.           "col-space": 50
    102.         },
    103.         "plotarea": {
    104.           "margin": 20
    105.         },
    106.         "scale-x": {
    107.           "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    108.           "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    109.         },
    110.         "series": [{
    111.             "text": "Air West",
    112.             "ranks": [3, 4, 1],
    113.             "rank": 3
    114.           },
    115.           {
    116.             "text": "Braniff",
    117.             "ranks": [1, 1, 5],
    118.             "rank": 1
    119.           },
    120.           {
    121.             "text": "Capital",
    122.             "ranks": [5, 2, 4],
    123.             "rank": 4
    124.           },
    125.           {
    126.             "text": "Eastern",
    127.             "ranks": [2, 3, 2],
    128.             "rank": 2
    129.           },
    130.           {
    131.             "text": "Galaxy",
    132.             "ranks": [4, 5, 3],
    133.             "rank": 5
    134.           }
    135.         ]
    136.       };
    137.  
    138.       // render chart with width and height to
    139.       // fill the parent container CSS dimensions
    140.       zingchart.render({
    141.         id: 'myChart',
    142.         data: config1,
    143.         height: '100%',
    144.         width: '100%'
    145.       });
    146.       zingchart.render({
    147.         id: 'myChart1',
    148.         data: config2,
    149.         height: '100%',
    150.         width: '100%'
    151.       });
    152.     });
    153.   </script>
    154. </body>
    155.  
    156. </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 config1 = {
    9.     "type": "rankflow",
    10.     "title": {
    11.       "text": "`col-space`: 0",
    12.       "font-size": 14,
    13.     },
    14.     "options": {
    15.       "col-space": 0
    16.     },
    17.     "plotarea": {
    18.       "margin": 20
    19.     },
    20.     "scale-x": {
    21.       "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    22.       "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    23.     },
    24.     "series": [{
    25.         "text": "Air West",
    26.         "ranks": [3, 4, 1],
    27.         "rank": 3
    28.       },
    29.       {
    30.         "text": "Braniff",
    31.         "ranks": [1, 1, 5],
    32.         "rank": 1
    33.       },
    34.       {
    35.         "text": "Capital",
    36.         "ranks": [5, 2, 4],
    37.         "rank": 4
    38.       },
    39.       {
    40.         "text": "Eastern",
    41.         "ranks": [2, 3, 2],
    42.         "rank": 2
    43.       },
    44.       {
    45.         "text": "Galaxy",
    46.         "ranks": [4, 5, 3],
    47.         "rank": 5
    48.       }
    49.     ]
    50.   };
    51.   const config2 = {
    52.     "type": "rankflow",
    53.     "title": {
    54.       "text": "`col-space`: 50",
    55.       "font-size": 14
    56.     },
    57.     "options": {
    58.       "col-space": 50
    59.     },
    60.     "plotarea": {
    61.       "margin": 20
    62.     },
    63.     "scale-x": {
    64.       "labels": ["ON-TIME", "BAGGAGE", "PASSENGERS"],
    65.       "values": ["ON-TIME", "BAGGAGE", "PASSENGERS"]
    66.     },
    67.     "series": [{
    68.         "text": "Air West",
    69.         "ranks": [3, 4, 1],
    70.         "rank": 3
    71.       },
    72.       {
    73.         "text": "Braniff",
    74.         "ranks": [1, 1, 5],
    75.         "rank": 1
    76.       },
    77.       {
    78.         "text": "Capital",
    79.         "ranks": [5, 2, 4],
    80.         "rank": 4
    81.       },
    82.       {
    83.         "text": "Eastern",
    84.         "ranks": [2, 3, 2],
    85.         "rank": 2
    86.       },
    87.       {
    88.         "text": "Galaxy",
    89.         "ranks": [4, 5, 3],
    90.         "rank": 5
    91.       }
    92.     ]
    93.   };
    94.  
    95.   // render chart with width and height to
    96.   // fill the parent container CSS dimensions
    97.   zingchart.render({
    98.     id: 'myChart',
    99.     data: config1,
    100.     height: '100%',
    101.     width: '100%'
    102.   });
    103.   zingchart.render({
    104.     id: 'myChart1',
    105.     data: config2,
    106.     height: '100%',
    107.     width: '100%'
    108.   });
    109. });