JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>

<h2>
Choose Gage
</h2>
<button class="btn btn-info" id ="button1" type="button"> <span class="glyphicon glyphicon-earphone"></span> </button>

<button id="button">Gauge 1</button>

<button id="button2">Gauge 2</button>
<div class="gauge1">
<h2>
Gauge 1
</h2>
<div id="gauge1" class="200x160px"></div>
</div>
<div class="gauge2">
<h2>
Gauge 2
</h2>
<div id="gauge2" class="200x160px"></div>
</div>

JavaScript

$( document ).ready( function() {

//Let the gauge load and then hide it.
 var d = new JustGage({
    id: "gauge1",
    value: 67,
    min: 0,
    max: 100,
    title: "Visitors"
  });
   var b = new JustGage({
    id: "gauge2",
    value: 91,
    min: 0,
    max: 100,
    title: "Visitors"
  });
    $('.gauge1, .gauge2').hide();
$( "#button1" ).on( "click" , function() { 
   $('.gauge1').fadeIn();
    $('.gauge2').hide();
  } ) ;
   
    $( "#button2" ).on( "click" , function() { 
   $('.gauge2').fadeIn();
    $('.gauge1').hide();
   } ) ;
   
   
  } ) ;