Demos Back to Demos

SoundCloud Chart

14 of 25

Easily combine features like media embeds and virtual scrolling within one grid.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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" defer></script>
    <link rel="stylesheet" href="https://use.typekit.net/tai8lmq.css">
  </head>
  <body>
    <zing-grid 
      src="https://zinggrid-examples.firebaseio.com/soundcloud-weekly-chart" 
      caption="The Most Played Tracks On SoundCloud This Week"
      height="450"
      layout="row"
      layout-controls="disabled"
      sort
    >
      <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>

CSS

body{
  padding: 10px;
	background: #717171w;
	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;
  --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;
}

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[layout="row"] {
	margin-top: ;
}

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;
}

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%;
}

iframe {
  border: none;
  width: 90%;
}

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

JS

// window.onload 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 the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio