104 lines
3.9 KiB
JavaScript
104 lines
3.9 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
if (typeof Highcharts === "undefined") {
|
|
console.error("Highcharts library not loaded!");
|
|
return;
|
|
}
|
|
|
|
function createGaugeChart(speed, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual) {
|
|
console.log(fontSize)
|
|
Highcharts.chart(divId, {
|
|
chart: {
|
|
type: 'solidgauge',
|
|
width: width,
|
|
height: height,
|
|
backgroundColor: 'transparent',
|
|
plotBackgroundColor: null,
|
|
shadow: false
|
|
},
|
|
title: {
|
|
text: title,
|
|
y: 30
|
|
},
|
|
pane: {
|
|
startAngle: 0,
|
|
endAngle: 360,
|
|
y: 0,
|
|
background: [{
|
|
backgroundColor: 'transparent',
|
|
shape: "arc",
|
|
borderWidth: 0,
|
|
innerRadius: '60%',
|
|
outerRadius: '100%'
|
|
}]
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
max: 100,
|
|
tickPositions: [],
|
|
lineWidth: 0,
|
|
minorTickLength: 0,
|
|
tickWidth: 0,
|
|
gridLineWidth: 0,
|
|
stops: [
|
|
[1, color]
|
|
]
|
|
},
|
|
series: [{
|
|
name: 'Percentage',
|
|
data: [speed],
|
|
dataLabels: {
|
|
format: '{y}% ',
|
|
// format: '{y}% <br>' + "Total: "+ total+ "<br> Complete: " + actual,
|
|
y: fontYAxis,
|
|
x: fontXAxis,
|
|
borderWidth: 0,
|
|
backgroundColor: 'none',
|
|
style: {
|
|
fontSize: fontSize + 'px',
|
|
fontWeight: 'bold',
|
|
color:fontColor
|
|
},
|
|
zIndex: 10
|
|
},
|
|
color: color,
|
|
showInLegend: false
|
|
}],
|
|
credits: {
|
|
enabled: false
|
|
}
|
|
});
|
|
}
|
|
initializeGauges();
|
|
function initializeGauges() {
|
|
const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
|
|
gaugeDivs2.forEach(function (div) {
|
|
const speed = div.getAttribute('data-speed');
|
|
const color = div.getAttribute('data-color');
|
|
const title = div.getAttribute('data-title');
|
|
const height = div.getAttribute('data-height');
|
|
const width = div.getAttribute('data-width');
|
|
const fontSize = div.getAttribute('data-fontSize');
|
|
const fontColor = div.getAttribute('data-fontColor');
|
|
const total = div.getAttribute('data-totalProduction');
|
|
const actual = div.getAttribute('data-actualProduction');
|
|
const divId = div.id;
|
|
createGaugeChart(parseInt(speed), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
|
|
});
|
|
const gaugeDivs = document.querySelectorAll('.gauge-chart');
|
|
gaugeDivs.forEach(function (div) {
|
|
const speed = div.getAttribute('data-speed');
|
|
const color = div.getAttribute('data-color');
|
|
const title = div.getAttribute('data-title');
|
|
const height = div.getAttribute('data-height');
|
|
const width = div.getAttribute('data-width');
|
|
const fontSize = div.getAttribute('data-fontSize');
|
|
const fontColor = div.getAttribute('data-fontColor');
|
|
const total = div.getAttribute('data-totalProduction');
|
|
const actual = div.getAttribute('data-actualProduction');
|
|
const divId = div.id;
|
|
console.log(title)
|
|
createGaugeChart(parseInt(speed), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual);
|
|
});
|
|
}
|
|
});
|