Responsive gauge

[PeterSawyer]

Great gauges :-)

I have tried to move some gauges into Boostrap's responsive row col-md-x elements and find they do not render at all. Is there a guide to doing this? Or is this not possible?

I am using Angular 1.5.8 and using canvas-gauges v2.1.2 with html5 canvas data attributes bound to controller scope variables.

Thanks in advance Peter

[Mikhus]

Gauges do not react to source element width and height change, but react to modification of data-width, data-height attributes... that is why it is not working... So you have to add piece of code which will change those attributes on window resize. And I'll add this feature in the next release, so it will become truly responsive

[PeterSawyer]

@Mikhus a quick update. Great news next version will be responsive.

After more testing I just want to clarify my issue. The gauges for me that do not render at all are gauges that are html marked up on a tabpage which is activated as an Angular ng-view.

These work if they are rendered as straight canvas in the tabpage ng-view, but when wrapped in row and col-md-x they do not render at all.

Does this make sense?

I have been trying to create a codepen of sorts and will update if successful.

When inspecting the DOM I get a difference between the 2

This one is works but is not within row col-md-x <canvas id="gaugeSystemLoad" data-type="radial-gauge" data-width="250" data-height="250" data-min-value="0" data-max-value="100" data-value="1.62" data-units="Percent" data-title="System Load" data-major-ticks="0,10,20,30,40,50,60,70,80,90,100" data-minor-ticks="5" data-stroke-ticks="true" data-highlights="[{&quot;from&quot;: 80, &quot;to&quot;: 100, &quot;color&quot;: &quot;rgba(200, 50, 50, .75)&quot;}]" data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow" data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true" data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear" class="ng-scope" width="250" height="250" style="width: 250px; height: 250px;">Sorry, your browser doesn't support the &lt;canvas&gt; element.</canvas>

This one does not render, note it is missing dynamically added attributes that the above one has <canvas id="gaugeTest1" data-type="radial-gauge" data-width="250" data-height="250" data-min-value="0" data-max-value="100" data-value="75" data-units="Percent" data-title="System Load" data-major-ticks="0,10,20,30,40,50,60,70,80,90,100" data-minor-ticks="5" data-stroke-ticks="true" data-highlights="[{&quot;from&quot;: 80, &quot;to&quot;: 100, &quot;color&quot;: &quot;rgba(200, 50, 50, .75)&quot;}]" data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow" data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true" data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear">Sorry, your browser doesn't support the &lt;canvas&gt; element.</canvas>

[PeterSawyer]

Have been able to get a codepen working to demonstrate the issue.

The gauges for me that do not render at all are gauges that are html marked up on a tabpage which is activated as an Angular ng-view.

These work if they are rendered as straight canvas in the tabpage, but when wrapped in DIV they do not render at all.

Above comments with surrounded canvas with div with class row and col-md-x are irrelevant, any DIV will cause the issue.

https://codepen.io/petersawyer/pen/GrxMxr/

TAB2 Page - fails (with div) TAB3 Page - works (no div)

[Mikhus]

@PeterSawyer thank you very mush for such detailed feedback! I will take closer look. I'm a bit busy these days, but will come back to this soon!

[iltafhussain352]

Mikhus when will you release the next version of gauge.js.... if you are busy please just give us that piece of code of which are talking about. to have responsive gauge. thanks...

[OgreTransporter]

I have a responsive design with a lot of gauges on it. You can find the design code on http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/.

            <div class="box">
              <div class="boxInner" id="box1">
                <p style="color:#000; margin: 0" id="head1">Temperature A1</p>
                <canvas id="gaugeElement1"
                        data-type="linear-gauge"
                        data-min-value="0"
                        data-max-value="1000"
                        data-exact-ticks="true"
                        data-major-ticks="0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000"
                        data-minor-ticks="50"
                        data-highlights="0"
                        data-color-bar-progress="#00f"
                        data-bar-begin-circle="false"
                        data-units="%"
                        data-width="100"
                        data-height="200"
                        data-factor-x="0.5"
                        data-factor-y="1.0"
                        ></canvas>
              </div>
            </div>

To resize the canvas elements I use the following JS code. I know, it's not the best but it's working at the moment for me:

function resizeCanvas()
{
  $('.boxInner').each(function() {
    var nr = $(this)[0].id.substring(3, $(this)[0].id.length);
    var bw = $(this).width();
	var bh2 = bw - $('#head' + nr).height();
	var gaugeElement = $('#gaugeElement' + nr);
	if(gaugeElement.length == 1)
	{
	  var fx = parseFloat(('undefined' !== typeof gaugeElement[0].getAttribute('data-factor-x')) ? gaugeElement[0].getAttribute('data-factor-x') : '1.0');
	  var fy = parseFloat(('undefined' !== typeof gaugeElement[0].getAttribute('data-factor-y')) ? gaugeElement[0].getAttribute('data-factor-y') : '1.0');
	  gaugeElement[0].setAttribute('data-width', bw * fx);
	  gaugeElement[0].setAttribute('data-height', bh2 * fy);
	}
  });
}
$(window).resize(function(){
  resizeCanvas();
});

$(document).ready(function(){
  resizeCanvas();
});

[iltafhussain352]

nice work OgreTransporter .. 100% working for me..thanks.

[PeterSawyer]

I tried to implement @OgreTransporter solution but still same problem with above codepen "fails (with div)".

Thanks anyway and sorry for the slow response, was busy on other projects.

[iltafhussain352]

try this one.. this is same as above but the "data-width" and "data-height" attributes are removed.

Temperature A1

[yashodhank]

any progress in this direction?

[adadgio]

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

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

[RobertSmart]

That CSS seems to scale the canvas without redrawing it.

[yashodhank]

I am unable to make it work..

[microgenios]

Try this code:

`

  if(!isNaN(fx))
  {
    gaugeElement[0].setAttribute('data-width', bw * fx);
    gaugeElement[0].setAttribute('data-height', bh2 * fy);
  } else {
	gaugeElement[0].setAttribute('data-width', bw);
    gaugeElement[0].setAttribute('data-height',bh2);  
  }
}

}); } $(window).resize(function(){ resizeCanvas(); });

$(document).ready(function(){ resizeCanvas(); }) `

[pjc2007]

Similar to this, I wanted to define my page using css grid, assign each canvas within the grid, and then just have the gauge draw to 100% height/width of the canvas as sized by css grid. However, at the moment, as soon as I add the gauge, it resizes the canvas.

[OgreTransporter]

@pjc2007 You have to measure the grid size and then create the gauge by JS code with the measured size.