Professor, Program Chair - BSCS - SOC
manas.pradhan@hu.ac.ae
Ext: 7311
Office:
{source}<?php
defined('_JEXEC') or die;
?>
<!-- Include Chart.js Library -->
<script src="/media/scopus/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Fetch the author_id dynamically from the article or page
var authorId = document.getElementById('authorId')?.textContent || '';
// Global variable to hold the chart instance
let researchActivityChartInstance;
// Fetch data from fetch_scopus_metrics.php
fetch(`/media/scopus/fetch_scopus_metrics.php?author_id=` + encodeURIComponent(authorId))
.then(response => response.json())
.then(data => {
if (data && data.labels && data.outputs) {
// Update the metrics container dynamically
var scopusDataContainer = document.getElementById('scopusData');
scopusDataContainer.innerHTML = `
<div class="metrics-container">
<div class="metric-card"><strong>h-index:</strong> <span class="metric-value">${data.hIndex}</span></div>
<div class="metric-card"><strong>Citations:</strong> <span class="metric-value">${data.citations}</span></div>
<div class="metric-card"><strong>Publications:</strong> <span class="metric-value">${data.publications}</span></div>
</div>
`;
// Render the chart
var canvasElement = document.getElementById('researchActivityChart');
if (canvasElement) {
// Clear the existing chart instance if it exists
if (researchActivityChartInstance) {
researchActivityChartInstance.destroy();
researchActivityChartInstance = null; // Ensure no dangling reference
}
// Reset the canvas element to clear previous drawings
canvasElement.parentNode.replaceChild(canvasElement.cloneNode(true), canvasElement);
// Re-select the newly cloned canvas element
canvasElement = document.getElementById('researchActivityChart');
// Create a new chart instance
researchActivityChartInstance = new Chart(canvasElement, {
type: 'bar',
data: {
labels: data.labels, // Years
datasets: [{
label: 'Research Outputs',
data: data.outputs, // Outputs
backgroundColor: '#555', // Gray color for bars
borderWidth: 0,
barThickness: 20,
maxBarThickness: 20,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function (context) {
return `${context.label}: ${context.raw} research outputs`;
}
}
},
legend: {
display: false // No legend
}
},
scales: {
x: {
grid: { display: false }, // No gridlines
ticks: {
display: true, // Show all x-axis labels
font: { size: 12 }, // Adjust font size
color: '#555' // Gray color for labels
}
},
y: {
grid: { display: true }, // Show gridlines
ticks: {
display: true, // Show y-axis labels
font: { size: 12 }, // Adjust font size
color: '#555' // Gray color for labels
}
}
}
}
});
} else {
console.error('Canvas element not found: #researchActivityChart');
}
} else {
document.getElementById('scopusData').innerHTML = 'Unable to load data.';
}
})
.catch(error => {
console.error('Error fetching data:', error);
document.getElementById('scopusData').innerHTML = 'Error fetching data.';
});
});
</script>{/source}
defined('_JEXEC') or die;
?>
<!-- Include Chart.js Library -->
<script src="/media/scopus/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Fetch the author_id dynamically from the article or page
var authorId = document.getElementById('authorId')?.textContent || '';
// Global variable to hold the chart instance
let researchActivityChartInstance;
// Fetch data from fetch_scopus_metrics.php
fetch(`/media/scopus/fetch_scopus_metrics.php?author_id=` + encodeURIComponent(authorId))
.then(response => response.json())
.then(data => {
if (data && data.labels && data.outputs) {
// Update the metrics container dynamically
var scopusDataContainer = document.getElementById('scopusData');
scopusDataContainer.innerHTML = `
<div class="metrics-container">
<div class="metric-card"><strong>h-index:</strong> <span class="metric-value">${data.hIndex}</span></div>
<div class="metric-card"><strong>Citations:</strong> <span class="metric-value">${data.citations}</span></div>
<div class="metric-card"><strong>Publications:</strong> <span class="metric-value">${data.publications}</span></div>
</div>
`;
// Render the chart
var canvasElement = document.getElementById('researchActivityChart');
if (canvasElement) {
// Clear the existing chart instance if it exists
if (researchActivityChartInstance) {
researchActivityChartInstance.destroy();
researchActivityChartInstance = null; // Ensure no dangling reference
}
// Reset the canvas element to clear previous drawings
canvasElement.parentNode.replaceChild(canvasElement.cloneNode(true), canvasElement);
// Re-select the newly cloned canvas element
canvasElement = document.getElementById('researchActivityChart');
// Create a new chart instance
researchActivityChartInstance = new Chart(canvasElement, {
type: 'bar',
data: {
labels: data.labels, // Years
datasets: [{
label: 'Research Outputs',
data: data.outputs, // Outputs
backgroundColor: '#555', // Gray color for bars
borderWidth: 0,
barThickness: 20,
maxBarThickness: 20,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function (context) {
return `${context.label}: ${context.raw} research outputs`;
}
}
},
legend: {
display: false // No legend
}
},
scales: {
x: {
grid: { display: false }, // No gridlines
ticks: {
display: true, // Show all x-axis labels
font: { size: 12 }, // Adjust font size
color: '#555' // Gray color for labels
}
},
y: {
grid: { display: true }, // Show gridlines
ticks: {
display: true, // Show y-axis labels
font: { size: 12 }, // Adjust font size
color: '#555' // Gray color for labels
}
}
}
}
});
} else {
console.error('Canvas element not found: #researchActivityChart');
}
} else {
document.getElementById('scopusData').innerHTML = 'Unable to load data.';
}
})
.catch(error => {
console.error('Error fetching data:', error);
document.getElementById('scopusData').innerHTML = 'Error fetching data.';
});
});
</script>{/source}
Research activity per year