Harwinder Sekhon
54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load Google Charts
|
|
google.charts.load('current', {'packages':['gauge']});
|
|
google.charts.setOnLoadCallback(drawGauges);
|
|
|
|
// Draw all gauges on the page
|
|
function drawGauges() {
|
|
const gaugeContainers = document.querySelectorAll('.gauge-container');
|
|
|
|
gaugeContainers.forEach(container => {
|
|
const label = container.dataset.label;
|
|
const score = parseFloat(container.dataset.score);
|
|
|
|
// Create data table
|
|
const data = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
[label, score]
|
|
]);
|
|
|
|
// Configure gauge options
|
|
const options = {
|
|
width: 200,
|
|
height: 160,
|
|
redFrom: -100,
|
|
redTo: 0,
|
|
greenFrom: 0,
|
|
greenTo: 100,
|
|
minorTicks: 5,
|
|
min: -100,
|
|
max: 100,
|
|
majorTicks: [-100, -50, 0, 50, 100],
|
|
animation: {
|
|
duration: 500,
|
|
easing: 'out'
|
|
}
|
|
};
|
|
|
|
// Remove yellow region
|
|
delete options.yellowFrom;
|
|
delete options.yellowTo;
|
|
|
|
// Create and draw the gauge
|
|
const chart = new google.visualization.Gauge(container);
|
|
chart.draw(data, options);
|
|
});
|
|
}
|
|
|
|
// Re-draw gauges when window is resized
|
|
window.addEventListener('resize', function() {
|
|
if (typeof google !== 'undefined' && google.visualization) {
|
|
drawGauges();
|
|
}
|
|
});
|
|
}); |