Jinsi ya Kutengeneza Interactive Charts kwa JS Animation
Jifunze jinsi ya kuunda interactive charts zinazotumia JavaScript na animations ili kuonyesha data kwa visual, intuitive, na attractive njia. Charts hizi zinafaa kwa dashboards, reports, na data visualization kwenye websites.
Mfano wa Code (Using Chart.js):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive JS Charts</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2 style="text-align:center;">Interactive Animated Chart</h2>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // unaweza pia kutumia 'line', 'pie', 'doughnut'
data: {
labels: ['Januari', 'Februari', 'Machi', 'Aprili', 'Mei'],
datasets: [{
label: 'Mauzo (TZS)',
data: [120000, 150000, 100000, 180000, 200000],
backgroundColor: [
'rgba(52, 152, 219, 0.7)',
'rgba(46, 204, 113, 0.7)',
'rgba(231, 76, 60, 0.7)',
'rgba(155, 89, 182, 0.7)',
'rgba(241, 196, 15, 0.7)'
],
borderColor: [
'rgba(52, 152, 219, 1)',
'rgba(46, 204, 113, 1)',
'rgba(231, 76, 60, 1)',
'rgba(155, 89, 182, 1)',
'rgba(241, 196, 15, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
duration: 2000, // duration ya animation kwa ms
easing: 'easeOutBounce'
},
scales: {
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
enabled: true // inakuwezesha interactive tooltips
}
}
}
});
</script>
</body>
</html>
Maelezo ya Code:
Tunatumia Chart.js library kwa chart ya interactive.
type: 'bar' inaweza kubadilishwa kuwa 'line', 'pie', 'doughnut' kulingana na chart unayotaka.
animation property inahakikisha chart inaonekana kwa smooth animation.
tooltip inaruhusu user kuona data wakati anapopita kwenye bars au points.
Unaweza kurekebisha rangi, data, na labels kwa dashboard yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code (Using Chart.js):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive JS Charts</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2 style="text-align:center;">Interactive Animated Chart</h2>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // unaweza pia kutumia 'line', 'pie', 'doughnut'
data: {
labels: ['Januari', 'Februari', 'Machi', 'Aprili', 'Mei'],
datasets: [{
label: 'Mauzo (TZS)',
data: [120000, 150000, 100000, 180000, 200000],
backgroundColor: [
'rgba(52, 152, 219, 0.7)',
'rgba(46, 204, 113, 0.7)',
'rgba(231, 76, 60, 0.7)',
'rgba(155, 89, 182, 0.7)',
'rgba(241, 196, 15, 0.7)'
],
borderColor: [
'rgba(52, 152, 219, 1)',
'rgba(46, 204, 113, 1)',
'rgba(231, 76, 60, 1)',
'rgba(155, 89, 182, 1)',
'rgba(241, 196, 15, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
duration: 2000, // duration ya animation kwa ms
easing: 'easeOutBounce'
},
scales: {
y: {
beginAtZero: true
}
},
plugins: {
tooltip: {
enabled: true // inakuwezesha interactive tooltips
}
}
}
});
</script>
</body>
</html>
Maelezo ya Code:
Tunatumia Chart.js library kwa chart ya interactive.
type: 'bar' inaweza kubadilishwa kuwa 'line', 'pie', 'doughnut' kulingana na chart unayotaka.
animation property inahakikisha chart inaonekana kwa smooth animation.
tooltip inaruhusu user kuona data wakati anapopita kwenye bars au points.
Unaweza kurekebisha rangi, data, na labels kwa dashboard yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509