<!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="onCreatePivotChart()">
Create a Pivot Chart
</button>
<button id="btn-grid" class="btn" onclick="onShowGrid()">Show grid</button>
<div
id="myGrid"
style="height: 70vh;width:90vw;"
class="ag-theme-balham"
></div>
<script src="main.js"></script>
</body>
</html>
[
{
"nudity": "severe",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 1,
"title": "Winter Is Coming",
"rating": 9,
"deathCount": 4,
"nudity as number": 3
},
{
"nudity": "severe",
"violence": "moderate",
"violence as number": 2,
"season": 1,
"episode": 2,
"title": "The Kingsroad",
"rating": 8.8,
"deathCount": 3,
"nudity as number": 3
},
{
"nudity": "moderate",
"violence": "moderate",
"violence as number": 2,
"season": 1,
"episode": 3,
"title": "Lord Snow",
"rating": 8.7,
"deathCount": 0,
"nudity as number": 2
},
{
"nudity": "moderate",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 4,
"title": "Cripples, Bastards, and Broken Things",
"rating": 8.8,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "severe",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 5,
"title": "The Wolf and the Lion",
"rating": 9.1,
"deathCount": 5,
"nudity as number": 3
},
{
"nudity": "moderate",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 6,
"title": "A Golden Crown",
"rating": 9.2,
"deathCount": 4,
"nudity as number": 2
},
{
"nudity": "severe",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 7,
"title": "You Win or You Die",
"rating": 9.2,
"deathCount": 3,
"nudity as number": 3
},
{
"nudity": "moderate",
"violence": "severe",
"violence as number": 3,
"season": 1,
"episode": 8,
"title": "The Pointy End",
"rating": 9,
"deathCount": 7,
"nudity as number": 2
},
{
"nudity": "moderate",
"violence": "moderate",
"violence as number": 2,
"season": 1,
"episode": 9,
"title": "Baelor",
"rating": 9.6,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "moderate",
"violence": "moderate",
"violence as number": 2,
"season": 1,
"episode": 10,
"title": "Fire and Blood",
"rating": 9.5,
"deathCount": 3,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 1,
"title": "The North Remembers",
"rating": 8.8,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 2,
"episode": 2,
"title": "The Night Lands",
"rating": 8.5,
"deathCount": 1,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 3,
"title": "What Is Dead May Never Die",
"rating": 8.8,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 4,
"title": "Garden of Bones",
"rating": 8.8,
"deathCount": 4,
"nudity as number": 3
},
{
"nudity": "None",
"violence": "Mild",
"violence as number": 1,
"season": 2,
"episode": 5,
"title": "The Ghost of Harrenhal",
"rating": 8.8,
"deathCount": 4,
"nudity as number": 0
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 6,
"title": "The Old Gods and the New",
"rating": 9.1,
"deathCount": 5,
"nudity as number": 2
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 7,
"title": "A Man Without Honor",
"rating": 8.9,
"deathCount": 8,
"nudity as number": 1
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 2,
"episode": 8,
"title": "The Prince of Winterfell",
"rating": 8.8,
"deathCount": 3,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 2,
"episode": 9,
"title": "Blackwater",
"rating": 9.7,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 2,
"episode": 10,
"title": "Valar Morghulis",
"rating": 9.4,
"deathCount": 8,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 1,
"title": "Valar Dohaeris",
"rating": 8.8,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 2,
"title": "Dark Wings, Dark Words",
"rating": 8.6,
"deathCount": 1,
"nudity as number": 1
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 3,
"title": "Walk of Punishment",
"rating": 8.9,
"deathCount": 1,
"nudity as number": 3
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 4,
"title": "And Now His Watch Is Ended",
"rating": 9.6,
"deathCount": 5,
"nudity as number": 0
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 5,
"title": "Kissed by Fire",
"rating": 9,
"deathCount": 4,
"nudity as number": 3
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 6,
"title": "The Climb",
"rating": 8.8,
"deathCount": 1,
"nudity as number": 0
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 7,
"title": "The Bear and the Maiden Fair",
"rating": 8.7,
"deathCount": 0,
"nudity as number": 3
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 3,
"episode": 8,
"title": "Second Sons",
"rating": 9,
"deathCount": 3,
"nudity as number": 3
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 9,
"title": "The Rains of Castamere",
"rating": 9.9,
"deathCount": 9,
"nudity as number": 0
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 3,
"episode": 10,
"title": "Mhysa",
"rating": 9.1,
"deathCount": 1,
"nudity as number": 0
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 1,
"title": "Two Swords",
"rating": 9.1,
"deathCount": 2,
"nudity as number": 3
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 2,
"title": "The Lion and the Rose",
"rating": 9.7,
"deathCount": 3,
"nudity as number": 1
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 4,
"episode": 3,
"title": "Breaker of Chains",
"rating": 8.9,
"deathCount": 4,
"nudity as number": 3
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 4,
"episode": 4,
"title": "Oathkeeper",
"rating": 8.8,
"deathCount": 1,
"nudity as number": 3
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 5,
"title": "First of His Name",
"rating": 8.7,
"deathCount": 3,
"nudity as number": 1
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 4,
"episode": 6,
"title": "The Laws of Gods and Men",
"rating": 9.7,
"deathCount": 0,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 7,
"title": "Mockingbird",
"rating": 9.1,
"deathCount": 4,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 8,
"title": "The Mountain and the Viper",
"rating": 9.7,
"deathCount": 7,
"nudity as number": 2
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 9,
"title": "The Watchers on the Wall",
"rating": 9.6,
"deathCount": 10,
"nudity as number": 0
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 4,
"episode": 10,
"title": "The Children",
"rating": 9.7,
"deathCount": 4,
"nudity as number": 1
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 1,
"title": "The Wars to Come",
"rating": 8.5,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 2,
"title": "The House of Black and White",
"rating": 8.5,
"deathCount": 1,
"nudity as number": 0
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 3,
"title": "High Sparrow",
"rating": 8.5,
"deathCount": 3,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 4,
"title": "Sons of the Harpy",
"rating": 8.7,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 5,
"episode": 5,
"title": "Kill the Boy",
"rating": 8.6,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 5,
"episode": 6,
"title": "Unbowed, Unbent, Unbroken",
"rating": 8,
"deathCount": 1,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 7,
"title": "The Gift",
"rating": 9,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 8,
"title": "Hardhome",
"rating": 9.9,
"deathCount": 4,
"nudity as number": 0
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 9,
"title": "The Dance of Dragons",
"rating": 9.5,
"deathCount": 4,
"nudity as number": 1
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 5,
"episode": 10,
"title": "Mother's Mercy",
"rating": 9.1,
"deathCount": 8,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 1,
"title": "The Red Woman",
"rating": 8.5,
"deathCount": 5,
"nudity as number": 2
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 2,
"title": "Home",
"rating": 9.4,
"deathCount": 4,
"nudity as number": 1
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 3,
"title": "Oathbreaker",
"rating": 8.7,
"deathCount": 9,
"nudity as number": 1
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 4,
"title": "Book of the Stranger",
"rating": 9.1,
"deathCount": 8,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 6,
"episode": 5,
"title": "The Door",
"rating": 9.7,
"deathCount": 5,
"nudity as number": 3
},
{
"nudity": "None",
"violence": "Moderate",
"violence as number": 2,
"season": 6,
"episode": 6,
"title": "Blood of My Blood",
"rating": 8.4,
"deathCount": 1,
"nudity as number": 0
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 6,
"episode": 7,
"title": "The Broken Man",
"rating": 8.6,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 8,
"title": "No One",
"rating": 8.4,
"deathCount": 8,
"nudity as number": 1
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 9,
"title": "Battle of the Bastards",
"rating": 9.9,
"deathCount": 7,
"nudity as number": 0
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 6,
"episode": 10,
"title": "The Winds of Winter",
"rating": 9.9,
"deathCount": 12,
"nudity as number": 1
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 7,
"episode": 1,
"title": "Dragonstone",
"rating": 8.6,
"deathCount": 3,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Severe",
"violence as number": 3,
"season": 7,
"episode": 2,
"title": "Stormborn",
"rating": 8.9,
"deathCount": 2,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "Moderate",
"violence as number": 2,
"season": 7,
"episode": 3,
"title": "The Queen's Justice",
"rating": 9.2,
"deathCount": 2,
"nudity as number": 2
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 7,
"episode": 4,
"title": "The Spoils of War",
"rating": 9.8,
"deathCount": 1,
"nudity as number": 0
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 7,
"episode": 5,
"title": "Eastwatch",
"rating": 8.8,
"deathCount": 2,
"nudity as number": 0
},
{
"nudity": "None",
"violence": "Moderate",
"violence as number": 2,
"season": 7,
"episode": 6,
"title": "Beyond the Wall",
"rating": 9.1,
"deathCount": 4,
"nudity as number": 0
},
{
"nudity": "Moderate",
"violence": "Severe",
"violence as number": 3,
"season": 7,
"episode": 7,
"title": "The Dragon and the Wolf",
"rating": 9.5,
"deathCount": 1,
"nudity as number": 2
},
{
"nudity": "Severe",
"violence": "Moderate",
"violence as number": 2,
"season": 8,
"episode": 1,
"title": "Winterfell",
"rating": 7.6,
"deathCount": 1,
"nudity as number": 3
},
{
"nudity": "Moderate",
"violence": "None",
"violence as number": 0,
"season": 8,
"episode": 2,
"title": "A Knight of the Seven Kingdoms",
"rating": 7.9,
"deathCount": 0,
"nudity as number": 2
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 8,
"episode": 3,
"title": "The Long Night",
"rating": 7.5,
"deathCount": 9,
"nudity as number": 0
},
{
"nudity": "Mild",
"violence": "Severe",
"violence as number": 3,
"season": 8,
"episode": 4,
"title": "The Last of the Starks",
"rating": 5.5,
"deathCount": 2,
"nudity as number": 1
},
{
"nudity": "None",
"violence": "Severe",
"violence as number": 3,
"season": 8,
"episode": 5,
"title": "The Bells",
"rating": 6.1,
"deathCount": 12,
"nudity as number": 0
},
{
"nudity": "None",
"violence": "Moderate",
"violence as number": 2,
"season": 8,
"episode": 6,
"title": "The Iron Throne",
"rating": 4.2,
"deathCount": 1,
"nudity as number": 0
}
]
var columnDefs = [
{ field: 'season', chartDataType: 'category', rowGroup: true },
{ field: 'rating', chartDataType: 'series', aggFunc: 'avg' },
{
field: 'nudity',
chartDataType: 'series',
aggFunc: 'avg',
},
{
field: 'violence',
chartDataType: 'series',
aggFunc: 'avg',
},
];
var gridOptions = {
columnDefs: columnDefs,
enableCharts: true,
pivotMode: true,
autoGroupColumnDef: {
headerName: 'Season',
},
};
function onCreatePivotChart() {
var createPivotChartParams = {
chartType: 'stackedBar',
processChartOptions: function(params) {
var options = params.options;
options.title.enabled = true;
options.title.text = 'Game of Charts';
options.subtitle.enabled = true;
options.subtitle.text = 'Average Rating, Nudity and Violence per Season';
options.yAxis.label.formatter = function(params) {
return 'Season ' + params.value;
};
options.xAxis.title.enabled = true;
options.xAxis.title.text = 'Average Score';
options.seriesDefaults.fill.colors = ['#15607A', '#C71E1D', '#FF8900'];
return options;
},
};
gridOptions.api.createPivotChart(createPivotChartParams);
}
document.addEventListener('DOMContentLoaded', function() {
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
let response = fetch('data.json');
response.then(resp =>
resp.json().then(data => {
let newData = data.map(item => {
let newItem = {
...item,
nudity:
item.nudity.toLowerCase() === 'severe'
? 10
: item.nudity.toLowerCase() === 'moderate'
? 6.6
: item.nudity.toLowerCase() === 'mild'
? 3.3
: 0,
violence:
item.violence.toLowerCase() === 'severe'
? 10
: item.violence.toLowerCase() === 'moderate'
? 6.6
: item.violence.toLowerCase() === 'mild'
? 3.3
: 0,
};
return newItem;
});
gridOptions.api.setRowData(newData);
})
);
});
function onShowGrid() {
gridOptions.api.chartService.destroyAllActiveCharts();
}