Demos Back to Docs

SoundCloud Chart

85 of 124
This demo shows that you can easily combine features like media embeds and virtual scrolling within one grid.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: The Most Played Tracks On SoundCloud This Week</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <link rel="stylesheet" href="https://use.typekit.net/tai8lmq.css">
  <meta http-equiv="Content-Security-Policy" content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

  <style>
    .zg-body {
      padding: 10px;
      background: #717171;
      font-family: "Interstate", sans-serif;
    }

    zing-grid {
      max-width: 900px;
      margin: 0 auto;
      font-family: "Interstate", sans-serif;
      border: 10px solid #333;
      color: #333333;
      font-size: 13px;
      opacity: 1;
      --zg-icon-width: 15px;
      --theme-color-primary: #f50;
      --zg-row-body-background_hover: #ccc;
      --zg-cell-background_sorted: #eee;
      --zg-head-cell-background_sorted: #eee;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zg-caption {
      background: #333333;
      color: #ffffff;
      font-weight: bold;
      padding: 5px 10px;
      margin: 0;
      border-bottom: 1px solid #eeeeee;
      font-size: 25px;
    }

    zg-head {
      padding: 0 10px 0 10px;
      border-bottom: 10px solid #333;
      background: transparent;
    }

    zg-head,
    zg-head-cell {
      font-size: 10px;
      padding: 0 0 2px 0;
      color: #f50;
      text-transform: uppercase;
    }

    zg-head-cell:first-child {
      padding-left: 10px;
    }

    zg-body {
      padding: 0;
    }

    zg-body zg-row {
      border-bottom: 10px solid #333;
      background: #fbfbfb;
    }

    [viewport="tablet-portrait"] zg-cell {
      padding: 0;
    }

    zg-cell:nth-child(1) {
      font-weight: bold;
      color: #f50;
      width: 5%;
      padding-left: 15px;
    }

    zg-cell:nth-child(2) {
      width: 30%;
      padding-right: 13px;
    }

    zg-cell:nth-child(3) {
      padding-right: 10px;
    }


    zg-cell:nth-child(3),
    zg-cell:nth-child(4),
    zg-cell:nth-child(5),
    zg-cell:nth-child(6) {
      width: 14%;
    }

    .zg-body iframe {
      border: none;
      width: 90%;
    }

    zg-param {
      margin-top: -25px;
    }

    zing-grid[loading] {
      height: 624px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid src="https://zinggrid-examples.firebaseio.com/soundcloud-weekly-chart" caption="The Most Played Tracks On SoundCloud This Week" height="450" sort class="loading">
    <zg-param name="loadByScroll" value="true"></zg-param>
    <zg-colgroup>
      <zg-column index="rank" type="number" header="#"></zg-column>
      <zg-column index="url" type="iframe" header="Listen"></zg-column>
      <zg-column index="track"></zg-column>
      <zg-column index="artist"></zg-column>
      <zg-column index="plays.thisWeek" type="number" header="Plays (This Week)"></zg-column>
      <zg-column index="plays.allTime" type="number" header="Plays (All Time)"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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
    });

    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: The Most Played Tracks On SoundCloud This Week</title>
    <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    <link rel="stylesheet" href="https://use.typekit.net/tai8lmq.css">
<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

  </head>
  <body class="zg-body">
    <zing-grid 
      src="https://zinggrid-examples.firebaseio.com/soundcloud-weekly-chart" 
      caption="The Most Played Tracks On SoundCloud This Week"
      height="450"
      sort
      class="loading"
    >
      <zg-param name="loadByScroll" value="true"></zg-param>
      <zg-colgroup>
        <zg-column index="rank" type="number" header="#"></zg-column>
        <zg-column index="url" type="iframe" header="Listen"></zg-column>
		    <zg-column index="track"></zg-column>
        <zg-column index="artist"></zg-column>
        <zg-column index="plays.thisWeek" type="number" header="Plays (This Week)"></zg-column>
        <zg-column index="plays.allTime" type="number" header="Plays (All Time)"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>
.zg-body {
  padding: 10px;
	background: #717171;
	font-family: "Interstate", sans-serif;
}

zing-grid {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Interstate", sans-serif;
  border: 10px solid #333;
  color: #333333;
  font-size: 13px;
  opacity: 1;
  --zg-icon-width: 15px;
  --theme-color-primary: #f50;
  --zg-row-body-background_hover: #ccc;
  --zg-cell-background_sorted: #eee;
  --zg-head-cell-background_sorted: #eee;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }

zg-caption {
  background: #333333;
  color: #ffffff;
  font-weight: bold;
  padding: 5px 10px;
  margin: 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 25px;
}

zg-head {
  padding: 0 10px 0 10px;
  border-bottom: 10px solid #333;
  background: transparent;
}

zg-head, zg-head-cell {
  font-size: 10px;
  padding: 0 0 2px 0;
  color: #f50;
  text-transform: uppercase;
}

zg-head-cell:first-child {
  padding-left: 10px;
}

zg-body {
  padding: 0;
}

zg-body zg-row {
  border-bottom: 10px solid #333;
  background: #fbfbfb;
}

[viewport="tablet-portrait"] zg-cell {
  padding: 0;
}

zg-cell:nth-child(1) {
  font-weight: bold;
  color: #f50;
  width: 5%;
  padding-left: 15px;
}

zg-cell:nth-child(2) {
  width: 30%;
  padding-right: 13px;
}

zg-cell:nth-child(3) {
  padding-right: 10px;
}


zg-cell:nth-child(3),
zg-cell:nth-child(4),
zg-cell:nth-child(5),
zg-cell:nth-child(6) {
  width: 14%;
}

.zg-body iframe {
  border: none;
  width: 90%;
}

zg-param {
  margin-top: -25px;
}
// 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
});

// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

Related Docs

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!

Edit in Studio

Related Docs

Demo Gallery