• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 685px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <zing-grid caption="Fortune 500 Companies">
    25.     <zg-data data='[
    26.         {
    27.           "company": "Walmart",
    28.           "stockPrice": 84.54,
    29.           "quarterlySales": [123.18, 136.27, null, null],
    30.           "priceSuffix": "Billions"
    31.         },
    32.         {
    33.           "company": "Berkshire Hathaway",
    34.           "stockPrice": 298300,
    35.           "quarterlySales": [133.18, 136.27, null, null],
    36.           "priceSuffix": "Billions"
    37.         },
    38.         {
    39.           "company": "Apple",
    40.           "stockPrice": 184.22,
    41.           "quarterlySales": [153.68, 116.62, null, null],
    42.           "priceSuffix": "Billions"
    43.         },
    44.         {
    45.           "company": "Exxon Mobil",
    46.           "stockPrice": 84.54,
    47.           "quarterlySales": [123.18, 136.27, null, null],
    48.           "priceSuffix": "Billions"
    49.         }
    50.       ]'></zg-data>
    51.     <zg-colgroup>
    52.       <zg-column index="company"></zg-column>
    53.       <zg-column index="stockPrice" type="currency"></zg-column>
    54.       <zg-column index="quarterlySales">
    55.         <template>
    56.           <h2>[[record.company]] 2018 Sales in [[record.priceSuffix]]</h2>
    57.           <ul>
    58.             <li>q1: [[index.quarterlySales.0]]</li>
    59.             <li>q2: [[index.quarterlySales.1]]</li>
    60.             <li>q3: [[index.quarterlySales.2]]</li>
    61.             <li>q4: [[index.quarterlySales.3]]</li>
    62.           </ul>
    63.         </template>
    64.       </zg-column>
    65.     </zg-colgroup>
    66.   </zing-grid>
    67.   <script>
    68.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    69.     // because this Javascript is injected into the document head
    70.     window.addEventListener('load', () => {
    71.       // Javascript code to execute after DOM content
    72.     });
    73.   </script>
    74. </body>
    75.  
    76. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Fortune 500 Companies">
    12.     <zg-data data='[
    13.         {
    14.           "company": "Walmart",
    15.           "stockPrice": 84.54,
    16.           "quarterlySales": [123.18, 136.27, null, null],
    17.           "priceSuffix": "Billions"
    18.         },
    19.         {
    20.           "company": "Berkshire Hathaway",
    21.           "stockPrice": 298300,
    22.           "quarterlySales": [133.18, 136.27, null, null],
    23.           "priceSuffix": "Billions"
    24.         },
    25.         {
    26.           "company": "Apple",
    27.           "stockPrice": 184.22,
    28.           "quarterlySales": [153.68, 116.62, null, null],
    29.           "priceSuffix": "Billions"
    30.         },
    31.         {
    32.           "company": "Exxon Mobil",
    33.           "stockPrice": 84.54,
    34.           "quarterlySales": [123.18, 136.27, null, null],
    35.           "priceSuffix": "Billions"
    36.         }
    37.       ]'></zg-data>
    38.     <zg-colgroup>
    39.       <zg-column index="company"></zg-column>
    40.       <zg-column index="stockPrice" type="currency"></zg-column>
    41.       <zg-column index="quarterlySales">
    42.         <template>
    43.           <h2>[[record.company]] 2018 Sales in [[record.priceSuffix]]</h2>
    44.           <ul>
    45.             <li>q1: [[index.quarterlySales.0]]</li>
    46.             <li>q2: [[index.quarterlySales.1]]</li>
    47.             <li>q3: [[index.quarterlySales.2]]</li>
    48.             <li>q4: [[index.quarterlySales.3]]</li>
    49.           </ul>
    50.         </template>
    51.       </zg-column>
    52.     </zg-colgroup>
    53.   </zing-grid>
    54. </body>
    55.  
    56. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    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. });