• 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.     zing-grid[loading] {
    10.       height: 1210px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <zing-grid caption="Top 10 Largest Cities In California" pager page-size=5 layout="card">
    17.     <zg-data data='[
    18.         {
    19.           "rank": 1,
    20.           "city": "Los Angeles",
    21.           "population": 3971883,
    22.           "incorporated": "April 4, 1850",
    23.           "region": "Southern California",
    24.           "county": "Los Angeles",
    25.           "website": "https://www.lacity.org/",
    26.           "photo": "https://www.zingchart.com/images/cities/los-angeles.jpg",
    27.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423286.18231493316!2d-118.69260455059867!3d34.020179703370246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA!5e0!3m2!1sen!2sus!4v1476300092259"
    28.         },
    29.         {
    30.           "rank": 2,
    31.           "city": "San Diego",
    32.           "population": 1394928,
    33.           "incorporated": "March 27, 1850",
    34.           "region": "Southern California",
    35.           "county": "San Diego",
    36.           "website": "https://www.sandiego.gov/",
    37.           "photo": "https://www.zingchart.com/images/cities/san-diego.jpg",
    38.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d429157.55412806093!2d-117.37603583598363!3d32.82423890236055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d9530fad921e4b%3A0xd3a21fdfd15df79!2sSan+Diego%2C+CA!5e0!3m2!1sen!2sus!4v1476300829743"
    39.         },
    40.         {
    41.           "rank": 3,
    42.           "city": "San Jose",
    43.           "population": 1026908,
    44.           "incorporated": "March 27, 1850",
    45.           "region": "Northern California",
    46.           "county": "Santa Clara",
    47.           "website": "http://www.sanjoseca.gov/",
    48.           "photo": "https://www.zingchart.com/images/cities/san-jose.jpg",
    49.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203131.14251646577!2d-121.95783812984642!3d37.29693259793059!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fcae48af93ff5%3A0xb99d8c0aca9f717b!2sSan+Jose%2C+CA!5e0!3m2!1sen!2sus!4v1476300871413"
    50.         },
    51.         {
    52.           "rank": 4,
    53.           "city": "San Francisco",
    54.           "population": 864816,
    55.           "incorporated": "April 15, 1850",
    56.           "region": "Northern California",
    57.           "county": "San Francisco",
    58.           "website": "http://sfgov.org/",
    59.           "photo": "https://www.zingchart.com/images/cities/san-francisco.jpg",
    60.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100940.17087596802!2d-122.50781152277814!3d37.75767917399387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan+Francisco%2C+CA!5e0!3m2!1sen!2sus!4v1476300899404"
    61.         },
    62.         {
    63.           "rank": 5,
    64.           "city": "Fresno",
    65.           "population": 520052,
    66.           "incorporated": "October 12, 1885",
    67.           "region": "Southern California",
    68.           "county": "Fresno",
    69.           "website": "http://www.fresno.gov/default.htm",
    70.           "photo": "https://www.zingchart.com/images/cities/fresno.jpg",
    71.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d204504.28675014497!2d-119.93498868848437!3d36.78545091917377!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80945de1549e4e9d%3A0x7b12406449a3b811!2sFresno%2C+CA!5e0!3m2!1sen!2sus!4v1476300932365"
    72.         },
    73.         {
    74.           "rank": 6,
    75.           "city": "Sacramento",
    76.           "population": 490712,
    77.           "incorporated": "February 27, 1850",
    78.           "region": "Northern California",
    79.           "county": "Sacramento",
    80.           "website": "http://www.cityofsacramento.org/",
    81.           "photo": "https://www.zingchart.com/images/cities/sacramento.jpg",
    82.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199667.1012576114!2d-121.58299510371795!3d38.56145708122715!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C+CA!5e0!3m2!1sen!2sus!4v1477333663169"
    83.         },
    84.         {
    85.           "rank": 7,
    86.           "city": "Long Beach",
    87.           "population": 474140,
    88.           "incorporated": "December 13, 1897",
    89.           "region": "Southern California",
    90.           "county": "Los Angeles",
    91.           "website": "http://www.longbeach.gov/",
    92.           "photo": "https://www.zingchart.com/images/cities/long-beach.jpg",
    93.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106095.3348111691!2d-118.22614917436474!3d33.799944410538565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong+Beach%2C+CA!5e0!3m2!1sen!2sus!4v1477333691186"
    94.         },
    95.         {
    96.           "rank": 8,
    97.           "city": "Oakland",
    98.           "population": 419267,
    99.           "incorporated": "May 4, 1852",
    100.           "region": "Northern California",
    101.           "county": "Alameda",
    102.           "website": "http://www2.oaklandnet.com/",
    103.           "photo": "https://www.zingchart.com/images/cities/oakland.jpg",
    104.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100893.404211494!2d-122.29883373111254!3d37.79194076948306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80857d8b28aaed03%3A0x71b415d535759367!2sOakland%2C+CA!5e0!3m2!1sen!2sus!4v1477333716522"
    105.         },
    106.         {
    107.           "rank": 9,
    108.           "city": "Bakersfield",
    109.           "population": 373640,
    110.           "incorporated": "January 11, 1898",
    111.           "region": "Southern California",
    112.           "county": "Kern",
    113.           "website": "http://www.bakersfieldcity.us/",
    114.           "photo": "https://www.zingchart.com/images/cities/bakersfield.jpg",
    115.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d208345.5769151742!2d-119.1587698761005!3d35.32089626815365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80ea6bc8b994cb0d%3A0x59360c0998fe74c8!2sBakersfield%2C+CA!5e0!3m2!1sen!2sus!4v1477333739738"
    116.         },
    117.         {
    118.           "rank": 10,
    119.           "city": "Anaheim",
    120.           "population": 350742,
    121.           "incorporated": "March 18, 1876",
    122.           "region": "Southern California",
    123.           "county": "Orange",
    124.           "website": "http://www.anaheim.net/",
    125.           "photo": "https://www.zingchart.com/images/cities/anaheim.jpg",
    126.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106051.59686542799!2d-117.91613917357996!3d33.83521180051264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dcd6f98055e867%3A0x1ab89ab9a2bb160!2sAnaheim%2C+CA!5e0!3m2!1sen!2sus!4v1477333762987"
    127.         }
    128.       ]'></zg-data>
    129.     <zg-colgroup>
    130.       <zg-column index="rank"></zg-column>
    131.       <zg-column index="photo" header="Image" type="image"></zg-column>
    132.       <zg-column index="county"></zg-column>
    133.       <zg-column index="region"></zg-column>
    134.       <zg-column index="incorporated"></zg-column>
    135.       <zg-column index="website" type="url"></zg-column>
    136.       <zg-column index="map" type="iframe"></zg-column>
    137.     </zg-colgroup>
    138.   </zing-grid>
    139.   <script>
    140.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    141.   </script>
    142. </body>
    143.  
    144. </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="Top 10 Largest Cities In California" pager page-size=5 layout="card">
    12.     <zg-data data='[
    13.         {
    14.           "rank": 1,
    15.           "city": "Los Angeles",
    16.           "population": 3971883,
    17.           "incorporated": "April 4, 1850",
    18.           "region": "Southern California",
    19.           "county": "Los Angeles",
    20.           "website": "https://www.lacity.org/",
    21.           "photo": "https://www.zingchart.com/images/cities/los-angeles.jpg",
    22.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423286.18231493316!2d-118.69260455059867!3d34.020179703370246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA!5e0!3m2!1sen!2sus!4v1476300092259"
    23.         },
    24.         {
    25.           "rank": 2,
    26.           "city": "San Diego",
    27.           "population": 1394928,
    28.           "incorporated": "March 27, 1850",
    29.           "region": "Southern California",
    30.           "county": "San Diego",
    31.           "website": "https://www.sandiego.gov/",
    32.           "photo": "https://www.zingchart.com/images/cities/san-diego.jpg",
    33.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d429157.55412806093!2d-117.37603583598363!3d32.82423890236055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d9530fad921e4b%3A0xd3a21fdfd15df79!2sSan+Diego%2C+CA!5e0!3m2!1sen!2sus!4v1476300829743"
    34.         },
    35.         {
    36.           "rank": 3,
    37.           "city": "San Jose",
    38.           "population": 1026908,
    39.           "incorporated": "March 27, 1850",
    40.           "region": "Northern California",
    41.           "county": "Santa Clara",
    42.           "website": "http://www.sanjoseca.gov/",
    43.           "photo": "https://www.zingchart.com/images/cities/san-jose.jpg",
    44.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203131.14251646577!2d-121.95783812984642!3d37.29693259793059!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fcae48af93ff5%3A0xb99d8c0aca9f717b!2sSan+Jose%2C+CA!5e0!3m2!1sen!2sus!4v1476300871413"
    45.         },
    46.         {
    47.           "rank": 4,
    48.           "city": "San Francisco",
    49.           "population": 864816,
    50.           "incorporated": "April 15, 1850",
    51.           "region": "Northern California",
    52.           "county": "San Francisco",
    53.           "website": "http://sfgov.org/",
    54.           "photo": "https://www.zingchart.com/images/cities/san-francisco.jpg",
    55.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100940.17087596802!2d-122.50781152277814!3d37.75767917399387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan+Francisco%2C+CA!5e0!3m2!1sen!2sus!4v1476300899404"
    56.         },
    57.         {
    58.           "rank": 5,
    59.           "city": "Fresno",
    60.           "population": 520052,
    61.           "incorporated": "October 12, 1885",
    62.           "region": "Southern California",
    63.           "county": "Fresno",
    64.           "website": "http://www.fresno.gov/default.htm",
    65.           "photo": "https://www.zingchart.com/images/cities/fresno.jpg",
    66.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d204504.28675014497!2d-119.93498868848437!3d36.78545091917377!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80945de1549e4e9d%3A0x7b12406449a3b811!2sFresno%2C+CA!5e0!3m2!1sen!2sus!4v1476300932365"
    67.         },
    68.         {
    69.           "rank": 6,
    70.           "city": "Sacramento",
    71.           "population": 490712,
    72.           "incorporated": "February 27, 1850",
    73.           "region": "Northern California",
    74.           "county": "Sacramento",
    75.           "website": "http://www.cityofsacramento.org/",
    76.           "photo": "https://www.zingchart.com/images/cities/sacramento.jpg",
    77.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199667.1012576114!2d-121.58299510371795!3d38.56145708122715!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C+CA!5e0!3m2!1sen!2sus!4v1477333663169"
    78.         },
    79.         {
    80.           "rank": 7,
    81.           "city": "Long Beach",
    82.           "population": 474140,
    83.           "incorporated": "December 13, 1897",
    84.           "region": "Southern California",
    85.           "county": "Los Angeles",
    86.           "website": "http://www.longbeach.gov/",
    87.           "photo": "https://www.zingchart.com/images/cities/long-beach.jpg",
    88.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106095.3348111691!2d-118.22614917436474!3d33.799944410538565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong+Beach%2C+CA!5e0!3m2!1sen!2sus!4v1477333691186"
    89.         },
    90.         {
    91.           "rank": 8,
    92.           "city": "Oakland",
    93.           "population": 419267,
    94.           "incorporated": "May 4, 1852",
    95.           "region": "Northern California",
    96.           "county": "Alameda",
    97.           "website": "http://www2.oaklandnet.com/",
    98.           "photo": "https://www.zingchart.com/images/cities/oakland.jpg",
    99.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100893.404211494!2d-122.29883373111254!3d37.79194076948306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80857d8b28aaed03%3A0x71b415d535759367!2sOakland%2C+CA!5e0!3m2!1sen!2sus!4v1477333716522"
    100.         },
    101.         {
    102.           "rank": 9,
    103.           "city": "Bakersfield",
    104.           "population": 373640,
    105.           "incorporated": "January 11, 1898",
    106.           "region": "Southern California",
    107.           "county": "Kern",
    108.           "website": "http://www.bakersfieldcity.us/",
    109.           "photo": "https://www.zingchart.com/images/cities/bakersfield.jpg",
    110.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d208345.5769151742!2d-119.1587698761005!3d35.32089626815365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80ea6bc8b994cb0d%3A0x59360c0998fe74c8!2sBakersfield%2C+CA!5e0!3m2!1sen!2sus!4v1477333739738"
    111.         },
    112.         {
    113.           "rank": 10,
    114.           "city": "Anaheim",
    115.           "population": 350742,
    116.           "incorporated": "March 18, 1876",
    117.           "region": "Southern California",
    118.           "county": "Orange",
    119.           "website": "http://www.anaheim.net/",
    120.           "photo": "https://www.zingchart.com/images/cities/anaheim.jpg",
    121.           "map": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106051.59686542799!2d-117.91613917357996!3d33.83521180051264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dcd6f98055e867%3A0x1ab89ab9a2bb160!2sAnaheim%2C+CA!5e0!3m2!1sen!2sus!4v1477333762987"
    122.         }
    123.       ]'></zg-data>
    124.     <zg-colgroup>
    125.       <zg-column index="rank"></zg-column>
    126.       <zg-column index="photo" header="Image" type="image"></zg-column>
    127.       <zg-column index="county"></zg-column>
    128.       <zg-column index="region"></zg-column>
    129.       <zg-column index="incorporated"></zg-column>
    130.       <zg-column index="website" type="url"></zg-column>
    131.       <zg-column index="map" type="iframe"></zg-column>
    132.     </zg-colgroup>
    133.   </zing-grid>
    134. </body>
    135.  
    136. </html>
    1.  
    1.