Menu
Hi guys i was wondering if anyone knew how to get my to piecharts next to eachother, i tried my best looking it up online but i could’nt resolve my issue.
[code]<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”>
<link href=”./Statistieken/Statistieken.css” rel=”stylesheet”>
</head>
<body>
<nav class=”bg-white shadow”>
<div class=”max-w-7xl mx-auto px-2 sm:px-4 lg:px-8″>
<div class=”flex justify-between h-16″>
<div class=”flex px-2 lg:px-0″>
<div class=”hidden lg:ml-6 lg:flex lg:space-x-8″>
<a href=”./index.html” class=”border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium”>
Home
</a>
<a href=”./quiz.html” class=”border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium”>
Quiz
</a>
<a href=”./statistieken.html” class=”border-red-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium”>
Statistieken
</a>
<a href=”./soundbar.html” class=”border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium”>
Soundbar
</a>
<a href=”./flipcard.html” class=”border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium”>
Flipcard
</a>
</div>
</div>
</div>
</div>
</nav>
<div class=”bg-red-600″>
<div class=”max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between”>
<div class=”max-w-xl”>
<h2 class=”text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl”>Statistieken</h2>
<p class=”mt-5 text-xl text-white”>Welkom bij de statistieken van de top 2000</p>
</div>
</div>
</div>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
google.charts.load(“current”, {packages:[“corechart”]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Liedjes’,’Procent van de stemmen’],
[‘1. Queen, Bohemian Rhapsody’, 21 ],
[‘2. Danny Vera, Roller Coaster’,12],
[‘3. Billy Joel, Piano Man’, 10],
[‘4. Queen, We Will Rock You’, 9],
[‘5. Queen, Dont Stop Me Now’, 9],
[‘6. Imagine Dragons, Believer’, 9],
[‘7. Eagles, Hotel California’, 8],
[‘8. AC/DC, Thunderstruck,’, 8],
[‘9. Billie Eilish, Bad Guy’, 7],
[’10. The Weeknd, Blinding Lights’, 7],
]);
var options = {
title: “Stemmen 0-15 jaar”,
pieHole: 0.4,
colors: [‘#BC201B’,’#BC201B’,’#BC201B’,’#C83321′,’#CD3D25′,’#D54A28′,’#DC562D’,’#E25F2F’,’#EA6C35′,’#F1783A’]
};
var chart = new google.visualization.PieChart(document.getElementById(‘donutchart’));
chart.draw(data, options);
}
</script>
<script type=”text/javascript”>
google.charts.load(“current”, {packages:[“corechart”]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Liedjes’,’Procent van de stemmen’],
[‘1. Danny Vera, Roller Coaster’,17],
[‘2. Eagles, Hotel California’,13],
[‘3. Led Zepplin, Stairway To Heaven’,11],
[‘4. Queen, Bohemian Rhapsody’, 10],
[‘5. Boudewijn de Groot, Avond’, 9],
[‘6. John Lennon, Imagine’, 9],
[‘7. Deep Purple, Child in Time’, 9],
[‘8. Pink Floyd, Wish You Were Here’, 8],
[‘9. The Doors, Riders On The Storm’, 7],
[’10. Moody Blues, Nights in White Satin’, 7],
]);
var options = {
title: “Stemmen 66-71 jaar”,
pieHole: 0.4,
colors: [‘#BC201B’,’#BC201B’,’#BC201B’,’#C83321′,’#CD3D25′,’#D54A28′,’#DC562D’,’#E25F2F’,’#EA6C35′,’#F1783A’]
};
var chart = new google.visualization.PieChart(document.getElementById(‘chart_holder’));
chart.draw(data, options);
}
</script>
<div id=”donutchart” style=”width: 900px; height: 500px;”></div>
<div id=”chart_holder”>
<div id=”chart_div_2″ class=”chart_div”></div>
<div class=”clearFloat”></div>
</body>
</html>
Thanks in advance!
Thomas