Javascript Gauge Style Range Control With SVG

Submitted by rinvizle on Wednesday, August 31, 2016 - 15:55.
This tutorial will show you have to create a Gauge Application using Javascript. Javascript Gauge Style Range Control With SVG application is a handy JavaScript plugin for generating and animating nice and clean gauges and it has a dial and svg component to be rendered within any browsers. Gauge application that has a Javascript plugin is visualize to any values into touchable, customizable, vector shaped and gauge-style dial graph or a great alternative to default range input. See the example code below.

Sample Code

Index.html - this is for the main page of the system for displaying the data through html.
  1. <!DOCTYPE html>
  4.         <title>Javascript Gauge Style Range Control With SVG</title>
  5.         <script src="Gauge/gauge.min.js"></script>
  6.         <link rel="stylesheet" media="all" href="Gauge/gauge.min.css">
  7.         <link rel="stylesheet" media="all" href="Gauge/gaugestyle.css">
  8. </head>
  10. <div class="content">
  11. <div class="form">
  12.         <div class="slider">
  13.                 <h2 align="center">Javascript Gauge Style Range Control With SVG</h2><hr/>
  14.                 <p align="center">The range control slider below uses for setting a value method on the first dial below to control it very easily. Likewise, the dial
  15.                 will control the range input by using the changed event that the dial generates on its container element.</p>
  16.                 <div class="slider-labels">0 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  17.                 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp50<span>100</span></div>
  18.                 <input id="slider-example" type="range" min="0" max="100"/>
  19.         </div>
  20. </div>
  21. <div class="pgauge">
  22.         <div class="panel">
  23.                 <span>&nbsp Gain</span>
  24.                 <div id="gain" class="gauge"></div>
  25.         </div>
  26.         <div class="panel">
  27.                 <span>Balance </span>
  28.                 <div id="balance" class="gauge"></div>
  29.         </div>
  30.         <div class="panel">
  31.                 <span>Gain Fill</span>
  32.                 <div id="gain-fill" class="gauge"></div>
  33.         </div>
  34.         <div class="panel">
  35.                 <span>Balance Fill</span>
  36.                 <div id="balance-fill" class="gauge"></div>
  37.         </div>
  38. </div>
  39. </div>
  40. </body>
  41. </html>
Index Javascript script - this is for the calling of the data in every id's to call and creating a value for each gauge.
  1. var gainNotch = document.querySelector('#gain');
  2.         var balanceNotch = document.querySelector('#balance');
  3.         var gainFill = document.querySelector('#gain-fill');
  4.         var balanceFill = document.querySelector('#balance-fill');
  5.  
  6.         var gainNotchDial = new Gauge(gainNotch);
  7.         var balanceNotchDial = new Gauge(balanceNotch, {type:'balance',display:'notch',min:-50,max:50,value:0});
  8.         var gainFillDial = new Gauge(gainFill, {type:'gain',display:'fill'});
  9.         var balanceFillDial = new Gauge(balanceFill, {type:'balance',display:'fill',min:-50,max:50,value:-20,inputId:'unique-id'});
  10.        
  11.         var rangeInput = document.querySelector('#slider-example');
  12.         rangeInput.addEventListener('input', function(e)
  13.         {
  14.                 gainNotchDial.setValue(this.value);
  15.         }, true);
  16.         gainNotch.addEventListener('changed', function(e)
  17.         {
  18.                 rangeInput.value = e.detail;
  19.         });
  20.         gainNotchDial.addEventListener('changed', function(e)
  21.         {
  22.                 console.log('Gauge event triggered with object: ' + JSON.stringify(e));
  23.         });
For the CSS - this css is for the creating of the design or to make it more responsive to the user's eyes.
  1. body {
  2.         font-family:Verdana;}
  3. .content {
  4.         margin-left:500px;
  5.         margin-top: 100px;
  6.         width:515px;
  7.         height: 410px;
  8.         border-bottom:solid 1px;
  9.         border-left:solid 1px;
  10.         border-right:solid 1px;
  11.         background-color:#00e7ff;
  12.         border-radius:10px;
  13.         box-shadow: 3px 3px 1px rgba(50, 50, 50, 0.75);
  14.         }
  15. .form {
  16.         margin-left:-1px;
  17.         width:515px;
  18.         border-top:solid 1px;
  19.         border-left:solid 1px;
  20.         border-right:solid 1px;
  21.         border-radius: 10px;
  22.         }
  23. h2 {
  24.         color:#fff;
  25. }
  26. h3 {
  27.         color:#ffff;
  28. }
  29. .panel {
  30.         float:left;
  31.         padding:15px;
  32.         background-color:#00e7ff;
  33.         }
  34. .gauge {
  35.         width:60px;
  36.         height:60px;
  37.         margin-top:10px;
  38.         }
  39. .pgauge {
  40.         margin-left:68px;
  41.     position:fixed;
  42.         }
  43. .slider {
  44.         width:510px;
  45.         margin:15px 0;
  46.         color:#666666;
  47.         }
  48. .slider input {
  49.         width:100%;
  50.         }
  51. .slider .slider-labels span {
  52.         float:right;
  53.         }
  54. p {
  55.         margin:15px 0;
  56.         width:510px;
  57.         color:#666666;
  58.         }
  59. #gain-notch svg circle.value-background {
  60.         background-color:blue;
  61.         }
  62. #style-4 svg circle.value-background {
  63.         fill:white;
  64.         }
Hope that you learn from this tutorial and don't forget to Like & Share. Enjoy Coding!
Tags
#Javascript
#HTML
svg

Add new comment

About text formats
  • 91 views