How to insert values in the chart gauge

Asked

Viewed 182 times

-1

I am with widget Gauger (type Velocimetro) and would like to enter my own value

For example, the maximum value would be 200 and minimum 0

The set value would be 175

How do I insert values into the gauge?

How to understand this code?

function init_gauge() {
            if ("undefined" != typeof Gauge) {
                console.log("init_gauge [" + $(".gauge-chart").length + "]"), console.log("init_gauge");
                var a = {
                    lines: 12,
                    angle: 0,
                    lineWidth: .4,
                    pointer: {
                        length: .75,
                        strokeWidth: .042,
                        color: "#1D212A"
                    },
                    limitMax: "false",
                    colorStart: "#1ABC9C",
                    colorStop: "#1ABC9C",
                    strokeColor: "#F0F3F3",
                    generateGradient: !0
                };
                if ($("#chart_gauge_01").length)
                    var b = document.getElementById("chart_gauge_01"),
                    c = new Gauge(b).setOptions(a);

                if ($("#gauge-text").length &&
                      (c.maxValue = 6e3, c.animationSpeed = 32, c.set(1690), c.setTextField(document.getElementById("gauge-text"))),
                      $("#chart_gauge_02").length
                   )

                    var d = document.getElementById("chart_gauge_02"),
                    e = new Gauge(d).setOptions(a);

                $("#gauge-text2").length && (e.maxValue = 9e3, e.animationSpeed = 32, e.set(2400), e.setTextField(document.getElementById("gauge-text2")))
            }
        }

What does this 6a3 mean? I’ve changed some things, but I still don’t understand this code right.

inserir a descrição da imagem aqui

javascript jquery chart

  • fear of the name of these variables, a, b, c...

  • you have the gauge link to make available?

1 answer

1


Here is an explanation of how to use the gauge.

var target = document.getElementById('foo'); // Elemento onde o gauge deve ser criado
var gauge = new Gauge(target).setOptions(opts); // Criar gauge
gauge.maxValue = 200; // Valor maximo
gauge.setMinValue(0);  // Valor minimo
gauge.set(175); // Valor a ser exibido

When you use the new Gauge, you pass as parameter the HMTL element where the graph will be created. Using the setOptions method, you pass an object with the chart settings as a parameter. To set the values, after creating the gauge, you use the methods minValue, maxValue, (initial and final values) and set, to display the value you want.

Here is a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GaugeJS</title>
</head>
<body>
    <h1>GaugeJS</h1>
    <canvas id="foo" style="width: 380px; height: 150px"></canvas>
    <script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
    <script type="text/javascript">
	var opts = {
		angle: 0, 
		lineWidth: 0.44,
		radiusScale: 1, // Raio relativo
		pointer: {
		  length: 0.6, // // Relativo ao raio do Gauge
		  strokeWidth: 0.035, // Largura do traço
		  color: '#000000' // Cor do ponteiro
		},
		limitMax: false,     // Se false, valor maximo aumenta automaticamente se valor > valor maximo
		limitMin: false,     // Se true, o valor mínimo será fixo
		colorStart: '#1ABC9C',   // Cores
		colorStop: '#1ABC9C',    
		strokeColor: '#F0F3F3',  
		generateGradient: true,
		highDpiSupport: true,  
		
	};
	var target = document.getElementById('foo'); // Elemento onde o gauge deve ser criado
	var gauge = new Gauge(target).setOptions(opts); // Criar gauge
	gauge.maxValue = 200; // Valor maximo
	gauge.setMinValue(0);  // Valor minimo
	gauge.animationSpeed = 32; // Velocidade da animacao
	gauge.set(175); // Valor a ser exibido
	</script>
</body>
</html>

Browser other questions tagged javascript jquery chart

You are not signed in. Login or sign up in order to post.