<!DOCTYPE html>
<html>
  <head>
    <script src='https://unpkg.com/@ag-grid-enterprise/all-modules@22.1.0/dist/ag-grid-enterprise.min.js'></script>
     
    <link
      rel="stylesheet"
      href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css"
    />

    <style>
      body,
      #myGrid,
      #cotnainer,
      #btn {
        margin: auto;
      }

      .btn {
        width: 200px;
        margin: 50px 0 20px 80px;
        background-color: #4caf50;
        box-shadow: 3px 3px 10px #888888;
        border: none;
        color: white;
        padding: 12px 29px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        border-radius: 15px;
      }

      #btn-grid {
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <button class="btn" id="btn-chart" onclick="createColumnChart()">
      Create a column group chart
    </button>

    <button id="btn-grid" class="btn" onclick="showGrid()">Show grid</button>

    <div
      id="myGrid"
      style="height: 70vh;width:90vw;"
      class="ag-theme-balham"
    ></div>

    <script src="main.js"></script>
  </body>
</html>
[{
        "season": 1,
        "episode": 1,
        "title": "Winter Is Coming",
        "rating": 9
    },
    {
        "season": 1,
        "episode": 2,
        "title": "The Kingsroad",
        "rating": 8.8
    },
    {
        "season": 1,
        "episode": 3,
        "title": "Lord Snow",
        "rating": 8.7
    },
    {
        "season": 1,
        "episode": 4,
        "title": "Cripples, Bastards, and Broken Things",
        "rating": 8.8
    },
    {
        "season": 1,
        "episode": 5,
        "title": "The Wolf and the Lion",
        "rating": 9.1
    },
    {
        "season": 1,
        "episode": 6,
        "title": "A Golden Crown",
        "rating": 9.2
    },
    {
        "season": 1,
        "episode": 7,
        "title": "You Win or You Die",
        "rating": 9.2
    },
    {
        "season": 1,
        "episode": 8,
        "title": "The Pointy End",
        "rating": 9
    },
    {
        "season": 1,
        "episode": 9,
        "title": "Baelor",
        "rating": 9.6
    },
    {
        "season": 1,
        "episode": 10,
        "title": "Fire and Blood",
        "rating": 9.5
    },
    {
        "season": 2,
        "episode": 1,
        "title": "The North Remembers",
        "rating": 8.8
    },
    {
        "season": 2,
        "episode": 2,
        "title": "The Night Lands",
        "rating": 8.5
    },
    {
        "season": 2,
        "episode": 3,
        "title": "What Is Dead May Never Die",
        "rating": 8.8
    },
    {
        "season": 2,
        "episode": 4,
        "title": "Garden of Bones",
        "rating": 8.8
    },
    {
        "season": 2,
        "episode": 5,
        "title": "The Ghost of Harrenhal",
        "rating": 8.8
    },
    {
        "season": 2,
        "episode": 6,
        "title": "The Old Gods and the New",
        "rating": 9.1
    },
    {
        "season": 2,
        "episode": 7,
        "title": "A Man Without Honor",
        "rating": 8.9
    },
    {
        "season": 2,
        "episode": 8,
        "title": "The Prince of Winterfell",
        "rating": 8.8
    },
    {
        "season": 2,
        "episode": 9,
        "title": "Blackwater",
        "rating": 9.7
    },
    {
        "season": 2,
        "episode": 10,
        "title": "Valar Morghulis",
        "rating": 9.4
    },
    {
        "season": 3,
        "episode": 1,
        "title": "Valar Dohaeris",
        "rating": 8.8
    },
    {
        "season": 3,
        "episode": 2,
        "title": "Dark Wings, Dark Words",
        "rating": 8.6
    },
    {
        "season": 3,
        "episode": 3,
        "title": "Walk of Punishment",
        "rating": 8.9
    },
    {
        "season": 3,
        "episode": 4,
        "title": "And Now His Watch Is Ended",
        "rating": 9.6
    },
    {
        "season": 3,
        "episode": 5,
        "title": "Kissed by Fire",
        "rating": 9
    },
    {
        "season": 3,
        "episode": 6,
        "title": "The Climb",
        "rating": 8.8
    },
    {
        "season": 3,
        "episode": 7,
        "title": "The Bear and the Maiden Fair",
        "rating": 8.7
    },
    {
        "season": 3,
        "episode": 8,
        "title": "Second Sons",
        "rating": 9
    },
    {
        "season": 3,
        "episode": 9,
        "title": "The Rains of Castamere",
        "rating": 9.9
    },
    {
        "season": 3,
        "episode": 10,
        "title": "Mhysa",
        "rating": 9.1
    },
    {
        "season": 4,
        "episode": 1,
        "title": "Two Swords",
        "rating": 9.1
    },
    {
        "season": 4,
        "episode": 2,
        "title": "The Lion and the Rose",
        "rating": 9.7
    },
    {
        "season": 4,
        "episode": 3,
        "title": "Breaker of Chains",
        "rating": 8.9
    },
    {
        "season": 4,
        "episode": 4,
        "title": "Oathkeeper",
        "rating": 8.8
    },
    {
        "season": 4,
        "episode": 5,
        "title": "First of His Name",
        "rating": 8.7
    },
    {
        "season": 4,
        "episode": 6,
        "title": "The Laws of Gods and Men",
        "rating": 9.7
    },
    {
        "season": 4,
        "episode": 7,
        "title": "Mockingbird",
        "rating": 9.1
    },
    {
        "season": 4,
        "episode": 8,
        "title": "The Mountain and the Viper",
        "rating": 9.7
    },
    {
        "season": 4,
        "episode": 9,
        "title": "The Watchers on the Wall",
        "rating": 9.6
    },
    {
        "season": 4,
        "episode": 10,
        "title": "The Children",
        "rating": 9.7
    },
    {
        "season": 5,
        "episode": 1,
        "title": "The Wars to Come",
        "rating": 8.5
    },
    {
        "season": 5,
        "episode": 2,
        "title": "The House of Black and White",
        "rating": 8.5
    },
    {
        "season": 5,
        "episode": 3,
        "title": "High Sparrow",
        "rating": 8.5
    },
    {
        "season": 5,
        "episode": 4,
        "title": "Sons of the Harpy",
        "rating": 8.7
    },
    {
        "season": 5,
        "episode": 5,
        "title": "Kill the Boy",
        "rating": 8.6
    },
    {
        "season": 5,
        "episode": 6,
        "title": "Unbowed, Unbent, Unbroken",
        "rating": 8
    },
    {
        "season": 5,
        "episode": 7,
        "title": "The Gift",
        "rating": 9
    },
    {
        "season": 5,
        "episode": 8,
        "title": "Hardhome",
        "rating": 9.9
    },
    {
        "season": 5,
        "episode": 9,
        "title": "The Dance of Dragons",
        "rating": 9.5
    },
    {
        "season": 5,
        "episode": 10,
        "title": "Mother's Mercy",
        "rating": 9.1
    },
    {
        "season": 6,
        "episode": 1,
        "title": "The Red Woman",
        "rating": 8.5
    },
    {
        "season": 6,
        "episode": 2,
        "title": "Home",
        "rating": 9.4
    },
    {
        "season": 6,
        "episode": 3,
        "title": "Oathbreaker",
        "rating": 8.7
    },
    {
        "season": 6,
        "episode": 4,
        "title": "Book of the Stranger",
        "rating": 9.1
    },
    {
        "season": 6,
        "episode": 5,
        "title": "The Door",
        "rating": 9.7
    },
    {
        "season": 6,
        "episode": 6,
        "title": "Blood of My Blood",
        "rating": 8.4
    },
    {
        "season": 6,
        "episode": 7,
        "title": "The Broken Man",
        "rating": 8.6
    },
    {
        "season": 6,
        "episode": 8,
        "title": "No One",
        "rating": 8.4
    },
    {
        "season": 6,
        "episode": 9,
        "title": "Battle of the Bastards",
        "rating": 9.9
    },
    {
        "season": 6,
        "episode": 10,
        "title": "The Winds of Winter",
        "rating": 9.9
    },
    {
        "season": 7,
        "episode": 1,
        "title": "Dragonstone",
        "rating": 8.6
    },
    {
        "season": 7,
        "episode": 2,
        "title": "Stormborn",
        "rating": 8.9
    },
    {
        "season": 7,
        "episode": 3,
        "title": "The Queen's Justice",
        "rating": 9.2
    },
    {
        "season": 7,
        "episode": 4,
        "title": "The Spoils of War",
        "rating": 9.8
    },
    {
        "season": 7,
        "episode": 5,
        "title": "Eastwatch",
        "rating": 8.8
    },
    {
        "season": 7,
        "episode": 6,
        "title": "Beyond the Wall",
        "rating": 9.1
    },
    {
        "season": 7,
        "episode": 7,
        "title": "The Dragon and the Wolf",
        "rating": 9.5
    },
    {
        "season": 8,
        "episode": 1,
        "title": "Winterfell",
        "rating": 7.6
    },
    {
        "season": 8,
        "episode": 2,
        "title": "A Knight of the Seven Kingdoms",
        "rating": 7.9
    },
    {
        "season": 8,
        "episode": 3,
        "title": "The Long Night",
        "rating": 7.5
    },
    {
        "season": 8,
        "episode": 4,
        "title": "The Last of the Starks",
        "rating": 5.5
    },
    {
        "season": 8,
        "episode": 5,
        "title": "The Bells",
        "rating": 6.1
    },
    {
        "season": 8,
        "episode": 6,
        "title": "The Iron Throne",
        "rating": 4.2
    }
]
// Setting up ag-Grid
var columnDefs = [
  { field: 'season', chartDataType: 'category', rowGroup: true, hide: true },
  {
    field: 'rating',
    chartDataType: 'series',
    aggFunc: 'avg',
  },
];

