<!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="createLineChart()">
Create a line 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: 'title', chartDataType: 'category' },
{ field: 'rating', chartDataType: 'series', sort: 'desc' },
{ field: 'season' },
{ field: 'episode' },
];
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
enableCharts: true,
defaultColDef: { sortable: true, filter: true },
};
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 createLineChart() {
let cellRange = {
columns: ['title', 'rating'],
};
var chartRangeParams = {
cellRange: cellRange,
chartType: 'line',
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 = 'Rating per Episode in Descending Order';
// 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 = 'Episode';
// removes the labels from X Axis
options.xAxis.label.formatter = params => '';
// add a colour for a the bar
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();
}