gauge.js: Gauge js does not work on 2nd tab of bootstrap

I am able to display a gauge in the first tab using bootstrap but the guage does not appear in tab 2. I am using gauge.js

Here is my code. On the second tab, I have an element with ID id=“foo” but the gauge does not display on that tab.

Below is an html code that displays the gauge but only on tab 1


  <!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>APP</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 </head>
 <body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>


<div class="bd-example bd-example-tabs">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active show" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>

  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p>This is Tab 1 - Guage js works here</p>

       <canvas width="300" height="205" id="foo" style="width: 260px; height: 150px;"></canvas>


    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <p>Guage js does not work in this tab</p>

       <canvas width="300" height="205" id="foo" style="width: 260px; height: 150px;"></canvas>

    </div>

  </div>
</div>

<script type="text/javascript">

var opts = {
  angle: 0.15, // The span of the gauge arc
  lineWidth: 0.44, // 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

};
var target = document.getElementById('foo'); // your canvas element
var 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(1250); // set actual value

</script>


 </body>
</html>

About this issue

Original URL
State: open
Created 6 years ago
Comments: 16

Most upvoted comments

Okay @Basit00 @aqeel-ahmad-plc , I kinda fixed the issue by tweaking some codes. The issue is that the ‘Gauge’ function in the guage.js file gets the height and width of the canvas by fetching the HTML DOM of the canvas; however, the function gets 0 height and width when the canvas DOM in the tab which is inactive (invisible). That’s why the chart is not displayed on the tab. My solution is to add param to the ‘gauge’ in your custom JS file to parse the width and height, and add another param to the ‘Gauge’ function and comment out the two lines which include ‘clientHeight’ and ‘clientWidth’ in the guage.js file. I will share my code here for better understanding.

Step 1: Add params (height and width – In my case, I assigned 150 for height and 380 for width) to the ‘gauge’ variable in your custom JS file.

Original Code

var gauge = new Gauge(target).setOptions(opts);

Modified Code

var gauge = new Gauge(target, 150, 380).setOptions(opts);

Step 2: Edit the the ‘Gauge’ function in the ‘guage.js’ file

Original Code

    function Gauge(canvas) {
      var h, w;
      this.canvas = canvas;
      Gauge.__super__.constructor.call(this);
      this.percentColors = null;
      if (typeof G_vmlCanvasManager !== 'undefined') {
        this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
      }
      this.ctx = this.canvas.getContext('2d');
      h = this.canvas.clientHeight;
      w = this.canvas.clientWidth;
      this.canvas.height = h;
      this.canvas.width = w;
      this.gp = [new GaugePointer(this)];
      this.setOptions();
    }

Modified Code

    function Gauge(canvas, h, w) {
      var h, w;
      this.canvas = canvas;
      Gauge.__super__.constructor.call(this);
      this.percentColors = null;
      if (typeof G_vmlCanvasManager !== 'undefined') {
        this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
      }
      this.ctx = this.canvas.getContext('2d');
      // h = this.canvas.clientHeight;
      // w = this.canvas.clientWidth;
      this.canvas.height = h;
      this.canvas.width = w;
      this.gp = [new GaugePointer(this)];
      this.setOptions();
    }

Please make sure comment out ‘clientHeight’ and ‘clientWidth’.

Please try this method and update me how it goes. Hopefully, this will solve your issues.

bonyoobon on Apr 8, 2020

Hello, I had the same issue. I fixed it by adding the code below:

//Give your tabs unique ID (tabID) and trigger the gauge creation on show of the tab: $('#tabID').on('shown.bs.tab', function () { GaugeRedraw(); // my own function for drawing the gauge });

also in the canvas element I added the width and height inline because it kept turning it to 0 automatically <canvas width="240" height="205" id="myGauge" style=" width: 240px; height:205px;"></canvas>

dellitsa on Mar 13, 2018