Gauge will not become responsive

[russellharrower]

Hi, I am having a little issue, with the gauge not wanting to be responsive, I am using Bootstrap and I have add the following to the CSS

canvas {
width: 100%;
height: auto;
}

and also this to the JS part

scaleOverride : true,

Now I don't know if your script support this function, but what happens is that the gauge completely gets removed from the page.

If you can help that be great

[llagit]

I have the same problem: is there any solution?? thankyou...

[rodo008]

Yes, i found a solution:

Add style width 100%

   <canvas style="width:100%;" class="canvas-preview" ></canvas>
  <div class="preview-textfield" style="font-size: 41px;"></div>

Remove the "style" attribute after you render the control:

 var gauges = document.getElementsByClassName("canvas-preview");
                        for (var i = 0; i < gauges.length; i++) {
                            var el = gauges[i];
                            var gauge = new Gauge(el).setOptions(opts);
                            gauge.setTextField(el.nextElementSibling);
                            gauge.animationSpeed = 32;

                            var max = parseFloat(el.attributes["data-max"].value);
                            var value = parseFloat(el.attributes["data-val"].value);

                            el.removeAttribute("style");

                            if (value > max) {
                                max = value;
                            }

                            gauge.maxValue = max;
                            gauge.set(value);
                        }

It's a little bit hack

[EmilMoe]

This way it becomes very ugly

[rodo008]

you can suggered any solution then? greetings.

[EmilMoe]

Sorry for my short answer, yes I will. But I'm still struggling how. My problem is it gets pixelated. I was trying to ask the same question on Stackoverflow but they so often waste time by telling people they ask wrong. But I take your punch back as a fair one, my comment was too short. I will when I have something.

[rodo008]

no problem my friend, I'd searched anywhere without success. you are skype account? for chat and show you how It worked. Maybe we can get any solution together.

Grettings

[EmilMoe]

I have managed to make it 100% responsive now, only with a little bit of lag allowing it to be redrawn. My solution is made in Vue.js, but I will try to explain it without Vue.

I hope this can help you :-)

The concept

Every time the screen resizes the canvas needs to be redrawn and sizes must be set as HTML attributes for it to be drawn properly.

This solution dont' take into account if you resize elements with Javascript, in that case you need to redraw it manually.

The code

I have not refactored my code here, so it's a bit dirty:

put the canvas into a div

<div id="gaugeContainer">
  <canvas id="gauge"></canvas>
</div>

Have a function to draw it

function draw() {
                var width  = document.getElementById('gaugeContainer').offsetWidth;
                var height = width / 2;
                document.getElementById('gauge').setAttribute('width', width +'px');
                document.getElementById('gauge').setAttribute('height', height +'px');
                var options = {}; 
                var gauge = new Gauge(document.getElementById('gauge')).setOptions(options);
                document.getElementById('gauge').maxValue = 100;
                document.getElementById('gauge').set(60);
}

And a function to redraw it

var timeoutHandle = null;

function redraw() {
                document.getElementById('gauge').getContext('2d').save();
                document.getElementById('gauge').getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
                document.getElementById('gauge').getContext('2d').clearRect(0, 0, document.getElementById('gauge').getContext('2d').canvas.width, document.getElementById('gauge').getContext('2d').canvas.height);
                document.getElementById('gauge').getContext('2d').restore();

                if (timeoutHandle)
                    window.clearTimeout(timeoutHandle);

               timeoutHandle = window.setTimeout(draw, 250);
}

On page load, make sure to draw it and add an event listener for window resize.

            draw();
            window.addEventListener('resize', redraw);

Finally have this CSS that prevents it from messing up your grid system

    canvas {
        max-width: 100%;
    }

[haniegol]

hi,
The solution was greate ,
But i did not know what is Gauge that you use it in "new Gauge..."

thank you

[adadgio]

Hey guys,

Just a suggestion/fix, which works for me without any additional coding:

canvas#da-gauge {
width: 100% !important;
height: auto !important;
}

[harry0725]

@adadgio 's answer works for me!

[rvillablanca]

Thanks @adadgio

[albertogomezikusi]

I have managed to make it 100% responsive now, only with a little bit of lag allowing it to be redrawn. My solution is made in Vue.js, but I will try to explain it without Vue.

I hope this can help you :-)

The concept

Every time the screen resizes the canvas needs to be redrawn and sizes must be set as HTML attributes for it to be drawn properly.

This solution dont' take into account if you resize elements with Javascript, in that case you need to redraw it manually.

The code

I have not refactored my code here, so it's a bit dirty:

put the canvas into a div

<div id="gaugeContainer">
  <canvas id="gauge"></canvas>
</div>

Have a function to draw it

function draw() {
                var width  = document.getElementById('gaugeContainer').offsetWidth;
                var height = width / 2;
                document.getElementById('gauge').setAttribute('width', width +'px');
                document.getElementById('gauge').setAttribute('height', height +'px');
                var options = {}; 
                var gauge = new Gauge(document.getElementById('gauge')).setOptions(options);
                document.getElementById('gauge').maxValue = 100;
                document.getElementById('gauge').set(60);
}

And a function to redraw it

var timeoutHandle = null;

function redraw() {
                document.getElementById('gauge').getContext('2d').save();
                document.getElementById('gauge').getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
                document.getElementById('gauge').getContext('2d').clearRect(0, 0, document.getElementById('gauge').getContext('2d').canvas.width, document.getElementById('gauge').getContext('2d').canvas.height);
                document.getElementById('gauge').getContext('2d').restore();

                if (timeoutHandle)
                    window.clearTimeout(timeoutHandle);

               timeoutHandle = window.setTimeout(draw, 250);
}

On page load, make sure to draw it and add an event listener for window resize.

            draw();
            window.addEventListener('resize', redraw);

Finally have this CSS that prevents it from messing up your grid system

    canvas {
        max-width: 100%;
    }

I have a question, Are you not filling the HTML page with a lot of Gauges everytime you resize the window instead of destroying first and create it again?

[jose2007kj]

thanks @adadgio it fixed the issue for me

[Vemb]

The gauge becomes blurry when the canvas element is scaled with CSS. Is there a better alternative?