Using Gauge inside wordpress

TinyGiantLife commented 2 years ago

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..

kplindegaard commented 2 years ago

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.

TinyGiantLife commented 2 years ago

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: 1) With the mini script How do I display the number value of the Guage? 2) How can I size the gauge?

kplindegaard commented 2 years ago

You need a separate div or span 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 parent div.

TinyGiantLife commented 2 years ago

Thank you. Does gauge.min.js script have the ability to display the number?

kplindegaard commented 2 years ago

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.

bernii / gauge.js

Using Gauge inside wordpress #257