<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SDG Publications Pie Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 2rem;
background: #f9f9f9;
}
canvas {
max-width: 800px;
margin: auto;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>Publications Aligned with Sustainable Development Goals</h2>
<canvas id="sdgPieChart"></canvas>
<script>
const ctx = document.getElementById('sdgPieChart').getContext('2d');
const data = {
labels: [
'Goal 1: No Poverty',
'Goal 2: Zero Hunger',
'Goal 3: Good Health and Well-being',
'Goal 4: Quality Education',
'Goal 5: Gender Equality',
'Goal 6: Clean Water and Sanitation',
'Goal 7: Affordable and Clean Energy',
'Goal 8: Decent Work and Economic Growth',
'Goal 9: Industry, Innovation and Infrastructure',
'Goal 10: Reduced Inequalities',
'Goal 11: Sustainable Cities and Communities',
'Goal 12: Responsible Consumption and Production',
'Goal 13: Climate Action',
'Goal 14: Life Below Water',
'Goal 15: Life on Land',
'Goal 16: Peace, Justice and Strong Institutions',
'Goal 17: Partnerships for the Goals'
],
datasets: [{
data: [
128, 181, 2662, 138, 98, 565, 1775, 446, 1627, 170,
498, 546, 519, 71, 160, 99, 337
],
backgroundColor: [
'#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33',
'#a65628','#f781bf','#999999','#66c2a5','#fc8d62','#8da0cb',
'#e78ac3','#a6d854','#ffd92f','#e5c494','#b3b3b3'
],
hoverOffset: 10
}]
};
new Chart(ctx, {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.parsed;
return `${label}: ${value} publications`;
}
}
},
legend: {
position: 'right',
labels: {
boxWidth: 20,
padding: 15
}
},
title: {
display: true,
text: 'SDG-linked Research Publications'
}
}
}
});
</script>
</body>
</html>
An Institute of Eminence
