CSI-KJSCE/Faculty-Documentation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Add Year filter to graphs and remove all the not needed graphs

Browse Source
This commit is contained in:
Sallu9007
2025-05-10 12:49:09 +05:30
parent 6c31e189cf
commit 114feade08
2 changed files with 179 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/Http/Controllers/AdminController.php
View File

@@ -19,7 +19,20 @@ class AdminController extends Controller
public function index() public function index()
{ {
$departments = Department::all(); $departments = Department::all();
return view('admin.dashboard', compact('departments'));
// Collect distinct years from all relevant date fields
$years = collect([
ActivitiesAttended::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
ActivitiesOrganised::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
BooksPublished::selectRaw('YEAR(date_of_publication) as year')->distinct()->pluck('year'),
ExternalEngagement::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
IvOrganised::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
OnlineCourse::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
Patent::selectRaw('YEAR(date_of_submission) as year')->distinct()->pluck('year'),
Publication::selectRaw('YEAR(end_date) as year')->distinct()->pluck('year'),
])->flatten()->unique()->sortDesc();
return view('admin.dashboard', compact('departments', 'years'));
} }
// View responses submitted by users // View responses submitted by users
@@ -186,29 +199,36 @@ class AdminController extends Controller
public function analyticsComparison(Request $request) public function analyticsComparison(Request $request)
{ {
$departmentId = $request->query('department_id'); $departmentId = $request->query('department_id');
$year = $request->query('year');
$models = [ $models = [
'ActivitiesAttended' => ActivitiesAttended::class, 'ActivitiesAttended' => ['class' => ActivitiesAttended::class, 'date_field' => 'end_date'],
'ActivitiesOrganised' => ActivitiesOrganised::class, 'ActivitiesOrganised' => ['class' => ActivitiesOrganised::class, 'date_field' => 'end_date'],
'BooksPublished' => BooksPublished::class, 'BooksPublished' => ['class' => BooksPublished::class, 'date_field' => 'date_of_publication'],
'ExternalEngagement' => ExternalEngagement::class, 'ExternalEngagement' => ['class' => ExternalEngagement::class, 'date_field' => 'end_date'],
'IvOrganised' => IvOrganised::class, 'IvOrganised' => ['class' => IvOrganised::class, 'date_field' => 'end_date'],
'OnlineCourse' => OnlineCourse::class, 'OnlineCourse' => ['class' => OnlineCourse::class, 'date_field' => 'end_date'],
'Patent' => Patent::class, 'Patent' => ['class' => Patent::class, 'date_field' => 'date_of_submission'],
'Publication' => Publication::class, 'Publication' => ['class' => Publication::class, 'date_field' => 'end_date'],
]; ];
$data = []; $data = [];
foreach ($models as $label => $model) { foreach ($models as $label => $modelConfig) {
$count = $model::where('department_id', $departmentId)->count(); $query = $modelConfig['class']::where('department_id', $departmentId);
if ($year && $year !== 'all') {
$query->whereYear($modelConfig['date_field'], $year);
}
$count = $query->count();
if ($count > 0) { // Only include data with non-zero count
$data[] = [ $data[] = [
'label' => $label, 'label' => $label,
'count' => $count, 'count' => $count,
]; ];
$total = array_sum(array_column($data, 'count'));
} }
}
$total = array_sum(array_column($data, 'count'));
return response()->json([ return response()->json([
'labels' => array_column($data, 'label'), 'labels' => array_column($data, 'label'),
@@ -220,16 +240,17 @@ class AdminController extends Controller
public function analyticsContribution(Request $request) public function analyticsContribution(Request $request)
{ {
$model = $request->query('model', 'all'); $model = $request->query('model', 'all');
$year = $request->query('year');
$models = [ $models = [
'ActivitiesAttended' => ActivitiesAttended::class, 'ActivitiesAttended' => ['class' => ActivitiesAttended::class, 'date_field' => 'end_date'],
'ActivitiesOrganised' => ActivitiesOrganised::class, 'ActivitiesOrganised' => ['class' => ActivitiesOrganised::class, 'date_field' => 'end_date'],
'BooksPublished' => BooksPublished::class, 'BooksPublished' => ['class' => BooksPublished::class, 'date_field' => 'date_of_publication'],
'ExternalEngagement' => ExternalEngagement::class, 'ExternalEngagement' => ['class' => ExternalEngagement::class, 'date_field' => 'end_date'],
'IvOrganised' => IvOrganised::class, 'IvOrganised' => ['class' => IvOrganised::class, 'date_field' => 'end_date'],
'OnlineCourse' => OnlineCourse::class, 'OnlineCourse' => ['class' => OnlineCourse::class, 'date_field' => 'end_date'],
'Patent' => Patent::class, 'Patent' => ['class' => Patent::class, 'date_field' => 'date_of_submission'],
'Publication' => Publication::class, 'Publication' => ['class' => Publication::class, 'date_field' => 'end_date'],
]; ];
$data = []; $data = [];
@@ -239,25 +260,37 @@ class AdminController extends Controller
foreach ($departments as $department) { foreach ($departments as $department) {
$count = 0; $count = 0;
foreach ($models as $modelClass) { foreach ($models as $modelConfig) {
$count += $modelClass::where('department_id', $department->id)->count(); $query = $modelConfig['class']::where('department_id', $department->id);
if ($year && $year !== 'all') {
$query->whereYear($modelConfig['date_field'], $year);
} }
$count += $query->count();
}
if ($count > 0) { // Only include data with non-zero count
$data[] = [ $data[] = [
'label' => $department->name, 'label' => $department->name,
'count' => $count, 'count' => $count,
]; ];
$total = array_sum(array_column($data, 'count')); }
} }
} else { } else {
$modelClass = $models[$model]; $modelConfig = $models[$model];
$data = $modelClass::selectRaw('departments.name as label, COUNT(*) as count') $query = $modelConfig['class']::selectRaw('departments.name as label, COUNT(*) as count')
->join('departments', 'department_id', '=', 'departments.id') ->join('departments', 'department_id', '=', 'departments.id')
->groupBy('departments.name') ->groupBy('departments.name');
->get()
->toArray(); if ($year && $year !== 'all') {
$total = array_sum(array_column($data, 'count')); $query->whereYear($modelConfig['date_field'], $year);
} }
$data = $query->get()->filter(function ($item) {
return $item['count'] > 0; // Filter out data with zero count
})->toArray();
}
$total = array_sum(array_column($data, 'count'));
return response()->json([ return response()->json([
'labels' => array_column($data, 'label'), 'labels' => array_column($data, 'label'),
'values' => array_column($data, 'count'), 'values' => array_column($data, 'count'),

565
resources/views/admin/dashboard.blade.php
View File

@@ -17,21 +17,32 @@
<!-- Graphs Section --> <!-- Graphs Section -->
<div class="mt-6"> <div class="mt-6">
<h3 class="text-lg font-semibold">Analytics</h3> <h3 class="text-lg font-semibold">Analytics</h3>
<div id="graphs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4"> <div id="graphs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 mt-4">
<!-- First three graphs --> <!-- First three graphs -->
<div class="bg-white p-4 shadow rounded"> <div class="bg-white p-4 shadow rounded">
<h4 class="text-md font-semibold mb-4">Comparison of All Models by Department</h4> <h4 class="text-md font-semibold mb-4">Comparison of All Models by Department</h4>
<div class="flex flex-row sm:flex-row sm:items-center sm:justify-between">
<select id="departmentSelector" class="mb-4 p-2 border rounded"> <select id="departmentSelector" class="mb-4 p-2 border rounded">
@foreach($departments as $department) @foreach($departments as $department)
<option value="{{ $department->id }}">{{ $department->name }}</option> <option value="{{ $department->id }}">{{ $department->name }}</option>
@endforeach @endforeach
</select> </select>
<select id="comparisonYearSelector" class="mb-4 p-2 border rounded">
<option value="all">All Years</option>
@foreach($years as $year)
<option value="{{ $year }}">{{ $year }}</option>
@endforeach
</select>
</div>
<canvas id="comparisonChart"></canvas> <canvas id="comparisonChart"></canvas>
</div> </div>
<div class="bg-white p-4 shadow rounded"> <div class="bg-white p-4 shadow rounded">
<h4 class="text-md font-semibold mb-4">Total Contribution by Department</h4> <h4 class="text-md font-semibold mb-4">Total Contribution by Department</h4>
<select id="modelSelector" class="mb-4 p-2 border rounded"> <div class="flex flex-row sm:flex-row sm:items-center sm:justify-between">
<select id="modelSelector" class="mb-4 sm:mb-0 p-2 border rounded">
<option value="all">All Categories</option> <option value="all">All Categories</option>
<option value="ActivitiesAttended">Activities Attended</option> <option value="ActivitiesAttended">Activities Attended</option>
<option value="ActivitiesOrganised">Activities Organised</option> <option value="ActivitiesOrganised">Activities Organised</option>
@@ -42,48 +53,15 @@
<option value="Patent">Patents</option> <option value="Patent">Patents</option>
<option value="Publication">Publications</option> <option value="Publication">Publications</option>
</select> </select>
<select id="contributionYearSelector" class="mb-4 sm:ml-4 p-2 border rounded">
<option value="all">All Years</option>
@foreach($years as $year)
<option value="{{ $year }}">{{ $year }}</option>
@endforeach
</select>
</div>
<canvas id="contributionChart"></canvas> <canvas id="contributionChart"></canvas>
</div> </div>
<div class="bg-white p-4 shadow rounded">
<h4 class="text-md font-semibold mb-4">Activities Attended by Department</h4>
<canvas id="activitiesAttendedChart"></canvas>
</div>
<!-- Hidden graphs (initially hidden) -->
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Activities Organised by Department</h4>
<canvas id="activitiesOrganisedChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Iv Organised by Department</h4>
<canvas id="ivOrganisedChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Publications by Department</h4>
<canvas id="publicationsChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Books Published by Department</h4>
<canvas id="booksPublishedChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">External Engagement by Department</h4>
<canvas id="externalEngagementChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Online Course by Department</h4>
<canvas id="onlineCourseChart"></canvas>
</div>
<div class="bg-white p-4 shadow rounded hidden">
<h4 class="text-md font-semibold mb-4">Patents by Department</h4>
<canvas id="patentsChart"></canvas>
</div>
</div>
<!-- Load More Button -->
<div class="text-center mt-4">
<button id="loadMoreGraphs" class="bg-black text-white px-4 py-2 rounded">Load More</button>
</div>
</div> </div>
</div> </div>
@endsection @endsection
@@ -101,9 +79,11 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Comparison Chart Script // Comparison Chart Script
const departmentSelector = document.getElementById('departmentSelector'); const departmentSelector = document.getElementById('departmentSelector');
const comparisonYearSelector = document.getElementById('comparisonYearSelector');
function fetchComparisonData(departmentId) { function fetchComparisonData(departmentId, year) {
fetch(`{{ route('admin.analytics.comparison', ['department_id' => '']) }}${departmentId}`) const yearParam = year === 'all' ? '' : `&year=${year}`;
fetch(`{{ route('admin.analytics.comparison', ['department_id' => '']) }}${departmentId}${yearParam}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const ctx = document.getElementById('comparisonChart').getContext('2d'); const ctx = document.getElementById('comparisonChart').getContext('2d');
@@ -111,7 +91,7 @@
window.comparisonChartInstance.destroy(); window.comparisonChartInstance.destroy();
} }
window.comparisonChartInstance = new Chart(ctx, { window.comparisonChartInstance = new Chart(ctx, {
type: 'pie', type: 'bar',
data: { data: {
labels: data.labels, labels: data.labels,
datasets: [{ datasets: [{
@@ -123,7 +103,11 @@
'rgba(255, 206, 86, 0.2)', 'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)', 'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)' 'rgba(255, 159, 64, 0.2)',
'rgba(128, 0, 128, 0.2)', // Purple
'rgba(0, 200, 0, 0.2)', // Green
'rgba(255, 165, 0, 0.2)', // Orange
'rgba(0, 0, 255, 0.2)' // Blue
], ],
borderColor: [ borderColor: [
'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)',
@@ -131,7 +115,11 @@
'rgba(255, 206, 86, 1)', 'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)', 'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)' 'rgba(255, 159, 64, 1)',
'rgba(128, 0, 128, 1)', // Purple
'rgba(0, 128, 0, 1)', // Green
'rgba(255, 165, 0, 1)', // Orange
'rgba(0, 0, 255, 1)' // Blue
], ],
borderWidth: 1 borderWidth: 1
}] }]
@@ -141,6 +129,7 @@
plugins: { plugins: {
legend: { legend: {
position: 'bottom', position: 'bottom',
display: false
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
@@ -150,16 +139,20 @@
} }
}, },
datalabels: { datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => { formatter: (value, ctx) => {
return value; return value;
} }
} }
}, },
responsive: true, responsive: true,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
}
} }
}); });
// Update or create the total element // Update or create the total element
@@ -174,19 +167,25 @@
}); });
} }
// Initial fetch for department 1 // Initial fetch for department 1 and all years
fetchComparisonData(1); fetchComparisonData(1, 'all');
// Update chart on department change // Update chart on department or year change
departmentSelector.addEventListener('change', function() { departmentSelector.addEventListener('change', function() {
fetchComparisonData(this.value); fetchComparisonData(this.value, comparisonYearSelector.value);
});
comparisonYearSelector.addEventListener('change', function() {
fetchComparisonData(departmentSelector.value, this.value);
}); });
// Contribution Chart Script // Contribution Chart Script
const modelSelector = document.getElementById('modelSelector'); const modelSelector = document.getElementById('modelSelector');
const contributionYearSelector = document.getElementById('contributionYearSelector');
function fetchContributionData(model) { function fetchContributionData(model, year) {
fetch(`{{ route('admin.analytics.contribution', ['model' => '']) }}${model}`) const yearParam = year === 'all' ? '' : `&year=${year}`;
fetch(`{{ route('admin.analytics.contribution', ['model' => '']) }}${model}${yearParam}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const ctx = document.getElementById('contributionChart').getContext('2d'); const ctx = document.getElementById('contributionChart').getContext('2d');
@@ -194,12 +193,36 @@
window.contributionChartInstance.destroy(); window.contributionChartInstance.destroy();
} }
window.contributionChartInstance = new Chart(ctx, { window.contributionChartInstance = new Chart(ctx, {
type: 'pie', type: 'bar', // Changed to bar chart
data: { data: {
labels: data.labels, labels: data.labels,
datasets: [{ datasets: [{
label: 'Total Contribution by Department', label: 'Total Contribution by Department',
data: data.values, data: data.values,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(128, 0, 128, 0.2)', // Purple
'rgba(0, 200, 0, 0.2)', // Green
'rgba(255, 165, 0, 0.2)', // Orange
'rgba(0, 0, 255, 0.2)' // Blue
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(128, 0, 128, 1)', // Purple
'rgba(0, 128, 0, 1)', // Green
'rgba(255, 165, 0, 1)', // Orange
'rgba(0, 0, 255, 1)' // Blue
],
borderWidth: 1 borderWidth: 1
}] }]
}, },
@@ -208,7 +231,7 @@
plugins: { plugins: {
legend: { legend: {
position: 'bottom', position: 'bottom',
display: true display: false
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
@@ -228,6 +251,14 @@
} }
}, },
responsive: true, responsive: true,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
}
} }
}); });
// Update or create the total element // Update or create the total element
@@ -242,422 +273,18 @@
}); });
} }
// Initial fetch for all categories // Initial fetch for all categories and all years
fetchContributionData('all'); fetchContributionData('all', 'all');
// Update chart on model change // Update chart on model or year change
modelSelector.addEventListener('change', function() { modelSelector.addEventListener('change', function() {
fetchContributionData(this.value); fetchContributionData(this.value, contributionYearSelector.value);
});
// Fetch data for Activities Attended
fetch("{{ route('admin.analytics.activitiesAttended') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('activitiesAttendedChart').getContext('2d');
new Chart(ctx, {
type: 'pie', // Changed to pie chart
data: {
labels: data.labels,
datasets: [{
label: 'Activities Attended',
data: data.values,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
}
}
}); });
// Display total for Activities Attended contributionYearSelector.addEventListener('change', function() {
const activitiesTotal = document.createElement('p'); fetchContributionData(modelSelector.value, this.value);
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('activitiesAttendedChart').parentElement.appendChild(activitiesTotal);
});
// Fetch data for Books Published
fetch("{{ route('admin.analytics.booksPublished') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('booksPublishedChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Books Published',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('booksPublishedChart').parentElement.appendChild(activitiesTotal);
});
// Fetch data for Publications
fetch("{{ route('admin.analytics.paperPublished') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('publicationsChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Papers Published',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('publicationsChart').parentElement.appendChild(activitiesTotal);
});
fetch("{{ route('admin.analytics.activitiesOrganised') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('activitiesOrganisedChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Activities Organised',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('activitiesOrganisedChart').parentElement.appendChild(activitiesTotal);
});
fetch("{{ route('admin.analytics.ivOrganised') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('ivOrganisedChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Iv Organised',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('ivOrganisedChart').parentElement.appendChild(activitiesTotal);
});
fetch("{{ route('admin.analytics.externalEngagement') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('externalEngagementChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'External Engagement',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('externalEngagementChart').parentElement.appendChild(activitiesTotal);
});
fetch("{{ route('admin.analytics.onlineCourse') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('onlineCourseChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Online Course',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('onlineCourseChart').parentElement.appendChild(activitiesTotal);
});
fetch("{{ route('admin.analytics.patent') }}")
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('patentsChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: data.labels,
datasets: [{
label: 'Online Course',
data: data.values,
// backgroundColor: 'rgba(153, 102, 255, 0.2)',
// borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
},
datalabels: {
color: '#000',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
return value;
}
}
},
responsive: true,
}
});
const activitiesTotal = document.createElement('p');
activitiesTotal.textContent = `Total: ${data.total}`;
activitiesTotal.classList.add('text-center', 'font-bold', 'mt-2');
document.getElementById('patentsChart').parentElement.appendChild(activitiesTotal);
}); });
}); });
// Load More Button Script
document.addEventListener('DOMContentLoaded', function() {
const loadMoreButton = document.getElementById('loadMoreGraphs');
const hiddenGraphs = document.querySelectorAll('#graphs-container .hidden');
loadMoreButton.addEventListener('click', function() {
hiddenGraphs.forEach(graph => graph.classList.remove('hidden')); // Show hidden graphs
loadMoreButton.style.display = 'none'; // Hide the button
});
});
</script> </script>
@endsection @endsection