kplindegaard
commented
6 years ago Even though there is no need to recreate the Gauge/Donut object every time you want to update the value, your code still sort of works when I tried to reproduce the rest of it. Be that as it may, there is nothing wrong with Gauge compared to Donut. What you should do is to check that the target variable is not null/undefined.
<html>
<head>
<script type="application/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
</head>
<body>
<canvas id="canvas_rpm"></canvas>
<span id="RPM_aktuell_grafik"></span>
<script type="application/javascript">
function RPM(val) {
var opts = {
angle: 0.01, // The span of the gauge arc
lineWidth: 0.38, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.6, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: '#000000' // Fill color
},
limitMax: false, // If false, max value increases automatically if value > maxValue
limitMin: false, // If true, the min value of the gauge will be fixed
colorStart: '#A01313', // Colors
colorStop: '#0D14DB', // just experiment with them
strokeColor: '#EEEEEE', // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
staticZones: [
{strokeStyle: "#30B32D", min: 0, max: 5000}, // Green
{strokeStyle: "#FFDD00", min: 5000, max: 7000}, // Yellow
{strokeStyle: "#F03E3E", min: 7000, max: 8000} // Red
]
};
var target = document.getElementById('canvas_rpm'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 8000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 1; // set animation speed (32 is default value)
gauge.set(val); // set actual value
document.getElementById("RPM_aktuell_grafik").textContent = val;
}
RPM(5000);
</script>
</body>
</html>
RitterD
jeraldkingn
Hi bernii,
only the "Donut" gauge works in my case... When I switch to "Gauge" nothing shows up....
`function RPM(val) { var opts = { angle: 0.01, // The span of the gauge arc lineWidth: 0.38, // The line thickness radiusScale: 1, // Relative radius pointer: { length: 0.6, // // Relative to gauge radius strokeWidth: 0.035, // The thickness color: '#000000' // Fill color }, limitMax: false, // If false, max value increases automatically if value > maxValue limitMin: false, // If true, the min value of the gauge will be fixed colorStart: '#A01313', // Colors colorStop: '#0D14DB', // just experiment with them strokeColor: '#EEEEEE', // to see which ones work best for you generateGradient: true, highDpiSupport: true, // High resolution support staticZones: [ {strokeStyle: "#30B32D", min: 0, max: 5000}, // Green {strokeStyle: "#FFDD00", min: 5000, max: 7000}, // Yellow {strokeStyle: "#F03E3E", min: 7000, max: 8000} // Red ], }; var target = document.getElementById('canvas_rpm'); // your canvas element var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 8000; // set max gauge value gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0 gauge.animationSpeed = 1; // set animation speed (32 is default value) gauge.set(val); // set actual value document.getElementById("RPM_aktuell_grafik").textContent = val;
}`
Donut works perfekt though... Srsly I have no clue what can I do... Please I need your urgent support.
Thank you very much in advance