Using Gauge inside wordpress
TinyGiantLife opened this issue · 5 comments
Being new to javascript I do not seem to be able to get this working
I want to include the script into the header instead of loading it.
Then, I want to set the parameters and display the gauge inside the HTML
I would appreciate any help and guidance how to do this.
When I paste the gauge.js contents into the header the code just fills the screen.. For example..
Also, I seem to be missing what is required to display the guage in the page..
Thank you..
I've never used wordpress and have no clue about how that works. But as a starting point, maybe a quick'n dirty recipe for how to embed everything in a single, selfcontained .html
will get you one step further?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>All inclusive Gauge.js</title>
<script type="application/javascript">
// Important: Paste the contents of gauge.min.js in here
// (Omitted for the sake of illustration)
// Boilerplate for rendering one or more gauges
const renderGauge = (canvasId, value) => {
// Options sample copy-pasted from https://bernii.github.io/gauge.js/
const opts = {
angle: -0.2, // The span of the gauge arc
lineWidth: 0.2, // 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: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0', // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
};
const target = document.getElementById(canvasId); // your canvas element
const gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(value); // set actual value
};
</script>
</head>
<body onload="renderGauge('foo', 1250); renderGauge('foo2', 2500)">
<!-- Then a couple of canvas elements where you render the gauges.
Note that the parameters to renderGauge() are
1. the 'id' of the canvas element below
2. The value you want to set
-->
<div id="gauges">
<canvas id="foo"></canvas>
<canvas id="foo2"></canvas>
</div>
</body>
</html>
Launching your browser on that local file, you should get something like this:
But like I said, I have no clue about wordpress.... Is this feasible to do at all? Don't know.
Thank you! This did indeed work. I pasted the code into the head & body sections then pasted the Div ID into an HTML insert inside the visual editor. So, yes it works in WordPress!
More questions:
- With the mini script How do I display the number value of the Guage?
- How can I size the gauge?
- You need a separate
div
orspan
element for that. Open the source for https://bernii.github.io/gauge.js/ and see how it's done there - That's done through CSS styling. Play with the height and width on the
canvas
and parentdiv
.
Thank you.
Does gauge.min.js script have the ability to display the number?
Ref 1. in my previous reply: Yes, but in a separate html element. Not as part of the canvas itself, even if you can position that div
on top of the canvas if you want. That's up for you to decide. Just check the sample site.