Kwa kifupi kiuhalisia hakujawahi kuwepo na kundi la Sukuma Gang. Jina hili lilipata umaarufu kutokana na kuhusishwa na aliyekuwa Rais wa Awamu ya 5 Bwana John Pombe Magufuli. Hii ni kutokana na Magufuli kuwaamini sana na kuwapa nafasi Makada wenye misimamo mikali ya Kijamaa wanaotoka Kanda ya Ziwa hasa kabila la Wasukuma na Makabila Madogo yanayohusiana na Wasukuma ( Watu wa Kanda ya Ziwa)
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mgawanyo wa Jinsia wa Wagombea wa CCM - Tanzania Bara</title>
<!-- Load Chart.js for creating interactive charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Load Tailwind CSS for modern, responsive styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Inter for clean typography -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* Apply the Inter font to the entire body for consistent typography */
body {
font-family: 'Inter', sans-serif;
}
/* Styling for chart cards to add visual appeal and hover effects */
.chart-card {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
border-radius: 1rem; /* Rounded corners for the cards */
}
.chart-card:hover {
transform: translateY(-5px); /* Slightly lift card on hover */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}
/* Ensure canvas elements fit within their containers and maintain max height */
canvas {
max-height: 400px;
width: 100% !important; /* Override default Chart.js inline width */
height: auto !important; /* Maintain aspect ratio */
}
</style>
</head>
<body class="bg-gray-100 antialiased">
<header class="bg-gradient-to-r from-blue-800 to-green-700 text-white py-8 shadow-lg rounded-b-xl">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-extrabold text-center tracking-tight">Mgawanyo wa Jinsia wa Wagombea wa CCM - Tanzania Bara</h1>
<p class="text-center mt-3 text-lg opacity-90">Dashibodi hii inaonyesha mgawanyo wa jinsia wa wagombea wa CCM katika uchaguzi wa mchujo wa chama Tanzania Bara, ikiangazia mikoa na Majimbo ya Ubunge ya mijini na vijijini.</p>
</div>
</header>
<main class="container mx-auto px-4 py-10">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Overall Gender Percentage Chart -->
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Asilimia ya Jinsia kwa Ujumla</h2>
<canvas id="pieChart"></canvas>
</div>
<!-- Gender Distribution by Region Chart -->
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mgawanyo wa Jinsia kwa Mkoa</h2>
<canvas id="barChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Regions with High Female Representation Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mikoa yenye Uwakilishi wa Juu wa Wanawake</h2>
<canvas id="highFemaleChart"></canvas>
</div>
<!-- Regions with Low Female Representation Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mikoa yenye Uwakilishi wa Chini wa Wanawake</h2>
<canvas id="lowFemaleChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Urban Areas Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Maeneo ya Mijini</h2>
<canvas id="urbanChart"></canvas>
</div>
<!-- Rural Areas Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Maeneo ya Vijijini</h2>
<canvas id="ruralChart"></canvas>
</div>
</div>
</main>
<script type="text/javascript">
// Ensure all JavaScript runs after the DOM is fully loaded
window.onload = function() {
console.log("Dashboard loaded and ready to display charts!");
// Centralized configuration for Chart.js font sizes
const chartFontConfig = {
legendFontSize: 14,
titleFontSize: 16,
axisTitleFontSize: 14
};
// --- Pie Chart: Asilimia ya Jinsia kwa Ujumla ---
const pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['Mwanaume', 'Mwanamke'],
datasets: [{
data: [82.39, 17.61],
backgroundColor: [
'#1EB53A', // Tanzanian green (Male)
'#00A8E8' // Tanzanian blue (Female)
],
borderColor: [
'#2C6E49', // Darker green for border
'#005F73' // Darker blue for border
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Allows flexible sizing with max-height
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Asilimia ya Jinsia kwa Ujumla - Tanzania Bara', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Mgawanyo wa Wagombea Wanaume dhidi ya Wanawake kwa Mkoa ---
const barCtx = document.getElementById('barChart').getContext('2d');
new Chart(barCtx, {
type: 'bar',
data: {
labels: [
'Arusha', 'Dar es Salaam', 'Dodoma', 'Geita', 'Iringa', 'Kagera', 'Katavi',
'Kigoma', 'Kilimanjaro', 'Lindi', 'Manyara', 'Mbeya', 'Mara', 'Simiyu',
'Morogoro', 'Mtwara', 'Mwanza', 'Njombe', 'Rukwa', 'Ruvuma', 'Shinyanga',
'Singida', 'Tabora', 'Tanga'
],
datasets: [
{
label: 'Wagombea Wanaume',
data: [32, 55, 50, 31, 33, 37, 17, 42, 41, 32, 31, 30, 49, 39, 49, 39, 49, 26, 26, 39, 40, 37, 33, 44],
backgroundColor: '#1EB53A', // Green
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [10, 22, 12, 5, 4, 10, 7, 9, 12, 7, 9, 9, 4, 4, 14, 13, 9, 3, 2, 5, 6, 8, 8, 11],
backgroundColor: '#00A8E8', // Blue
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Mkoa', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Wagombea Wanaume dhidi ya Wanawake kwa Mkoa', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Doughnut Chart: Mikoa yenye Uwakilishi wa Juu wa Wanawake ---
const highFemaleCtx = document.getElementById('highFemaleChart').getContext('2d');
new Chart(highFemaleCtx, {
type: 'doughnut',
data: {
labels: ['Katavi', 'Dar es Salaam', 'Mbeya', 'Manyara', 'Morogoro'],
datasets: [{
label: 'Asilimia ya Wanawake',
data: [29.2, 28.6, 23.1, 22.5, 22.2],
backgroundColor: [
'#00A8E8', // Blue
'#FFC107', // Tanzanian yellow
'#1EB53A', // Green
'#6B7280', // Gray
'#F59E0B' // Orange
],
borderColor: [
'#005F73',
'#D97706',
'#2C6E49',
'#4B5563',
'#B45309'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mikoa yenye Uwakilishi wa Juu wa Wanawake (% Wanawake)', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Radar Chart: Mikoa yenye Uwakilishi wa Chini wa Wanawake ---
const lowFemaleCtx = document.getElementById('lowFemaleChart').getContext('2d');
new Chart(lowFemaleCtx, {
type: 'radar',
data: {
labels: ['Mara', 'Simiyu', 'Njombe', 'Ruvuma', 'Iringa'],
datasets: [
{
label: 'Asilimia ya Wanaume',
data: [92.5, 90.7, 89.7, 88.6, 89.2],
backgroundColor: 'rgba(30, 181, 58, 0.2)', // Light green with transparency
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Asilimia ya Wanawake',
data: [7.5, 9.3, 10.3, 11.4, 10.8],
backgroundColor: 'rgba(0, 168, 232, 0.2)', // Light blue with transparency
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: { stepSize: 20 },
title: { display: true, text: 'Asilimia', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mikoa yenye Uwakilishi wa Chini wa Wanawake (% Wanaume dhidi ya Wanawake)', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Maeneo ya Mijini ---
const urbanCtx = document.getElementById('urbanChart').getContext('2d');
new Chart(urbanCtx, {
type: 'bar',
data: {
labels: ['Arusha Mjini', 'Dodoma Mjini', 'Ilala', 'Temeke', 'Mbeya Mjini', 'Morogoro Mjini'],
datasets: [
{
label: 'Wagombea Wanaume',
data: [6, 6, 3, 5, 4, 6],
backgroundColor: '#1EB53A',
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [1, 2, 3, 3, 2, 1],
backgroundColor: '#00A8E8',
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Maeneo ya Majimbo Miji Mikubwa', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Jinsia katika Maeneo ya Mijini', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Maeneo ya Vijijini ---
const ruralCtx = document.getElementById('ruralChart').getContext('2d');
new Chart(ruralCtx, {
type: 'bar',
data: {
labels: ['Longido', 'Ngorongoro', 'Kondoa Vijijini', 'Bukoba Vijijini', 'Mbeya Vijijini', 'Musoma Vijijini'],
datasets: [
{
label: 'Wagombea Wanaume',
data: [4, 4, 4, 5, 5, 7],
backgroundColor: '#1EB53A',
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [0, 2, 1, 1, 0, 0],
backgroundColor: '#00A8E8',
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Maeneo ya Majimbo ya Vijijini', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Jinsia katika Maeneo ya Vijijini', font: { size: chartFontConfig.titleFontSize } }
}
}
});
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mgawanyo wa Jinsia wa Wagombea wa CCM - Tanzania Bara</title>
<!-- Load Chart.js for creating interactive charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Load Tailwind CSS for modern, responsive styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Inter for clean typography -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* Apply the Inter font to the entire body for consistent typography */
body {
font-family: 'Inter', sans-serif;
}
/* Styling for chart cards to add visual appeal and hover effects */
.chart-card {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
border-radius: 1rem; /* Rounded corners for the cards */
}
.chart-card:hover {
transform: translateY(-5px); /* Slightly lift card on hover */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}
/* Ensure canvas elements fit within their containers and maintain max height */
canvas {
max-height: 400px;
width: 100% !important; /* Override default Chart.js inline width */
height: auto !important; /* Maintain aspect ratio */
}
</style>
</head>
<body class="bg-gray-100 antialiased">
<header class="bg-gradient-to-r from-blue-800 to-green-700 text-white py-8 shadow-lg rounded-b-xl">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-extrabold text-center tracking-tight">Mgawanyo wa Jinsia wa Wagombea wa CCM - Tanzania Bara</h1>
<p class="text-center mt-3 text-lg opacity-90">Dashibodi hii inaonyesha mgawanyo wa jinsia wa wagombea wa CCM katika uchaguzi wa mchujo wa chama Tanzania Bara, ikiangazia mikoa na Majimbo ya Ubunge ya mijini na vijijini.</p>
</div>
</header>
<main class="container mx-auto px-4 py-10">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Overall Gender Percentage Chart -->
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Asilimia ya Jinsia kwa Ujumla</h2>
<canvas id="pieChart"></canvas>
</div>
<!-- Gender Distribution by Region Chart -->
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mgawanyo wa Jinsia kwa Mkoa</h2>
<canvas id="barChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Regions with High Female Representation Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mikoa yenye Uwakilishi wa Juu wa Wanawake</h2>
<canvas id="highFemaleChart"></canvas>
</div>
<!-- Regions with Low Female Representation Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Mikoa yenye Uwakilishi wa Chini wa Wanawake</h2>
<canvas id="lowFemaleChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Urban Areas Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Maeneo ya Mijini</h2>
<canvas id="urbanChart"></canvas>
</div>
<!-- Rural Areas Chart -->
<div class="bg-white p-6 rounded-xl shadow-md chart-card">
<h2 class="text-xl font-semibold text-center text-gray-800 mb-4">Maeneo ya Vijijini</h2>
<canvas id="ruralChart"></canvas>
</div>
</div>
</main>
<script type="text/javascript">
// Ensure all JavaScript runs after the DOM is fully loaded
window.onload = function() {
console.log("Dashboard loaded and ready to display charts!");
// Centralized configuration for Chart.js font sizes
const chartFontConfig = {
legendFontSize: 14,
titleFontSize: 16,
axisTitleFontSize: 14
};
// --- Pie Chart: Asilimia ya Jinsia kwa Ujumla ---
const pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['Mwanaume', 'Mwanamke'],
datasets: [{
data: [82.39, 17.61],
backgroundColor: [
'#1EB53A', // Tanzanian green (Male)
'#00A8E8' // Tanzanian blue (Female)
],
borderColor: [
'#2C6E49', // Darker green for border
'#005F73' // Darker blue for border
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Allows flexible sizing with max-height
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Asilimia ya Jinsia kwa Ujumla - Tanzania Bara', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Mgawanyo wa Wagombea Wanaume dhidi ya Wanawake kwa Mkoa ---
const barCtx = document.getElementById('barChart').getContext('2d');
new Chart(barCtx, {
type: 'bar',
data: {
labels: [
'Arusha', 'Dar es Salaam', 'Dodoma', 'Geita', 'Iringa', 'Kagera', 'Katavi',
'Kigoma', 'Kilimanjaro', 'Lindi', 'Manyara', 'Mbeya', 'Mara', 'Simiyu',
'Morogoro', 'Mtwara', 'Mwanza', 'Njombe', 'Rukwa', 'Ruvuma', 'Shinyanga',
'Singida', 'Tabora', 'Tanga'
],
datasets: [
{
label: 'Wagombea Wanaume',
data: [32, 55, 50, 31, 33, 37, 17, 42, 41, 32, 31, 30, 49, 39, 49, 39, 49, 26, 26, 39, 40, 37, 33, 44],
backgroundColor: '#1EB53A', // Green
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [10, 22, 12, 5, 4, 10, 7, 9, 12, 7, 9, 9, 4, 4, 14, 13, 9, 3, 2, 5, 6, 8, 8, 11],
backgroundColor: '#00A8E8', // Blue
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Mkoa', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Wagombea Wanaume dhidi ya Wanawake kwa Mkoa', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Doughnut Chart: Mikoa yenye Uwakilishi wa Juu wa Wanawake ---
const highFemaleCtx = document.getElementById('highFemaleChart').getContext('2d');
new Chart(highFemaleCtx, {
type: 'doughnut',
data: {
labels: ['Katavi', 'Dar es Salaam', 'Mbeya', 'Manyara', 'Morogoro'],
datasets: [{
label: 'Asilimia ya Wanawake',
data: [29.2, 28.6, 23.1, 22.5, 22.2],
backgroundColor: [
'#00A8E8', // Blue
'#FFC107', // Tanzanian yellow
'#1EB53A', // Green
'#6B7280', // Gray
'#F59E0B' // Orange
],
borderColor: [
'#005F73',
'#D97706',
'#2C6E49',
'#4B5563',
'#B45309'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mikoa yenye Uwakilishi wa Juu wa Wanawake (% Wanawake)', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Radar Chart: Mikoa yenye Uwakilishi wa Chini wa Wanawake ---
const lowFemaleCtx = document.getElementById('lowFemaleChart').getContext('2d');
new Chart(lowFemaleCtx, {
type: 'radar',
data: {
labels: ['Mara', 'Simiyu', 'Njombe', 'Ruvuma', 'Iringa'],
datasets: [
{
label: 'Asilimia ya Wanaume',
data: [92.5, 90.7, 89.7, 88.6, 89.2],
backgroundColor: 'rgba(30, 181, 58, 0.2)', // Light green with transparency
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Asilimia ya Wanawake',
data: [7.5, 9.3, 10.3, 11.4, 10.8],
backgroundColor: 'rgba(0, 168, 232, 0.2)', // Light blue with transparency
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: { stepSize: 20 },
title: { display: true, text: 'Asilimia', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mikoa yenye Uwakilishi wa Chini wa Wanawake (% Wanaume dhidi ya Wanawake)', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Maeneo ya Mijini ---
const urbanCtx = document.getElementById('urbanChart').getContext('2d');
new Chart(urbanCtx, {
type: 'bar',
data: {
labels: ['Arusha Mjini', 'Dodoma Mjini', 'Ilala', 'Temeke', 'Mbeya Mjini', 'Morogoro Mjini'],
datasets: [
{
label: 'Wagombea Wanaume',
data: [6, 6, 3, 5, 4, 6],
backgroundColor: '#1EB53A',
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [1, 2, 3, 3, 2, 1],
backgroundColor: '#00A8E8',
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Maeneo ya Majimbo Miji Mikubwa', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Jinsia katika Maeneo ya Mijini', font: { size: chartFontConfig.titleFontSize } }
}
}
});
// --- Bar Chart: Maeneo ya Vijijini ---
const ruralCtx = document.getElementById('ruralChart').getContext('2d');
new Chart(ruralCtx, {
type: 'bar',
data: {
labels: ['Longido', 'Ngorongoro', 'Kondoa Vijijini', 'Bukoba Vijijini', 'Mbeya Vijijini', 'Musoma Vijijini'],
datasets: [
{
label: 'Wagombea Wanaume',
data: [4, 4, 4, 5, 5, 7],
backgroundColor: '#1EB53A',
borderColor: '#2C6E49',
borderWidth: 1
},
{
label: 'Wagombea Wanawake',
data: [0, 2, 1, 1, 0, 0],
backgroundColor: '#00A8E8',
borderColor: '#005F73',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Idadi ya Wagombea', font: { size: chartFontConfig.axisTitleFontSize } }
},
x: {
title: { display: true, text: 'Maeneo ya Majimbo ya Vijijini', font: { size: chartFontConfig.axisTitleFontSize } }
}
},
plugins: {
legend: { position: 'top', labels: { font: { size: chartFontConfig.legendFontSize } } },
title: { display: true, text: 'Mgawanyo wa Jinsia katika Maeneo ya Vijijini', font: { size: chartFontConfig.titleFontSize } }
}
}
});
};
</script>
</body>
</html>