• 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.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 709px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <zing-grid caption="Astrology Signs" gridlines="vertical" viewport-stop data='{
    21.         "entry1": {
    22.           "sign": "Aquarius",
    23.           "date": "January 20 - February 18",
    24.           "element": "Air"
    25.         }, 
    26.         "entry2": {
    27.           "sign": "Pisces",
    28.           "date": "February 19 - March 20",
    29.           "element": "Water"
    30.         }, 
    31.         "entry3": {
    32.           "sign": "Aries",
    33.           "date": "March 19 - May 20",
    34.           "element": "Fire"
    35.         }, 
    36.         "entry4": {
    37.           "sign": "Taurus",
    38.           "date": "April 20 - May 18",
    39.           "element": "Earth"
    40.         }, 
    41.         "entry5": {
    42.           "sign": "Gemini",
    43.           "date": "May 21 - June 20",
    44.           "element": "Air"
    45.         }, 
    46.         "entry6": {
    47.           "sign": "Cancer",
    48.           "date": "June 21 - Jully 22",
    49.           "element": "Water"
    50.         }, 
    51.         "entry7": {
    52.           "sign": "Leo",
    53.           "date": "July 23 - Auguest 22",
    54.           "element": "Fire"
    55.         }, 
    56.         "entry8": {
    57.           "sign": "Virgo",
    58.           "date": "Auguest 23 - September 22",
    59.           "element": "Earch"
    60.         }, 
    61.         "entry9": {
    62.           "sign": "Libra",
    63.           "date": "September 23 - October 22",
    64.           "element": "Air"
    65.         }, 
    66.         "entry10": {
    67.           "sign": "Scorpio",
    68.           "date": "October 23 - November 21",
    69.           "element": "Water"
    70.         }, 
    71.         "entry11": {
    72.           "sign": "Sagittarius",
    73.           "date": "November 22 - December 21",
    74.           "element": "Fire"
    75.         }, 
    76.         "entry12": {
    77.           "sign": "Capricorm",
    78.           "date": "January 22 - January 19",
    79.           "element": "Earth"
    80.         }
    81.       }' </zing-grid>
    82.     <script>
    83.       ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    84.     </script>
    85. </body>
    86.  
    87. </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="Astrology Signs" gridlines="vertical" viewport-stop data='{
    12.         "entry1": {
    13.           "sign": "Aquarius",
    14.           "date": "January 20 - February 18",
    15.           "element": "Air"
    16.         }, 
    17.         "entry2": {
    18.           "sign": "Pisces",
    19.           "date": "February 19 - March 20",
    20.           "element": "Water"
    21.         }, 
    22.         "entry3": {
    23.           "sign": "Aries",
    24.           "date": "March 19 - May 20",
    25.           "element": "Fire"
    26.         }, 
    27.         "entry4": {
    28.           "sign": "Taurus",
    29.           "date": "April 20 - May 18",
    30.           "element": "Earth"
    31.         }, 
    32.         "entry5": {
    33.           "sign": "Gemini",
    34.           "date": "May 21 - June 20",
    35.           "element": "Air"
    36.         }, 
    37.         "entry6": {
    38.           "sign": "Cancer",
    39.           "date": "June 21 - Jully 22",
    40.           "element": "Water"
    41.         }, 
    42.         "entry7": {
    43.           "sign": "Leo",
    44.           "date": "July 23 - Auguest 22",
    45.           "element": "Fire"
    46.         }, 
    47.         "entry8": {
    48.           "sign": "Virgo",
    49.           "date": "Auguest 23 - September 22",
    50.           "element": "Earch"
    51.         }, 
    52.         "entry9": {
    53.           "sign": "Libra",
    54.           "date": "September 23 - October 22",
    55.           "element": "Air"
    56.         }, 
    57.         "entry10": {
    58.           "sign": "Scorpio",
    59.           "date": "October 23 - November 21",
    60.           "element": "Water"
    61.         }, 
    62.         "entry11": {
    63.           "sign": "Sagittarius",
    64.           "date": "November 22 - December 21",
    65.           "element": "Fire"
    66.         }, 
    67.         "entry12": {
    68.           "sign": "Capricorm",
    69.           "date": "January 22 - January 19",
    70.           "element": "Earth"
    71.         }
    72.       }' </zing-grid>
    73. </body>
    74.  
    75. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1.