var gridOptions = {
  columnDefs: columnDefs,
  enableRangeSelection: true,
  enableCharts: true,
  defaultColDef: { sortable: true },
  autoGroupColumnDef: { headerName: 'Season' },
};

var eGridDiv = document.querySelector('#myGrid');

document.addEventListener('DOMContentLoaded', function() {
  new agGrid.Grid(eGridDiv, gridOptions);

  let response = fetch('data.json');
  response.then(resp =>
    resp.json().then(data => {
      gridOptions.api.setRowData(data);
    })
  );
});

// Creating the chart
function createColumnChart() {
  let cellRange = {
    columns: ['ag-Grid-AutoColumn', 'rating'],
  };

  var chartRangeParams = {
    cellRange: cellRange,
    chartType: 'groupedColumn',
    processChartOptions: params => {
      let options = params.options;

      // add a title to the chart
      options.title.enabled = true;
      options.title.text = 'Game of Charts';

      // add a subtitle to the chart
      options.subtitle.enabled = true;
      options.subtitle.text = 'Average Rating per Season';

      // add a title for the Y Axis
      options.yAxis.title.enabled = true;
      options.yAxis.title.text = 'Rating';

      // add a title for the X Axis
      options.xAxis.title.enabled = true;
      options.xAxis.title.text = 'Season';

      // add a colour for the column
      options.seriesDefaults.fill.colors = ['#15607A'];
      options.seriesDefaults.stroke.colors = ['#15607A'];
      return options;
    },
  };

  // Creates a range chart with the given params
  gridOptions.api.createRangeChart(chartRangeParams);
}

function showGrid() {
  gridOptions.api.chartService.destroyAllActiveCharts();
}