html,

body {

  width: 100%;

  margin:0;

  padding: 0;

}

tr { 

  overflow: hidden;

  height: 14px;

  white-space: nowrap;

}

td {

  text-align: center; 

  vertical-align: middle;

}

.chart {

  height: 20px;

  width: 80px;

}

.main-heading {

  font-family: sans-serif;

  font-size: 14px;

}

.col-headings {

  font-family: sans-serif;

  font-size: 13px;

  color: #7c868e;

  font-weight: 300;

  text-align: left;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/21ddfa122938e676bf9e7911e1417d9a/raw/d28d7a22b968bb39d755285d28ce949b31276628/sparklineChartData.json',

    function (data) {

      // go through the data and add each season's info and charts to the table

      Object.entries(data).forEach(([key, value]) => createSeason(key, data)); 

    }

  );

});

​

function createSeason(season, data){

  // get a table link

  var tbodyRef = document.getElementById('tb-seasons').getElementsByTagName('tbody')[0];

  // insert a row at the end of the table

  var newRow = tbodyRef.insertRow();

  newRow.setAttribute('height', '30px');

  // append a season name text node to a cell

  newRow.insertCell().appendChild(document.createTextNode(season));

  // append a season rating cell

  newRow.insertCell().appendChild(document.createTextNode(data[season].avg));

  // create a line sparkline chart showing ratings

  var lineDiv = createSparkline(data[season], 'episodeRatings', 'line', '#040102');

  // append it

  newRow.insertCell().appendChild(lineDiv); 

  // create a column sparkline chart showing percentages

  var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column', '#cf0011');

  // append it

  newRow.insertCell().appendChild(columnDiv); 

}

​

// create a sparkline chart of a given type, color, and from a given field

function createSparkline(data, field, type, color){

  var sparkline = anychart.sparkline(data[field]);

  sparkline.seriesType(type);

  sparkline.fill(color).stroke(color);

  // create a div for the sparklines and assign a css class name

  var chartDiv = document.createElement('div');

  chartDiv.setAttribute('class', 'chart');  

  sparkline.container(chartDiv);

  sparkline.draw();

  return chartDiv;

}