<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-6 meter-container-inner"> <center> <b>Facebook(FB)</b> <hr style="width: 75%; margin: 3px 0 10px;"> <!-- long --> <input class="long-knob" value="39"> <!-- short --> <div style="margin-top: -190px;"> <input class="short-knob" value="61"> <div class="meter-cover"></div> <div class="meter-digit"> <div>SSI</div> <div style="font-size: 24px; margin-top: 9px;">-1.56</div> </div> </div> <div style="font-size: 12px;"> <div style="margin-bottom: 8px;"> <div class="text-left meter-ind-buy bullish-color">Buy:<br>39%</div> <div style="display: inline-block;" class="text-right bearish-color">Sell:<br>61%</div> </div> <span class="label label-bearish text-capitalize"><span class="hidden-sm hidden-md">Signal: </span>bearish</span> <div style="margin-top: 8px;"> <span style="color: #a1a6a9;">% Chg. Over Interest:<br></span> <span>1.1%</span> </div> </div> </center> </div> </div> </div>

.meter-container-inner { border-top: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px 0; } .meter-cover { width: 0; height: 0; border-left: 58px solid transparent; border-right: 54px solid transparent; border-bottom: 42px solid #fff; margin-top: -146px; margin-left: 0px; position: relative; padding: 0 20px; } .meter-digit { text-align: center; margin-top: -64px; position: relative; } .meter-ind-buy { display: inline-block; margin-right: 22px; }

<script> $(document).ready(function() { $(".long-knob").knob({ 'fgColor':"#56b4eb", 'bgColor':"#eaeaed", 'rotation':"anticlockwise", 'readOnly':true, 'displayInput':false, 'thickness': .16, 'width': 116, 'max': 300 }); $(".short-knob").knob({ 'fgColor':"#fe6981", 'bgColor':"#eaeaed", 'rotation':"clockwise", 'readOnly':true, 'displayInput':false, 'thickness': .2, 'width': 88, 'max': 300 }); }) </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>