• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .increased {
    10.       color: #66bb6a;
    11.     }
    12.  
    13.     .increased::before {
    14.       content: '↑';
    15.     }
    16.  
    17.     .decreased {
    18.       color: #ef5350;
    19.     }
    20.  
    21.     .decreased::before {
    22.       content: '↓';
    23.     }
    24.  
    25.     .highlight {
    26.       background: #fff59d;
    27.     }
    28.  
    29.     zing-grid[loading] {
    30.       height: 373px;
    31.     }
    32.   </style>
    33. </head>
    34.  
    35. <body>
    36.   <zing-grid caption="Cell Formatting">
    37.     <zg-data data='[
    38.         {
    39.             "open": "114.1900",
    40.             "high": "114.4950",
    41.             "low": "113.6800",
    42.             "close": "114.2750",
    43.             "volume": "7120112"
    44.         }, {
    45.             "open": "113.0300",
    46.             "high": "114.9000",
    47.             "low": "112.2175",
    48.             "close": "114.6700",
    49.             "volume": "27334460"
    50.         }, {
    51.             "open": "113.0500",
    52.             "high": "113.3200",
    53.             "low": "111.0350",
    54.             "close": "111.7000",
    55.             "volume": "21728429"
    56.         }, {
    57.             "open": "112.1900",
    58.             "high": "113.6950",
    59.             "low": "111.7200",
    60.             "close": "113.2100",
    61.             "volume": "22170934"
    62.         }, {
    63.             "open": "113.6900",
    64.             "high": "113.7000",
    65.             "low": "111.8600",
    66.             "close": "112.1400",
    67.             "volume": "20736516"
    68.         }
    69.  
    70.       ]'></zg-data>
    71.     <zg-colgroup>
    72.       <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
    73.       <zg-column index="high" type="currency" cell-class="_highlightHigh"></zg-column>
    74.       <zg-column index="low" type="currency" cell-class="_highlightLow"></zg-column>
    75.       <zg-column index="close" type="currency"></zg-column>
    76.       <zg-column index="volume"></zg-column>
    77.     </zg-colgroup>
    78.   </zing-grid>
    79.   <script>
    80.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global vars for highlight min/max values
    81.     var gHigh = -1;
    82.     var gLow = Number.MAX_SAFE_INTEGER;
    83.  
    84.     // determine if we should render positive/negative
    85.     // cell styling based on opening stock price vs when it last
    86.     // closed
    87.     function _renderStocks(open, cellDOMRef, cellRef) {
    88.       console.log(`open value: ${open} - record info ${JSON.stringify(cellRef.record)}`);
    89.       // if open is higher than close value
    90.       if (open > cellRef.record.close) return 'stock-open increased';
    91.  
    92.       return 'stock-open decreased';
    93.     }
    94.  
    95.     // highlight cell with highest value in high column
    96.     function _highlightHigh(high, cellDOMRef, cellRef) {
    97.       if (high == Number(gHigh)) return 'highlight';
    98.     }
    99.  
    100.     // highlight cell with lowest value in low column
    101.     function _highlightLow(low, cellDOMRef, cellRef) {
    102.       if (low == Number(gLow)) return 'highlight';
    103.     }
    104.  
    105.     // window:load event for Javascript to run after HTML
    106.     // because this Javascript is injected into the document head
    107.     window.addEventListener('load', () => {
    108.       // Javascript code to execute after DOM content
    109.  
    110.       // save reference to the grid
    111.       const zgRef = document.querySelector('zing-grid');
    112.  
    113.       // interval mimics real time data updates
    114.       setInterval(() => {
    115.         // regenerate the same starting dataset everytime to 
    116.         // produce better visual results
    117.         let realTimeData = [{
    118.           open: 114.1900,
    119.           high: 114.4950,
    120.           low: 113.6800,
    121.           close: 114.2750,
    122.           volume: 7120112
    123.         }, {
    124.           open: 113.0300,
    125.           high: 114.9000,
    126.           low: 112.2175,
    127.           close: 114.6700,
    128.           volume: 27334460
    129.         }, {
    130.           open: 113.0500,
    131.           high: 113.3200,
    132.           low: 111.0350,
    133.           close: 111.7000,
    134.           volume: 21728429
    135.         }, {
    136.           open: 112.1900,
    137.           high: 113.6950,
    138.           low: 111.7200,
    139.           close: 113.2100,
    140.           volume: 22170934
    141.         }, {
    142.           open: 113.6900,
    143.           high: 113.7000,
    144.           low: 111.8600,
    145.           close: 112.1400,
    146.           volume: 20736516
    147.         }];
    148.  
    149.         // reset global vars for highlighint min/max cells
    150.         gHigh = -1;
    151.         gLow = Number.MAX_SAFE_INTEGER;
    152.  
    153.         // update data to mimic realtime updates
    154.         realTimeData.map(values => {
    155.  
    156.           // randomly choose to. inc/dec values to 
    157.           // simulate stock exchanges
    158.           if (Math.round(Math.random())) {
    159.             values.open = (values.open - 1);
    160.             values.high = (values.high - 1);
    161.             values.low = (values.low - 1);
    162.             values.close = (values.close + 1);
    163.             values.volume = (values.volume - 100);
    164.           } else {
    165.             values.open = (values.open + Math.floor(Math.random() * 5));
    166.             values.high = (values.high + 1);
    167.             values.low = (values.low + 1);
    168.             values.close = (values.close - 1);
    169.             values.volume = (values.volume + 100);
    170.           }
    171.  
    172.           // set new global high/low values
    173.           if (values.high >= gHigh) gHigh = values.high;
    174.           if (values.low <= gLow) gLow = values.low;
    175.  
    176.           return values;
    177.         });
    178.  
    179.         // assign data to grid
    180.         if (zgRef) zgRef.setData(realTimeData);
    181.       }, 1000);
    182.     });
    183.   </script>
    184. </body>
    185.  
    186. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Cell Formatting">
    12.     <zg-data data='[
    13.         {
    14.             "open": "114.1900",
    15.             "high": "114.4950",
    16.             "low": "113.6800",
    17.             "close": "114.2750",
    18.             "volume": "7120112"
    19.         }, {
    20.             "open": "113.0300",
    21.             "high": "114.9000",
    22.             "low": "112.2175",
    23.             "close": "114.6700",
    24.             "volume": "27334460"
    25.         }, {
    26.             "open": "113.0500",
    27.             "high": "113.3200",
    28.             "low": "111.0350",
    29.             "close": "111.7000",
    30.             "volume": "21728429"
    31.         }, {
    32.             "open": "112.1900",
    33.             "high": "113.6950",
    34.             "low": "111.7200",
    35.             "close": "113.2100",
    36.             "volume": "22170934"
    37.         }, {
    38.             "open": "113.6900",
    39.             "high": "113.7000",
    40.             "low": "111.8600",
    41.             "close": "112.1400",
    42.             "volume": "20736516"
    43.         }
    44.  
    45.       ]'></zg-data>
    46.     <zg-colgroup>
    47.       <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
    48.       <zg-column index="high" type="currency" cell-class="_highlightHigh"></zg-column>
    49.       <zg-column index="low" type="currency" cell-class="_highlightLow"></zg-column>
    50.       <zg-column index="close" type="currency"></zg-column>
    51.       <zg-column index="volume"></zg-column>
    52.     </zg-colgroup>
    53.   </zing-grid>
    54. </body>
    55.  
    56. </html>
    1. .increased {
    2.   color: #66bb6a;
    3. }
    4.  
    5. .increased::before {
    6.   content: '↑';
    7. }
    8.  
    9. .decreased {
    10.   color: #ef5350;
    11. }
    12.  
    13. .decreased::before {
    14.   content: '↓';
    15. }
    16.  
    17. .highlight {
    18.   background: #fff59d;
    19. }
    1. // global vars for highlight min/max values
    2. var gHigh = -1;
    3. var gLow = Number.MAX_SAFE_INTEGER;
    4.  
    5. // determine if we should render positive/negative
    6. // cell styling based on opening stock price vs when it last
    7. // closed
    8. function _renderStocks(open, cellDOMRef, cellRef) {
    9.   console.log(`open value: ${open} - record info ${JSON.stringify(cellRef.record)}`);
    10.   // if open is higher than close value
    11.   if (open > cellRef.record.close) return 'stock-open increased';
    12.  
    13.   return 'stock-open decreased';
    14. }
    15.  
    16. // highlight cell with highest value in high column
    17. function _highlightHigh(high, cellDOMRef, cellRef) {
    18.   if (high == Number(gHigh)) return 'highlight';
    19. }
    20.  
    21. // highlight cell with lowest value in low column
    22. function _highlightLow(low, cellDOMRef, cellRef) {
    23.   if (low == Number(gLow)) return 'highlight';
    24. }
    25.  
    26. // window:load event for Javascript to run after HTML
    27. // because this Javascript is injected into the document head
    28. window.addEventListener('load', () => {
    29.   // Javascript code to execute after DOM content
    30.  
    31.   // save reference to the grid
    32.   const zgRef = document.querySelector('zing-grid');
    33.  
    34.   // interval mimics real time data updates
    35.   setInterval(() => {
    36.     // regenerate the same starting dataset everytime to 
    37.     // produce better visual results
    38.     let realTimeData = [{
    39.       open: 114.1900,
    40.       high: 114.4950,
    41.       low: 113.6800,
    42.       close: 114.2750,
    43.       volume: 7120112
    44.     }, {
    45.       open: 113.0300,
    46.       high: 114.9000,
    47.       low: 112.2175,
    48.       close: 114.6700,
    49.       volume: 27334460
    50.     }, {
    51.       open: 113.0500,
    52.       high: 113.3200,
    53.       low: 111.0350,
    54.       close: 111.7000,
    55.       volume: 21728429
    56.     }, {
    57.       open: 112.1900,
    58.       high: 113.6950,
    59.       low: 111.7200,
    60.       close: 113.2100,
    61.       volume: 22170934
    62.     }, {
    63.       open: 113.6900,
    64.       high: 113.7000,
    65.       low: 111.8600,
    66.       close: 112.1400,
    67.       volume: 20736516
    68.     }];
    69.  
    70.     // reset global vars for highlighint min/max cells
    71.     gHigh = -1;
    72.     gLow = Number.MAX_SAFE_INTEGER;
    73.  
    74.     // update data to mimic realtime updates
    75.     realTimeData.map(values => {
    76.  
    77.       // randomly choose to. inc/dec values to 
    78.       // simulate stock exchanges
    79.       if (Math.round(Math.random())) {
    80.         values.open = (values.open - 1);
    81.         values.high = (values.high - 1);
    82.         values.low = (values.low - 1);
    83.         values.close = (values.close + 1);
    84.         values.volume = (values.volume - 100);
    85.       } else {
    86.         values.open = (values.open + Math.floor(Math.random() * 5));
    87.         values.high = (values.high + 1);
    88.         values.low = (values.low + 1);
    89.         values.close = (values.close - 1);
    90.         values.volume = (values.volume + 100);
    91.       }
    92.  
    93.       // set new global high/low values
    94.       if (values.high >= gHigh) gHigh = values.high;
    95.       if (values.low <= gLow) gLow = values.low;
    96.  
    97.       return values;
    98.     });
    99.  
    100.     // assign data to grid
    101.     if (zgRef) zgRef.setData(realTimeData);
    102.   }, 1000);
    103. });