Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gauge js does not work on 2nd tab of bootstrap

See original GitHub issue

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>

Issue Analytics

State:
Created 6 years ago
Comments:15

Top GitHub Comments

3reactions

bonyooboncommented, Apr 8, 2020

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.

3reactions

dellitsacommented, Mar 13, 2018

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>