Global Average Absolute Sea Level Change (1880 - 2014)
Climate change is serious business, so we created this demo to raise awareness. It features conditional formatting and sorting.
Result
Full
HTML
CSS
JS
Edit
Download
Global Average Absolute Sea Level Change (1880 - 2014)
From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.
View Source
Full Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i|Rubik:300,400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <script nonce="undefined" src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script> <style> .zg-body { padding-top: 50px; font-family: 'Rubik', sans-serif; background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/water-levels%2Fweather-cooler.png?alt=media&token=5e6df3b4-1089-47c5-9fea-f191206bbc73'); } zing-grid { max-width: 750px; margin: 0 auto; font-family: 'Rubik', sans-serif; border: 0px solid #03375e; background: #004a6b; color: #03375e; --theme-color-primary: #ffffff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; --zg-cell-background_sorted: #e3e6e8; --zg-head-cell-background_sorted: #045282; --zg-head-cell-color_sorted: #ffffff; --zg-option-list-color: #03375e; box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7); -webkit-box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7); -moz-box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7); } zg-icon { max-width: 15px; } zg-caption { background: #004a6b; border-bottom: 1px solid #004a6b; padding: 30px 20px; border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; text-align: center; } zg-caption h1 { color: #76d9f4; font-size: 25px; margin: 0; font-weight: 300; } zg-caption p { font-size: 11px; font-family: 'Roboto Mono', monospace; color: #F8FAFC; line-height: 1.9; margin-bottom: -5px; } zg-caption a { color: #028ecc; text-decoration: none; padding: 2px; font-size: 12px; margin-top: -15px; } zg-caption a:hover { color: #ffffff; text-decoration: underline; } zg-head-cell { font-size: 11px; background: #028ecc; color: #F8FAFC; /* margin-bottom: -2px; */ } zg-body { font-size: 12px; font-family: 'Roboto Mono', monospace; background: #F8FAFC; color: #04769e; border: 0px; } zg-row, zg-cell { padding: 0 15px; height: 38px; } zg-row { border-bottom: 1px solid #dcdfe0; } .zg-body .null { color: #a1b2b5; font-style: italic; } zg-footer { font-size: 12px; padding: 0 15px 0 15px; display: flex; justify-content: space-between; color: #ffffff; background: #004a6b; } zg-pager { color: #ffffff; } zg-watermark { border-top: 1px solid #004a6b; border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; } zing-grid[loading] { height: 1282px; } </style> </head> <body class="zg-body"> <zing-grid layout="row" layout-controls="disabled" sort pager page page-size="25" page-size-options="25,50,100,200"> <zg-data data='[ { "CSIROAdjustedSeaLevel":0.0, "LowerErrorBound":-0.952755905, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.952755905, "Year":"1880" }, { "CSIROAdjustedSeaLevel":0.220472441, "LowerErrorBound":-0.732283464, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.173228345, "Year":"1881" }, { "CSIROAdjustedSeaLevel":-0.440944881, "LowerErrorBound":-1.346456692, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.464566929, "Year":"1882" }, { "CSIROAdjustedSeaLevel":-0.232283464, "LowerErrorBound":-1.129921259, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.66535433, "Year":"1883" }, { "CSIROAdjustedSeaLevel":0.590551181, "LowerErrorBound":-0.283464567, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.464566928, "Year":"1884" }, { "CSIROAdjustedSeaLevel":0.531496062, "LowerErrorBound":-0.330708661, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.393700786, "Year":"1885" }, { "CSIROAdjustedSeaLevel":0.437007874, "LowerErrorBound":-0.381889763, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.255905511, "Year":"1886" }, { "CSIROAdjustedSeaLevel":0.216535433, "LowerErrorBound":-0.602362204, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.03543307, "Year":"1887" }, { "CSIROAdjustedSeaLevel":0.299212598, "LowerErrorBound":-0.519685039, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.118110235, "Year":"1888" }, { "CSIROAdjustedSeaLevel":0.362204724, "LowerErrorBound":-0.456692913, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.181102361, "Year":"1889" }, { "CSIROAdjustedSeaLevel":0.440944881, "LowerErrorBound":-0.374015748, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.255905511, "Year":"1890" }, { "CSIROAdjustedSeaLevel":0.374015748, "LowerErrorBound":-0.440944881, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.188976377, "Year":"1891" }, { "CSIROAdjustedSeaLevel":0.499999999, "LowerErrorBound":-0.31496063, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.314960629, "Year":"1892" }, { "CSIROAdjustedSeaLevel":0.685039369, "LowerErrorBound":-0.114173228, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.484251967, "Year":"1893" }, { "CSIROAdjustedSeaLevel":0.303149606, "LowerErrorBound":-0.547244094, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.153543306, "Year":"1894" }, { "CSIROAdjustedSeaLevel":0.767716535, "LowerErrorBound":-0.082677165, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.618110235, "Year":"1895" }, { "CSIROAdjustedSeaLevel":0.468503937, "LowerErrorBound":-0.366141732, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.303149605, "Year":"1896" }, { "CSIROAdjustedSeaLevel":0.673228346, "LowerErrorBound":-0.145669291, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.492125983, "Year":"1897" }, { "CSIROAdjustedSeaLevel":1.043307086, "LowerErrorBound":0.267716535, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.818897636, "Year":"1898" }, { "CSIROAdjustedSeaLevel":1.338582676, "LowerErrorBound":0.574803149, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.102362203, "Year":"1899" }, { "CSIROAdjustedSeaLevel":1.125984251, "LowerErrorBound":0.405511811, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.846456691, "Year":"1900" }, { "CSIROAdjustedSeaLevel":1.110236219, "LowerErrorBound":0.417322834, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.803149604, "Year":"1901" }, { "CSIROAdjustedSeaLevel":1.291338581, "LowerErrorBound":0.61023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.972440943, "Year":"1902" }, { "CSIROAdjustedSeaLevel":1.606299211, "LowerErrorBound":0.937007873, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.275590549, "Year":"1903" }, { "CSIROAdjustedSeaLevel":1.2007874, "LowerErrorBound":0.53543307, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.86614173, "Year":"1904" }, { "CSIROAdjustedSeaLevel":0.984251968, "LowerErrorBound":0.377952756, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.590551179, "Year":"1905" }, { "CSIROAdjustedSeaLevel":1.251968503, "LowerErrorBound":0.673228346, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.83070866, "Year":"1906" }, { "CSIROAdjustedSeaLevel":1.196850392, "LowerErrorBound":0.61023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.783464565, "Year":"1907" }, { "CSIROAdjustedSeaLevel":1.098425196, "LowerErrorBound":0.527559055, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.669291337, "Year":"1908" }, { "CSIROAdjustedSeaLevel":1.27559055, "LowerErrorBound":0.700787401, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.850393699, "Year":"1909" }, { "CSIROAdjustedSeaLevel":1.271653542, "LowerErrorBound":0.696850393, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.846456691, "Year":"1910" }, { "CSIROAdjustedSeaLevel":1.598425195, "LowerErrorBound":1.039370078, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.157480313, "Year":"1911" }, { "CSIROAdjustedSeaLevel":1.476377951, "LowerErrorBound":0.917322834, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.035433069, "Year":"1912" }, { "CSIROAdjustedSeaLevel":1.547244093, "LowerErrorBound":0.992125983, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.102362203, "Year":"1913" }, { "CSIROAdjustedSeaLevel":1.795275589, "LowerErrorBound":1.251968503, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.338582675, "Year":"1914" }, { "CSIROAdjustedSeaLevel":2.10629921, "LowerErrorBound":1.57086614, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.641732281, "Year":"1915" }, { "CSIROAdjustedSeaLevel":2.031496061, "LowerErrorBound":1.519685038, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.543307084, "Year":"1916" }, { "CSIROAdjustedSeaLevel":1.854330707, "LowerErrorBound":1.350393699, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.358267714, "Year":"1917" }, { "CSIROAdjustedSeaLevel":1.791338581, "LowerErrorBound":1.291338581, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.29133858, "Year":"1918" }, { "CSIROAdjustedSeaLevel":1.854330707, "LowerErrorBound":1.354330707, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.354330706, "Year":"1919" }, { "CSIROAdjustedSeaLevel":1.905511809, "LowerErrorBound":1.393700786, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.417322832, "Year":"1920" }, { "CSIROAdjustedSeaLevel":1.988188974, "LowerErrorBound":1.472440943, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.503937005, "Year":"1921" }, { "CSIROAdjustedSeaLevel":1.952755904, "LowerErrorBound":1.433070865, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.472440942, "Year":"1922" }, { "CSIROAdjustedSeaLevel":1.999999998, "LowerErrorBound":1.488188975, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.511811021, "Year":"1923" }, { "CSIROAdjustedSeaLevel":1.712598423, "LowerErrorBound":1.196850392, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.228346454, "Year":"1924" }, { "CSIROAdjustedSeaLevel":1.791338581, "LowerErrorBound":1.255905511, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.326771651, "Year":"1925" }, { "CSIROAdjustedSeaLevel":2.047244092, "LowerErrorBound":1.507874014, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.586614171, "Year":"1926" }, { "CSIROAdjustedSeaLevel":2.003937006, "LowerErrorBound":1.496062991, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.511811021, "Year":"1927" }, { "CSIROAdjustedSeaLevel":1.850393699, "LowerErrorBound":1.366141731, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.334645667, "Year":"1928" }, { "CSIROAdjustedSeaLevel":1.905511809, "LowerErrorBound":1.429133857, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.381889761, "Year":"1929" }, { "CSIROAdjustedSeaLevel":2.062992124, "LowerErrorBound":1.590551179, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.535433068, "Year":"1930" }, { "CSIROAdjustedSeaLevel":2.047244092, "LowerErrorBound":1.566929132, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.527559053, "Year":"1931" }, { "CSIROAdjustedSeaLevel":2.271653541, "LowerErrorBound":1.803149604, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.740157478, "Year":"1932" }, { "CSIROAdjustedSeaLevel":2.440944879, "LowerErrorBound":1.976377951, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.905511808, "Year":"1933" }, { "CSIROAdjustedSeaLevel":2.228346454, "LowerErrorBound":1.759842518, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.696850391, "Year":"1934" }, { "CSIROAdjustedSeaLevel":2.448818895, "LowerErrorBound":1.980314959, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.917322832, "Year":"1935" }, { "CSIROAdjustedSeaLevel":2.295275588, "LowerErrorBound":1.83070866, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.759842517, "Year":"1936" }, { "CSIROAdjustedSeaLevel":2.519685037, "LowerErrorBound":2.055118108, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.984251965, "Year":"1937" }, { "CSIROAdjustedSeaLevel":2.622047241, "LowerErrorBound":2.157480313, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.08661417, "Year":"1938" }, { "CSIROAdjustedSeaLevel":2.826771651, "LowerErrorBound":2.346456691, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.307086611, "Year":"1939" }, { "CSIROAdjustedSeaLevel":2.618110234, "LowerErrorBound":2.18110236, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.055118107, "Year":"1940" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1941" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1942" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1943" }, { "CSIROAdjustedSeaLevel":2.84645669, "LowerErrorBound":2.425196848, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.267716532, "Year":"1944" }, { "CSIROAdjustedSeaLevel":2.95669291, "LowerErrorBound":2.535433068, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.377952752, "Year":"1945" }, { "CSIROAdjustedSeaLevel":3.251968501, "LowerErrorBound":2.834645666, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.669291335, "Year":"1946" }, { "CSIROAdjustedSeaLevel":3.374015745, "LowerErrorBound":2.996062989, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.7519685, "Year":"1947" }, { "CSIROAdjustedSeaLevel":3.562992122, "LowerErrorBound":3.19685039, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.929133854, "Year":"1948" }, { "CSIROAdjustedSeaLevel":3.51181102, "LowerErrorBound":3.181102359, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.842519681, "Year":"1949" }, { "CSIROAdjustedSeaLevel":3.598425193, "LowerErrorBound":3.287401571, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.909448815, "Year":"1950" }, { "CSIROAdjustedSeaLevel":3.972440941, "LowerErrorBound":3.665354327, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.279527555, "Year":"1951" }, { "CSIROAdjustedSeaLevel":3.870078736, "LowerErrorBound":3.56692913, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.173228342, "Year":"1952" }, { "CSIROAdjustedSeaLevel":4.043307082, "LowerErrorBound":3.748031492, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.338582673, "Year":"1953" }, { "CSIROAdjustedSeaLevel":3.929133854, "LowerErrorBound":3.64173228, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.216535429, "Year":"1954" }, { "CSIROAdjustedSeaLevel":3.964566925, "LowerErrorBound":3.685039366, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.244094484, "Year":"1955" }, { "CSIROAdjustedSeaLevel":3.763779524, "LowerErrorBound":3.488188973, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.039370075, "Year":"1956" }, { "CSIROAdjustedSeaLevel":4.291338578, "LowerErrorBound":4.019685035, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.562992121, "Year":"1957" }, { "CSIROAdjustedSeaLevel":4.346456688, "LowerErrorBound":4.086614169, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.606299208, "Year":"1958" }, { "CSIROAdjustedSeaLevel":4.358267712, "LowerErrorBound":4.102362201, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.614173224, "Year":"1959" }, { "CSIROAdjustedSeaLevel":4.503937003, "LowerErrorBound":4.244094484, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.763779523, "Year":"1960" }, { "CSIROAdjustedSeaLevel":4.748031491, "LowerErrorBound":4.488188972, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.007874011, "Year":"1961" }, { "CSIROAdjustedSeaLevel":4.543307082, "LowerErrorBound":4.283464563, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.803149601, "Year":"1962" }, { "CSIROAdjustedSeaLevel":4.480314956, "LowerErrorBound":4.220472437, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.740157475, "Year":"1963" }, { "CSIROAdjustedSeaLevel":4.169291334, "LowerErrorBound":3.905511807, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.433070862, "Year":"1964" }, { "CSIROAdjustedSeaLevel":4.610236216, "LowerErrorBound":4.346456688, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.874015743, "Year":"1965" }, { "CSIROAdjustedSeaLevel":4.397637791, "LowerErrorBound":4.137795271, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.65748031, "Year":"1966" }, { "CSIROAdjustedSeaLevel":4.452755901, "LowerErrorBound":4.196850389, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.708661413, "Year":"1967" }, { "CSIROAdjustedSeaLevel":4.484251964, "LowerErrorBound":4.220472437, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.748031491, "Year":"1968" }, { "CSIROAdjustedSeaLevel":4.751968499, "LowerErrorBound":4.476377948, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.02755905, "Year":"1969" }, { "CSIROAdjustedSeaLevel":4.67716535, "LowerErrorBound":4.401574799, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.9527559, "Year":"1970" }, { "CSIROAdjustedSeaLevel":4.881889759, "LowerErrorBound":4.610236216, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.153543302, "Year":"1971" }, { "CSIROAdjustedSeaLevel":5.240157475, "LowerErrorBound":4.968503932, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.511811018, "Year":"1972" }, { "CSIROAdjustedSeaLevel":5.003937003, "LowerErrorBound":4.736220468, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.271653538, "Year":"1973" }, { "CSIROAdjustedSeaLevel":5.472440939, "LowerErrorBound":5.204724404, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.740157474, "Year":"1974" }, { "CSIROAdjustedSeaLevel":5.409448813, "LowerErrorBound":5.145669286, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.673228341, "Year":"1975" }, { "CSIROAdjustedSeaLevel":5.370078735, "LowerErrorBound":5.1023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.63779527, "Year":"1976" }, { "CSIROAdjustedSeaLevel":5.303149601, "LowerErrorBound":5.043307081, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.56299212, "Year":"1977" }, { "CSIROAdjustedSeaLevel":5.555118105, "LowerErrorBound":5.291338577, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.818897632, "Year":"1978" }, { "CSIROAdjustedSeaLevel":5.362204719, "LowerErrorBound":5.098425192, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.625984246, "Year":"1979" }, { "CSIROAdjustedSeaLevel":5.598425191, "LowerErrorBound":5.34251968, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.854330703, "Year":"1980" }, { "CSIROAdjustedSeaLevel":6.086614167, "LowerErrorBound":5.830708655, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.342519679, "Year":"1981" }, { "CSIROAdjustedSeaLevel":5.858267711, "LowerErrorBound":5.610236215, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.106299206, "Year":"1982" }, { "CSIROAdjustedSeaLevel":6.188976372, "LowerErrorBound":5.93307086, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.444881883, "Year":"1983" }, { "CSIROAdjustedSeaLevel":6.153543301, "LowerErrorBound":5.905511805, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.401574797, "Year":"1984" }, { "CSIROAdjustedSeaLevel":5.74803149, "LowerErrorBound":5.499999994, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.996062986, "Year":"1985" }, { "CSIROAdjustedSeaLevel":5.771653537, "LowerErrorBound":5.523622042, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.019685033, "Year":"1986" }, { "CSIROAdjustedSeaLevel":5.795275585, "LowerErrorBound":5.551181097, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.039370073, "Year":"1987" }, { "CSIROAdjustedSeaLevel":5.980314955, "LowerErrorBound":5.732283459, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.22834645, "Year":"1988" }, { "CSIROAdjustedSeaLevel":6.157480309, "LowerErrorBound":5.905511805, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.409448812, "Year":"1989" }, { "CSIROAdjustedSeaLevel":6.232283458, "LowerErrorBound":5.972440939, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.492125978, "Year":"1990" }, { "CSIROAdjustedSeaLevel":6.334645663, "LowerErrorBound":6.074803143, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.594488182, "Year":"1991" }, { "CSIROAdjustedSeaLevel":6.35826771, "LowerErrorBound":6.094488183, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.622047237, "Year":"1992" }, { "CSIROAdjustedSeaLevel":6.291338576, "LowerErrorBound":6.027559049, "NOAAAdjustedSeaLevel":6.297493046, "UpperErrorBound":6.555118104, "Year":"1993" }, { "CSIROAdjustedSeaLevel":6.499999993, "LowerErrorBound":6.236220466, "NOAAAdjustedSeaLevel":6.310933553, "UpperErrorBound":6.763779521, "Year":"1994" }, { "CSIROAdjustedSeaLevel":6.618110229, "LowerErrorBound":6.354330702, "NOAAAdjustedSeaLevel":6.452568661, "UpperErrorBound":6.881889757, "Year":"1995" }, { "CSIROAdjustedSeaLevel":6.787401568, "LowerErrorBound":6.523622041, "NOAAAdjustedSeaLevel":6.62763131, "UpperErrorBound":7.051181095, "Year":"1996" }, { "CSIROAdjustedSeaLevel":7.066929127, "LowerErrorBound":6.803149599, "NOAAAdjustedSeaLevel":6.733920367, "UpperErrorBound":7.330708654, "Year":"1997" }, { "CSIROAdjustedSeaLevel":6.665354324, "LowerErrorBound":6.393700781, "NOAAAdjustedSeaLevel":6.865806069, "UpperErrorBound":6.937007867, "Year":"1998" }, { "CSIROAdjustedSeaLevel":7.011811016, "LowerErrorBound":6.736220466, "NOAAAdjustedSeaLevel":6.848689771, "UpperErrorBound":7.287401567, "Year":"1999" }, { "CSIROAdjustedSeaLevel":7.062992119, "LowerErrorBound":6.791338576, "NOAAAdjustedSeaLevel":6.920582014, "UpperErrorBound":7.334645662, "Year":"2000" }, { "CSIROAdjustedSeaLevel":7.287401567, "LowerErrorBound":7.019685032, "NOAAAdjustedSeaLevel":7.087460011, "UpperErrorBound":7.555118103, "Year":"2001" }, { "CSIROAdjustedSeaLevel":7.381889756, "LowerErrorBound":7.110236213, "NOAAAdjustedSeaLevel":7.319697525, "UpperErrorBound":7.653543299, "Year":"2002" }, { "CSIROAdjustedSeaLevel":7.759842512, "LowerErrorBound":7.484251961, "NOAAAdjustedSeaLevel":7.488352718, "UpperErrorBound":8.035433063, "Year":"2003" }, { "CSIROAdjustedSeaLevel":7.740157472, "LowerErrorBound":7.464566922, "NOAAAdjustedSeaLevel":7.507932839, "UpperErrorBound":8.015748023, "Year":"2004" }, { "CSIROAdjustedSeaLevel":7.74409448, "LowerErrorBound":7.472440937, "NOAAAdjustedSeaLevel":7.644563144, "UpperErrorBound":8.015748023, "Year":"2005" }, { "CSIROAdjustedSeaLevel":7.917322827, "LowerErrorBound":7.645669284, "NOAAAdjustedSeaLevel":7.697420009, "UpperErrorBound":8.18897637, "Year":"2006" }, { "CSIROAdjustedSeaLevel":7.996062984, "LowerErrorBound":7.712598417, "NOAAAdjustedSeaLevel":7.70214715, "UpperErrorBound":8.279527551, "Year":"2007" }, { "CSIROAdjustedSeaLevel":8.350393692, "LowerErrorBound":8.078740149, "NOAAAdjustedSeaLevel":7.90736541, "UpperErrorBound":8.622047235, "Year":"2008" }, { "CSIROAdjustedSeaLevel":8.586614164, "LowerErrorBound":8.311023614, "NOAAAdjustedSeaLevel":8.04635409, "UpperErrorBound":8.862204715, "Year":"2009" }, { "CSIROAdjustedSeaLevel":8.901574794, "LowerErrorBound":8.618110227, "NOAAAdjustedSeaLevel":8.122972567, "UpperErrorBound":9.185039361, "Year":"2010" }, { "CSIROAdjustedSeaLevel":8.96456692, "LowerErrorBound":8.661417314, "NOAAAdjustedSeaLevel":8.053065004, "UpperErrorBound":9.267716526, "Year":"2011" }, { "CSIROAdjustedSeaLevel":9.326771644, "LowerErrorBound":8.992125975, "NOAAAdjustedSeaLevel":8.457057629, "UpperErrorBound":9.661417313, "Year":"2012" }, { "CSIROAdjustedSeaLevel":8.980314951, "LowerErrorBound":8.622047235, "NOAAAdjustedSeaLevel":8.546648227, "UpperErrorBound":9.338582668, "Year":"2013" }, { "CSIROAdjustedSeaLevel": "null", "LowerErrorBound": "null", "NOAAAdjustedSeaLevel":8.663700393, "UpperErrorBound": "null", "Year":"2014" } ]'></zg-data> <zg-caption> <h1>Global Average Absolute Sea Level Change (1880 - 2014)</h1> <p><em>From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.</em> <br> <a href="https://datahub.io/core/sea-level-rise" target="_blank">View Source <i class="far fa-arrow-alt-circle-right"></i></a> </p> </zg-caption> <zg-colgroup> <zg-column index="Year" header="Year"> <strong>[[index.Year]]</strong> </zg-column> <zg-column index="CSIROAdjustedSeaLevel" renderer="renderNull" header="CSIRO Adjusted Sea Level"> </zg-column> <zg-column index="LowerErrorBound" renderer="renderNull" header="Lower Error Bound"></zg-column> <zg-column index="NOAAAdjustedSeaLevel" renderer="renderNull" header="NOAA Adjusted Sea Level"></zg-column> <zg-column index="UpperErrorBound" renderer="renderNull" header="Upper Error Bound"></zg-column> </zg-colgroup> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); function renderNull(value) { if (value == "null") { return `<i style="font-size: 12px; color: #a1b2b5;" class="far fa-times-circle"></i> <span class="null"> ${value}</span>`; } else if (value == "0") { return `<span style="color: #b3c1c4; font-style: italic;">${value}</span>`; } else if (value > "0") { return `<span style="color: #19b29f; font-weight: bold;">${value}</span>`; } else { return `<span style="color: #ea5374; font-weight: bold; margin-left: -8px;">${value}</span>`; } } // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content }); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i|Rubik:300,400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script> </head> <body class="zg-body"> <zing-grid layout="row" layout-controls="disabled" sort pager page page-size="25" page-size-options="25,50,100,200"> <zg-data data='[ { "CSIROAdjustedSeaLevel":0.0, "LowerErrorBound":-0.952755905, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.952755905, "Year":"1880" }, { "CSIROAdjustedSeaLevel":0.220472441, "LowerErrorBound":-0.732283464, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.173228345, "Year":"1881" }, { "CSIROAdjustedSeaLevel":-0.440944881, "LowerErrorBound":-1.346456692, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.464566929, "Year":"1882" }, { "CSIROAdjustedSeaLevel":-0.232283464, "LowerErrorBound":-1.129921259, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":0.66535433, "Year":"1883" }, { "CSIROAdjustedSeaLevel":0.590551181, "LowerErrorBound":-0.283464567, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.464566928, "Year":"1884" }, { "CSIROAdjustedSeaLevel":0.531496062, "LowerErrorBound":-0.330708661, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.393700786, "Year":"1885" }, { "CSIROAdjustedSeaLevel":0.437007874, "LowerErrorBound":-0.381889763, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.255905511, "Year":"1886" }, { "CSIROAdjustedSeaLevel":0.216535433, "LowerErrorBound":-0.602362204, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.03543307, "Year":"1887" }, { "CSIROAdjustedSeaLevel":0.299212598, "LowerErrorBound":-0.519685039, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.118110235, "Year":"1888" }, { "CSIROAdjustedSeaLevel":0.362204724, "LowerErrorBound":-0.456692913, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.181102361, "Year":"1889" }, { "CSIROAdjustedSeaLevel":0.440944881, "LowerErrorBound":-0.374015748, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.255905511, "Year":"1890" }, { "CSIROAdjustedSeaLevel":0.374015748, "LowerErrorBound":-0.440944881, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.188976377, "Year":"1891" }, { "CSIROAdjustedSeaLevel":0.499999999, "LowerErrorBound":-0.31496063, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.314960629, "Year":"1892" }, { "CSIROAdjustedSeaLevel":0.685039369, "LowerErrorBound":-0.114173228, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.484251967, "Year":"1893" }, { "CSIROAdjustedSeaLevel":0.303149606, "LowerErrorBound":-0.547244094, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.153543306, "Year":"1894" }, { "CSIROAdjustedSeaLevel":0.767716535, "LowerErrorBound":-0.082677165, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.618110235, "Year":"1895" }, { "CSIROAdjustedSeaLevel":0.468503937, "LowerErrorBound":-0.366141732, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.303149605, "Year":"1896" }, { "CSIROAdjustedSeaLevel":0.673228346, "LowerErrorBound":-0.145669291, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.492125983, "Year":"1897" }, { "CSIROAdjustedSeaLevel":1.043307086, "LowerErrorBound":0.267716535, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.818897636, "Year":"1898" }, { "CSIROAdjustedSeaLevel":1.338582676, "LowerErrorBound":0.574803149, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.102362203, "Year":"1899" }, { "CSIROAdjustedSeaLevel":1.125984251, "LowerErrorBound":0.405511811, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.846456691, "Year":"1900" }, { "CSIROAdjustedSeaLevel":1.110236219, "LowerErrorBound":0.417322834, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.803149604, "Year":"1901" }, { "CSIROAdjustedSeaLevel":1.291338581, "LowerErrorBound":0.61023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.972440943, "Year":"1902" }, { "CSIROAdjustedSeaLevel":1.606299211, "LowerErrorBound":0.937007873, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.275590549, "Year":"1903" }, { "CSIROAdjustedSeaLevel":1.2007874, "LowerErrorBound":0.53543307, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.86614173, "Year":"1904" }, { "CSIROAdjustedSeaLevel":0.984251968, "LowerErrorBound":0.377952756, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.590551179, "Year":"1905" }, { "CSIROAdjustedSeaLevel":1.251968503, "LowerErrorBound":0.673228346, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.83070866, "Year":"1906" }, { "CSIROAdjustedSeaLevel":1.196850392, "LowerErrorBound":0.61023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.783464565, "Year":"1907" }, { "CSIROAdjustedSeaLevel":1.098425196, "LowerErrorBound":0.527559055, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.669291337, "Year":"1908" }, { "CSIROAdjustedSeaLevel":1.27559055, "LowerErrorBound":0.700787401, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.850393699, "Year":"1909" }, { "CSIROAdjustedSeaLevel":1.271653542, "LowerErrorBound":0.696850393, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":1.846456691, "Year":"1910" }, { "CSIROAdjustedSeaLevel":1.598425195, "LowerErrorBound":1.039370078, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.157480313, "Year":"1911" }, { "CSIROAdjustedSeaLevel":1.476377951, "LowerErrorBound":0.917322834, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.035433069, "Year":"1912" }, { "CSIROAdjustedSeaLevel":1.547244093, "LowerErrorBound":0.992125983, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.102362203, "Year":"1913" }, { "CSIROAdjustedSeaLevel":1.795275589, "LowerErrorBound":1.251968503, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.338582675, "Year":"1914" }, { "CSIROAdjustedSeaLevel":2.10629921, "LowerErrorBound":1.57086614, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.641732281, "Year":"1915" }, { "CSIROAdjustedSeaLevel":2.031496061, "LowerErrorBound":1.519685038, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.543307084, "Year":"1916" }, { "CSIROAdjustedSeaLevel":1.854330707, "LowerErrorBound":1.350393699, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.358267714, "Year":"1917" }, { "CSIROAdjustedSeaLevel":1.791338581, "LowerErrorBound":1.291338581, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.29133858, "Year":"1918" }, { "CSIROAdjustedSeaLevel":1.854330707, "LowerErrorBound":1.354330707, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.354330706, "Year":"1919" }, { "CSIROAdjustedSeaLevel":1.905511809, "LowerErrorBound":1.393700786, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.417322832, "Year":"1920" }, { "CSIROAdjustedSeaLevel":1.988188974, "LowerErrorBound":1.472440943, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.503937005, "Year":"1921" }, { "CSIROAdjustedSeaLevel":1.952755904, "LowerErrorBound":1.433070865, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.472440942, "Year":"1922" }, { "CSIROAdjustedSeaLevel":1.999999998, "LowerErrorBound":1.488188975, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.511811021, "Year":"1923" }, { "CSIROAdjustedSeaLevel":1.712598423, "LowerErrorBound":1.196850392, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.228346454, "Year":"1924" }, { "CSIROAdjustedSeaLevel":1.791338581, "LowerErrorBound":1.255905511, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.326771651, "Year":"1925" }, { "CSIROAdjustedSeaLevel":2.047244092, "LowerErrorBound":1.507874014, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.586614171, "Year":"1926" }, { "CSIROAdjustedSeaLevel":2.003937006, "LowerErrorBound":1.496062991, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.511811021, "Year":"1927" }, { "CSIROAdjustedSeaLevel":1.850393699, "LowerErrorBound":1.366141731, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.334645667, "Year":"1928" }, { "CSIROAdjustedSeaLevel":1.905511809, "LowerErrorBound":1.429133857, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.381889761, "Year":"1929" }, { "CSIROAdjustedSeaLevel":2.062992124, "LowerErrorBound":1.590551179, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.535433068, "Year":"1930" }, { "CSIROAdjustedSeaLevel":2.047244092, "LowerErrorBound":1.566929132, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.527559053, "Year":"1931" }, { "CSIROAdjustedSeaLevel":2.271653541, "LowerErrorBound":1.803149604, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.740157478, "Year":"1932" }, { "CSIROAdjustedSeaLevel":2.440944879, "LowerErrorBound":1.976377951, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.905511808, "Year":"1933" }, { "CSIROAdjustedSeaLevel":2.228346454, "LowerErrorBound":1.759842518, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.696850391, "Year":"1934" }, { "CSIROAdjustedSeaLevel":2.448818895, "LowerErrorBound":1.980314959, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.917322832, "Year":"1935" }, { "CSIROAdjustedSeaLevel":2.295275588, "LowerErrorBound":1.83070866, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.759842517, "Year":"1936" }, { "CSIROAdjustedSeaLevel":2.519685037, "LowerErrorBound":2.055118108, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":2.984251965, "Year":"1937" }, { "CSIROAdjustedSeaLevel":2.622047241, "LowerErrorBound":2.157480313, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.08661417, "Year":"1938" }, { "CSIROAdjustedSeaLevel":2.826771651, "LowerErrorBound":2.346456691, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.307086611, "Year":"1939" }, { "CSIROAdjustedSeaLevel":2.618110234, "LowerErrorBound":2.18110236, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.055118107, "Year":"1940" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1941" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1942" }, { "CSIROAdjustedSeaLevel":3.098425194, "LowerErrorBound":2.673228344, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.523622044, "Year":"1943" }, { "CSIROAdjustedSeaLevel":2.84645669, "LowerErrorBound":2.425196848, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.267716532, "Year":"1944" }, { "CSIROAdjustedSeaLevel":2.95669291, "LowerErrorBound":2.535433068, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.377952752, "Year":"1945" }, { "CSIROAdjustedSeaLevel":3.251968501, "LowerErrorBound":2.834645666, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.669291335, "Year":"1946" }, { "CSIROAdjustedSeaLevel":3.374015745, "LowerErrorBound":2.996062989, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.7519685, "Year":"1947" }, { "CSIROAdjustedSeaLevel":3.562992122, "LowerErrorBound":3.19685039, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.929133854, "Year":"1948" }, { "CSIROAdjustedSeaLevel":3.51181102, "LowerErrorBound":3.181102359, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.842519681, "Year":"1949" }, { "CSIROAdjustedSeaLevel":3.598425193, "LowerErrorBound":3.287401571, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":3.909448815, "Year":"1950" }, { "CSIROAdjustedSeaLevel":3.972440941, "LowerErrorBound":3.665354327, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.279527555, "Year":"1951" }, { "CSIROAdjustedSeaLevel":3.870078736, "LowerErrorBound":3.56692913, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.173228342, "Year":"1952" }, { "CSIROAdjustedSeaLevel":4.043307082, "LowerErrorBound":3.748031492, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.338582673, "Year":"1953" }, { "CSIROAdjustedSeaLevel":3.929133854, "LowerErrorBound":3.64173228, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.216535429, "Year":"1954" }, { "CSIROAdjustedSeaLevel":3.964566925, "LowerErrorBound":3.685039366, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.244094484, "Year":"1955" }, { "CSIROAdjustedSeaLevel":3.763779524, "LowerErrorBound":3.488188973, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.039370075, "Year":"1956" }, { "CSIROAdjustedSeaLevel":4.291338578, "LowerErrorBound":4.019685035, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.562992121, "Year":"1957" }, { "CSIROAdjustedSeaLevel":4.346456688, "LowerErrorBound":4.086614169, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.606299208, "Year":"1958" }, { "CSIROAdjustedSeaLevel":4.358267712, "LowerErrorBound":4.102362201, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.614173224, "Year":"1959" }, { "CSIROAdjustedSeaLevel":4.503937003, "LowerErrorBound":4.244094484, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.763779523, "Year":"1960" }, { "CSIROAdjustedSeaLevel":4.748031491, "LowerErrorBound":4.488188972, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.007874011, "Year":"1961" }, { "CSIROAdjustedSeaLevel":4.543307082, "LowerErrorBound":4.283464563, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.803149601, "Year":"1962" }, { "CSIROAdjustedSeaLevel":4.480314956, "LowerErrorBound":4.220472437, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.740157475, "Year":"1963" }, { "CSIROAdjustedSeaLevel":4.169291334, "LowerErrorBound":3.905511807, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.433070862, "Year":"1964" }, { "CSIROAdjustedSeaLevel":4.610236216, "LowerErrorBound":4.346456688, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.874015743, "Year":"1965" }, { "CSIROAdjustedSeaLevel":4.397637791, "LowerErrorBound":4.137795271, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.65748031, "Year":"1966" }, { "CSIROAdjustedSeaLevel":4.452755901, "LowerErrorBound":4.196850389, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.708661413, "Year":"1967" }, { "CSIROAdjustedSeaLevel":4.484251964, "LowerErrorBound":4.220472437, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.748031491, "Year":"1968" }, { "CSIROAdjustedSeaLevel":4.751968499, "LowerErrorBound":4.476377948, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.02755905, "Year":"1969" }, { "CSIROAdjustedSeaLevel":4.67716535, "LowerErrorBound":4.401574799, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":4.9527559, "Year":"1970" }, { "CSIROAdjustedSeaLevel":4.881889759, "LowerErrorBound":4.610236216, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.153543302, "Year":"1971" }, { "CSIROAdjustedSeaLevel":5.240157475, "LowerErrorBound":4.968503932, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.511811018, "Year":"1972" }, { "CSIROAdjustedSeaLevel":5.003937003, "LowerErrorBound":4.736220468, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.271653538, "Year":"1973" }, { "CSIROAdjustedSeaLevel":5.472440939, "LowerErrorBound":5.204724404, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.740157474, "Year":"1974" }, { "CSIROAdjustedSeaLevel":5.409448813, "LowerErrorBound":5.145669286, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.673228341, "Year":"1975" }, { "CSIROAdjustedSeaLevel":5.370078735, "LowerErrorBound":5.1023622, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.63779527, "Year":"1976" }, { "CSIROAdjustedSeaLevel":5.303149601, "LowerErrorBound":5.043307081, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.56299212, "Year":"1977" }, { "CSIROAdjustedSeaLevel":5.555118105, "LowerErrorBound":5.291338577, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.818897632, "Year":"1978" }, { "CSIROAdjustedSeaLevel":5.362204719, "LowerErrorBound":5.098425192, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.625984246, "Year":"1979" }, { "CSIROAdjustedSeaLevel":5.598425191, "LowerErrorBound":5.34251968, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.854330703, "Year":"1980" }, { "CSIROAdjustedSeaLevel":6.086614167, "LowerErrorBound":5.830708655, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.342519679, "Year":"1981" }, { "CSIROAdjustedSeaLevel":5.858267711, "LowerErrorBound":5.610236215, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.106299206, "Year":"1982" }, { "CSIROAdjustedSeaLevel":6.188976372, "LowerErrorBound":5.93307086, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.444881883, "Year":"1983" }, { "CSIROAdjustedSeaLevel":6.153543301, "LowerErrorBound":5.905511805, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.401574797, "Year":"1984" }, { "CSIROAdjustedSeaLevel":5.74803149, "LowerErrorBound":5.499999994, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":5.996062986, "Year":"1985" }, { "CSIROAdjustedSeaLevel":5.771653537, "LowerErrorBound":5.523622042, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.019685033, "Year":"1986" }, { "CSIROAdjustedSeaLevel":5.795275585, "LowerErrorBound":5.551181097, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.039370073, "Year":"1987" }, { "CSIROAdjustedSeaLevel":5.980314955, "LowerErrorBound":5.732283459, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.22834645, "Year":"1988" }, { "CSIROAdjustedSeaLevel":6.157480309, "LowerErrorBound":5.905511805, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.409448812, "Year":"1989" }, { "CSIROAdjustedSeaLevel":6.232283458, "LowerErrorBound":5.972440939, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.492125978, "Year":"1990" }, { "CSIROAdjustedSeaLevel":6.334645663, "LowerErrorBound":6.074803143, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.594488182, "Year":"1991" }, { "CSIROAdjustedSeaLevel":6.35826771, "LowerErrorBound":6.094488183, "NOAAAdjustedSeaLevel": "null", "UpperErrorBound":6.622047237, "Year":"1992" }, { "CSIROAdjustedSeaLevel":6.291338576, "LowerErrorBound":6.027559049, "NOAAAdjustedSeaLevel":6.297493046, "UpperErrorBound":6.555118104, "Year":"1993" }, { "CSIROAdjustedSeaLevel":6.499999993, "LowerErrorBound":6.236220466, "NOAAAdjustedSeaLevel":6.310933553, "UpperErrorBound":6.763779521, "Year":"1994" }, { "CSIROAdjustedSeaLevel":6.618110229, "LowerErrorBound":6.354330702, "NOAAAdjustedSeaLevel":6.452568661, "UpperErrorBound":6.881889757, "Year":"1995" }, { "CSIROAdjustedSeaLevel":6.787401568, "LowerErrorBound":6.523622041, "NOAAAdjustedSeaLevel":6.62763131, "UpperErrorBound":7.051181095, "Year":"1996" }, { "CSIROAdjustedSeaLevel":7.066929127, "LowerErrorBound":6.803149599, "NOAAAdjustedSeaLevel":6.733920367, "UpperErrorBound":7.330708654, "Year":"1997" }, { "CSIROAdjustedSeaLevel":6.665354324, "LowerErrorBound":6.393700781, "NOAAAdjustedSeaLevel":6.865806069, "UpperErrorBound":6.937007867, "Year":"1998" }, { "CSIROAdjustedSeaLevel":7.011811016, "LowerErrorBound":6.736220466, "NOAAAdjustedSeaLevel":6.848689771, "UpperErrorBound":7.287401567, "Year":"1999" }, { "CSIROAdjustedSeaLevel":7.062992119, "LowerErrorBound":6.791338576, "NOAAAdjustedSeaLevel":6.920582014, "UpperErrorBound":7.334645662, "Year":"2000" }, { "CSIROAdjustedSeaLevel":7.287401567, "LowerErrorBound":7.019685032, "NOAAAdjustedSeaLevel":7.087460011, "UpperErrorBound":7.555118103, "Year":"2001" }, { "CSIROAdjustedSeaLevel":7.381889756, "LowerErrorBound":7.110236213, "NOAAAdjustedSeaLevel":7.319697525, "UpperErrorBound":7.653543299, "Year":"2002" }, { "CSIROAdjustedSeaLevel":7.759842512, "LowerErrorBound":7.484251961, "NOAAAdjustedSeaLevel":7.488352718, "UpperErrorBound":8.035433063, "Year":"2003" }, { "CSIROAdjustedSeaLevel":7.740157472, "LowerErrorBound":7.464566922, "NOAAAdjustedSeaLevel":7.507932839, "UpperErrorBound":8.015748023, "Year":"2004" }, { "CSIROAdjustedSeaLevel":7.74409448, "LowerErrorBound":7.472440937, "NOAAAdjustedSeaLevel":7.644563144, "UpperErrorBound":8.015748023, "Year":"2005" }, { "CSIROAdjustedSeaLevel":7.917322827, "LowerErrorBound":7.645669284, "NOAAAdjustedSeaLevel":7.697420009, "UpperErrorBound":8.18897637, "Year":"2006" }, { "CSIROAdjustedSeaLevel":7.996062984, "LowerErrorBound":7.712598417, "NOAAAdjustedSeaLevel":7.70214715, "UpperErrorBound":8.279527551, "Year":"2007" }, { "CSIROAdjustedSeaLevel":8.350393692, "LowerErrorBound":8.078740149, "NOAAAdjustedSeaLevel":7.90736541, "UpperErrorBound":8.622047235, "Year":"2008" }, { "CSIROAdjustedSeaLevel":8.586614164, "LowerErrorBound":8.311023614, "NOAAAdjustedSeaLevel":8.04635409, "UpperErrorBound":8.862204715, "Year":"2009" }, { "CSIROAdjustedSeaLevel":8.901574794, "LowerErrorBound":8.618110227, "NOAAAdjustedSeaLevel":8.122972567, "UpperErrorBound":9.185039361, "Year":"2010" }, { "CSIROAdjustedSeaLevel":8.96456692, "LowerErrorBound":8.661417314, "NOAAAdjustedSeaLevel":8.053065004, "UpperErrorBound":9.267716526, "Year":"2011" }, { "CSIROAdjustedSeaLevel":9.326771644, "LowerErrorBound":8.992125975, "NOAAAdjustedSeaLevel":8.457057629, "UpperErrorBound":9.661417313, "Year":"2012" }, { "CSIROAdjustedSeaLevel":8.980314951, "LowerErrorBound":8.622047235, "NOAAAdjustedSeaLevel":8.546648227, "UpperErrorBound":9.338582668, "Year":"2013" }, { "CSIROAdjustedSeaLevel": "null", "LowerErrorBound": "null", "NOAAAdjustedSeaLevel":8.663700393, "UpperErrorBound": "null", "Year":"2014" } ]'></zg-data> <zg-caption> <h1>Global Average Absolute Sea Level Change (1880 - 2014)</h1> <p><em>From the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.</em> <br> <a href="https://datahub.io/core/sea-level-rise" target="_blank">View Source <i class="far fa-arrow-alt-circle-right"></i></a></p> </zg-caption> <zg-colgroup> <zg-column index="Year" header="Year"> <strong>[[index.Year]]</strong> </zg-column> <zg-column index="CSIROAdjustedSeaLevel" renderer="renderNull" header="CSIRO Adjusted Sea Level"> </zg-column> <zg-column index="LowerErrorBound" renderer="renderNull" header="Lower Error Bound"></zg-column> <zg-column index="NOAAAdjustedSeaLevel" renderer="renderNull" header="NOAA Adjusted Sea Level"></zg-column> <zg-column index="UpperErrorBound" renderer="renderNull" header="Upper Error Bound"></zg-column> </zg-colgroup> </zing-grid> </body> </html>
.zg-body { padding-top: 50px; font-family: 'Rubik', sans-serif; background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/water-levels%2Fweather-cooler.png?alt=media&token=5e6df3b4-1089-47c5-9fea-f191206bbc73'); } zing-grid { max-width: 750px; margin: 0 auto; font-family: 'Rubik', sans-serif; border: 0px solid #03375e; background: #004a6b; color: #03375e; --theme-color-primary: #ffffff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; --zg-cell-background_sorted: #e3e6e8; --zg-head-cell-background_sorted: #045282; --zg-head-cell-color_sorted: #ffffff; --zg-option-list-color: #03375e; box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7); -webkit-box-shadow: 0 20px 50px rgba(36, 107, 138, 0.7); -moz-box-shadow: 0 20px 50px rgba(36, 107, 138 , 0.7); } zg-icon { max-width: 15px; } zg-caption { background: #004a6b; border-bottom: 1px solid #004a6b; padding: 30px 20px; border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; text-align: center; } zg-caption h1 { color: #76d9f4; font-size: 25px; margin: 0; font-weight: 300; } zg-caption p { font-size: 11px; font-family: 'Roboto Mono', monospace; color: #F8FAFC; line-height: 1.9; margin-bottom: -5px; } zg-caption a { color: #028ecc; text-decoration: none; padding: 2px; font-size: 12px; margin-top: -15px; } zg-caption a:hover { color: #ffffff; text-decoration: underline; } zg-head-cell { font-size: 11px; background: #028ecc; color: #F8FAFC; /* margin-bottom: -2px; */ } zg-body { font-size: 12px; font-family: 'Roboto Mono', monospace; background: #F8FAFC; color: #04769e; border: 0px; } zg-row, zg-cell { padding: 0 15px; height: 38px; } zg-row { border-bottom: 1px solid #dcdfe0; } .zg-body .null { color: #a1b2b5; font-style: italic; } zg-footer { font-size: 12px; padding: 0 15px 0 15px; display: flex; justify-content: space-between; color: #ffffff; background: #004a6b; } zg-pager { color: #ffffff; } zg-watermark { border-top: 1px solid #004a6b; border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; }
function renderNull(value) { if (value == "null") { return `<i style="font-size: 12px; color: #a1b2b5;" class="far fa-times-circle"></i> <span class="null"> ${value}</span>`; } else if (value == "0") { return `<span style="color: #b3c1c4; font-style: italic;">${value}</span>`; } else if (value > "0") { return `<span style="color: #19b29f; font-weight: bold;">${value}</span>`; } else { return `<span style="color: #ea5374; font-weight: bold; margin-left: -8px;">${value}</span>`; } } // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content });
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!