Feat: Add Year filter to graphs and remove all the not needed graphs
This commit is contained in:
Sallu9007
@@ -17,73 +17,51 @@
|
||||
<!-- Graphs Section -->
|
||||
<div class="mt-6">
|
||||
<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 -->
|
||||
<div class="bg-white p-4 shadow rounded">
|
||||
<h4 class="text-md font-semibold mb-4">Comparison of All Models by Department</h4>
|
||||
<select id="departmentSelector" class="mb-4 p-2 border rounded">
|
||||
<div class="flex flex-row sm:flex-row sm:items-center sm:justify-between">
|
||||
<select id="departmentSelector" class="mb-4 p-2 border rounded">
|
||||
@foreach($departments as $department)
|
||||
<option value="{{ $department->id }}">{{ $department->name }}</option>
|
||||
@endforeach
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-4 shadow rounded">
|
||||
<h4 class="text-md font-semibold mb-4">Total Contribution by Department</h4>
|
||||
<select id="modelSelector" class="mb-4 p-2 border rounded">
|
||||
<option value="all">All Categories</option>
|
||||
<option value="ActivitiesAttended">Activities Attended</option>
|
||||
<option value="ActivitiesOrganised">Activities Organised</option>
|
||||
<option value="BooksPublished">Books Published</option>
|
||||
<option value="ExternalEngagement">External Engagement</option>
|
||||
<option value="IvOrganised">IV Organised</option>
|
||||
<option value="OnlineCourse">Online Courses</option>
|
||||
<option value="Patent">Patents</option>
|
||||
<option value="Publication">Publications</option>
|
||||
</select>
|
||||
<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="ActivitiesAttended">Activities Attended</option>
|
||||
<option value="ActivitiesOrganised">Activities Organised</option>
|
||||
<option value="BooksPublished">Books Published</option>
|
||||
<option value="ExternalEngagement">External Engagement</option>
|
||||
<option value="IvOrganised">IV Organised</option>
|
||||
<option value="OnlineCourse">Online Courses</option>
|
||||
<option value="Patent">Patents</option>
|
||||
<option value="Publication">Publications</option>
|
||||
</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>
|
||||
</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>
|
||||
@endsection
|
||||
@@ -101,9 +79,11 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Comparison Chart Script
|
||||
const departmentSelector = document.getElementById('departmentSelector');
|
||||
const comparisonYearSelector = document.getElementById('comparisonYearSelector');
|
||||
|
||||
function fetchComparisonData(departmentId) {
|
||||
fetch(`{{ route('admin.analytics.comparison', ['department_id' => '']) }}${departmentId}`)
|
||||
function fetchComparisonData(departmentId, year) {
|
||||
const yearParam = year === 'all' ? '' : `&year=${year}`;
|
||||
fetch(`{{ route('admin.analytics.comparison', ['department_id' => '']) }}${departmentId}${yearParam}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ctx = document.getElementById('comparisonChart').getContext('2d');
|
||||
@@ -111,7 +91,7 @@
|
||||
window.comparisonChartInstance.destroy();
|
||||
}
|
||||
window.comparisonChartInstance = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
@@ -123,7 +103,11 @@
|
||||
'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(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)',
|
||||
@@ -131,7 +115,11 @@
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 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
|
||||
}]
|
||||
@@ -141,6 +129,7 @@
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
@@ -150,16 +139,20 @@
|
||||
}
|
||||
},
|
||||
datalabels: {
|
||||
color: '#000',
|
||||
font: {
|
||||
weight: 'bold'
|
||||
},
|
||||
formatter: (value, ctx) => {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// Update or create the total element
|
||||
@@ -174,19 +167,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Initial fetch for department 1
|
||||
fetchComparisonData(1);
|
||||
// Initial fetch for department 1 and all years
|
||||
fetchComparisonData(1, 'all');
|
||||
|
||||
// Update chart on department change
|
||||
// Update chart on department or year change
|
||||
departmentSelector.addEventListener('change', function() {
|
||||
fetchComparisonData(this.value);
|
||||
fetchComparisonData(this.value, comparisonYearSelector.value);
|
||||
});
|
||||
|
||||
comparisonYearSelector.addEventListener('change', function() {
|
||||
fetchComparisonData(departmentSelector.value, this.value);
|
||||
});
|
||||
|
||||
// Contribution Chart Script
|
||||
const modelSelector = document.getElementById('modelSelector');
|
||||
const contributionYearSelector = document.getElementById('contributionYearSelector');
|
||||
|
||||
function fetchContributionData(model) {
|
||||
fetch(`{{ route('admin.analytics.contribution', ['model' => '']) }}${model}`)
|
||||
function fetchContributionData(model, year) {
|
||||
const yearParam = year === 'all' ? '' : `&year=${year}`;
|
||||
fetch(`{{ route('admin.analytics.contribution', ['model' => '']) }}${model}${yearParam}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ctx = document.getElementById('contributionChart').getContext('2d');
|
||||
@@ -194,12 +193,36 @@
|
||||
window.contributionChartInstance.destroy();
|
||||
}
|
||||
window.contributionChartInstance = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
type: 'bar', // Changed to bar chart
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: 'Total Contribution by Department',
|
||||
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
|
||||
}]
|
||||
},
|
||||
@@ -208,7 +231,7 @@
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
@@ -228,6 +251,14 @@
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// Update or create the total element
|
||||
@@ -242,422 +273,18 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Initial fetch for all categories
|
||||
fetchContributionData('all');
|
||||
// Initial fetch for all categories and all years
|
||||
fetchContributionData('all', 'all');
|
||||
|
||||
// Update chart on model change
|
||||
// Update chart on model or year change
|
||||
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
|
||||
const activitiesTotal = document.createElement('p');
|
||||
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
|
||||
contributionYearSelector.addEventListener('change', function() {
|
||||
fetchContributionData(modelSelector.value, this.value);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user