Gauge chart plugin using jQuery

In this article, we will understand how to use Gauge chart plugin using jQuery. Gauge chart jQuery plugin is used to a create minimal, clean, smooth gauge meters to represent percentage values on the webpages.

Following are the various examples of Gauge chart plugin using jQuery.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Gauge chart plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>       
        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
<style>
.cutout {
    background-color: #ffffff;
    position: absolute;
    pointer-events: none;
}
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
html, body {  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
body {  
  justify-content: space-around;  
  align-items: centre;  
  align-content: center;  
}  
h1 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}
.ecircle {
	top: 0;
	left: 0;
	background: linear-gradient(to right, #ff2f00,#fff9a4,#fff7aa,rgb(255, 245, 125),#FFF8BD,#50B663,#99D389);
	background: linear-gradient(to right, #ff2f00 , #ffff40,rgb(255, 246, 132),rgb(103, 189, 14),rgb(135, 197, 120));
	background: linear-gradient(to right, red , yellow,rgb(255,250,188),rgb(152,212,140),rgb(152,207,139));
	position: absolute;
	transition: background-color 0.2s ease-in-out;
	opacity: 0.9;
}
.CircularPoint { 
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    z-index: 20;
	cursor: pointer;
}
.point-red {
	background: #f14f24;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 3px white, inset 0 2px 0 rgba(0,0,0,.08), 0 0px 0 6px rgba(0,0,0,.05);
}
.point-green {
	background: #50B663;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 4px white, 0 0 0 5px #50B663, inset 0 0px 0 rgba(0,0,0,.08), 0 0px 0 7px rgba(0,0,0,.05);
}
.point-grass {
	background: #7BD118;
	box-shadow: 0px 1px 6px white;
	box-shadow: 0 0 0 4px white, inset 0 0px 0 rgba(0,0,0,.08), 0 0px 0 7px rgba(0,0,0,.05);
}
.CircleData {
	position: absolute;
}
 .CircleGood {
	position: absolute;
}
.CircleBad {
	position: absolute;
}
.CircleLine {
	position: absolute;
}
.CircleData {
	left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	color: grey;
	font-weight: bold;
}
.CircleGood {
	bottom: 0;
	right: 0;
	font-size: 15px;
	color: grey;
}
.CircleBad {
	bottom: 0;
	left: 0;
	font-size: 15px;
	color: grey;
}
.CircleLine {
	position: absolute;
	height: 1px;
	background: #ebece8;
	width: 100%;
	left: 0;
    z-index: 10;
}
</style>
<body>
<h1> Example </h1>
<h2> Gauge chart plugin using jQuery </h2>
<div id = "Container" style = "margin:50px;">
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
    var Circle1;
	$(document).ready(function() {
        var options = {
            Radius:         150,
            LineWidth:      10,
            BottomSpace:    20,
            animated:       true,
            AnimationSpeed: 20
        };
        var points = [
            {ID: '1', Percentage: 10, Class: 'point-red'},
            {ID: '2', Percentage: 50, Class: 'point-green'},
            {ID: '3', Percentage: 60, Class: 'point-grass'},
            {ID: '4', Percentage: 85, Class: 'point-green'},
            {ID: '5', Percentage: 20, Class: 'point-red'}
        ];
		Circle1 = $('#Container').CircleChart(options, points);
	});
</script>
;(function( $ ){
    $.fn.CircleChart = function (options, points, callback) {
        var ContainerElement = this;
        var $options = {
            Radius: 	    350,
            ID: 		    Math.random().toString(36).replace(/[^a-z]+/g, ''),
            LineWidth:	    15,
            BottomSpace:    20,
            animated:       false,
            AnimationSpeed: 30,
            LowWord:        'BAD',
            HighWord:       'GOOD',
            Value:          '25%',
            callback:	    function() { }
        };
        if (typeof ContainerElement === 'undefined' || !ContainerElement || $(ContainerElement).length < 1 ) {
            console.log('Conatiner Element Not Found!');
            return 0;
        };
        if (typeof options == 'object') {
            if (typeof options.ID != 'undefined')           {$options.ID=options.ID};
            if (typeof options.Radius != 'undefined')       {$options.Radius=options.Radius};
            if (typeof options.LineWidth != 'undefined')    {$options.LineWidth=options.LineWidth};
            if (typeof options.BottomSpace != 'undefined')  {$options.BottomSpace=options.BottomSpace};
            if (typeof options.animated != 'undefined')     {$options.animated=options.animated};
            if (typeof options.AnimationSpeed != 'undefined'){$options.AnimationSpeed=options.AnimationSpeed};
            if (typeof options.LowWord != 'undefined')      {$options.LowWord=options.LowWord};
            if (typeof options.HighWord != 'undefined')     {$options.HighWord=options.HighWord};
            if (typeof options.Value != 'undefined')        {$options.Value=options.Value};
        }
        else {
            if (typeof options != 'undefined') {
                console.log('Options must be an object!!');
            }
        }
        if (typeof callback != 'undefined') {$options.callback=callback};
        var CircleHTML = ''+
            '<div style="height: '+($options.Radius+$options.BottomSpace)+'px; width: '+($options.Radius*2)+'px; position: relative; opacity:0;" id="'+$options.ID+'">'+
            '<div class = "ecircle"></div>'+
            '<div class = "cutout"></div>'+
            '<div class = "points">'+
            '</div>'+
            '<span class = "CircleData">'+$options.Value+'</span>'+
            '<span class = "CircleBad">'+$options.LowWord+'</span>'+
            '<span class = "CircleGood">'+$options.HighWord+'</span>'+
            '<div class = "CircleLine"> </div>'+
            '</div>';
        $(ContainerElement).css({'position':'relative'});
        $(ContainerElement).html(CircleHTML);
        $('#'+$options.ID+' .ecircle', ContainerElement).css({
            'width':			($options.Radius*2)+'px',
            'height': 			$options.Radius+'px',
            'border-radius':	($options.Radius*2)+'px '+($options.Radius*2)+'px 0 0'
        });
        $('#'+$options.ID+' .cutout', ContainerElement).css({
            'width': 			(($options.Radius*2)-($options.LineWidth*2))+'px',
            'height': 			($options.Radius-$options.LineWidth)+'px',
            'left':				$options.LineWidth,
            'bottom': 			$options.BottomSpace+1,
            'border-radius':	(($options.Radius*2)-$options.LineWidth)+'px '+(($options.Radius*2)-$options.LineWidth)+'px 0 0'
        });
        $('#'+$options.ID+' .CircleLine', ContainerElement).css({
            'bottom': 			$options.BottomSpace
        });
        $('#'+$options.ID, ContainerElement).css({
            'opacity': 1
        });
         var AddCirclePoint = function (ElementID, CssClass, Percentage) {
            $('#'+$options.ID+' .points').append('<span class="CircularPoint '+CssClass+'" id="'+ElementID+'"> </span>');
            if($options.animated == false) {
                SetCirclePosition(ElementID, AnimationPercentage);
            }
            else {
                var AnimationPercentage = -1;
                var Interval = setInterval(function() {
                    if(AnimationPercentage<Percentage) {
                        AnimationPercentage++;
                        SetCirclePosition(ElementID, AnimationPercentage);
                    }
                    else {
                        clearInterval(Interval);
                    }
                },$options.AnimationSpeed);
            }
        }; 
        this.MovePoint = function (ID, NewPercentage) {
            var ActualPercentage = $('#'+$options.ID+' #'+ID).attr('data-Percentage');
            var Interval = setInterval(function() {
                if(ActualPercentage!=NewPercentage) {
                    if(NewPercentage>ActualPercentage)  {
                        ActualPercentage++;
                    }
                    else {
                        ActualPercentage--;
                    }
                    SetCirclePosition(ID, ActualPercentage);
                }
                else {
                    clearInterval(Interval);
                }
            },$options.AnimationSpeed);
        };
        this.ChangeValue = function (NewValue) {
            $('#'+$options.ID+' .CircleData').text(NewValue);
        };
        this.AddCirclePoint = AddCirclePoint;
        var SetCirclePosition = function(ElementID, Percentage){
            var OriginalPercentage = Percentage;
            Percentage = Percentage-100;
            if(Percentage<0){Percentage=Percentage*-1;}
            var degreeangle = Percentage * 180 / 100;
            var thetaangle  = degreeangle * Math.PI / 180;
            var x 		    = $options.Radius * Math.cos(thetaangle);
            var y 		    = $options.Radius-($options.Radius * Math.sin(thetaangle));
            if(x>0){x=x+$options.Radius; x=x-($options.LineWidth/2)-4;}
            else{x=x*-1;x=$options.Radius-x; x=x+($options.LineWidth/2)-4;}       if((degreeangle>=0&�reeangle<2)||(degreeangle<=180&�reeangle>178)){ y = y -8; }
            $('#'+$options.ID+' #'+ElementID).css({
                'left': x,
                'top': 	y
            });
            $('#'+$options.ID+' #'+ElementID).attr('data-Percentage', OriginalPercentage);
        };
        points.forEach(function(point) {
            AddCirclePoint(point.ID, point.Class, point.Percentage);
        });
        $options.callback;
        return this;
    }
})( jQuery );
</script>
</body>
</html>

Explanation:

In the above example, we have created a Gauge chart plugin using jQuery.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Gauge chart plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>       
        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
<style>
* {
  box-sizing: border-box;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999;
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
html, body {
  text-align: center;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  justify-content: space-around;
  align-items: centre;
  align-content: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999;
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
body {
  background-image: linear-gradient(140deg, #212629, #395467);
  min-height: 100vh;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  position: relative;
  padding-top: 80px;
}
a {
  color: #5f89a7;
  text-decoration: none;
}
.color-red {
  stop-color: #e23131;
}
.color-yellow {
  stop-color: #fbe500;
}
.color-green {
  stop-color: #25cd6b;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #26323a;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 3px;
  word-spacing: 4px;
}
.footer a {
  letter-spacing: 2px;
  word-spacing: 2px;
}
.main {
  max-width: 1200px;
  margin: 0 auto;
}
.main__title {
  text-align: center;
  font-size: 48px;
}
.gradient-mask {
  visibility: hidden;
}
.button {
  position: absolute;
  right: 40px;
  top: 40px;
  border: 2px solid #fff;
  background-color: #26323a;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}
.button:active {
  transform: translateY(3px);
  outline: 0;
}
.button:hover, .button:focus {
  outline: 0;
  background: linear-gradient(-140deg, #212629, #395467);
}
.gauge-container {
  padding: 20px;
  margin-top: 80px;
  display: flex;
  justify-content: space-around;
}
.gauge {
  height: 220px;
  width: 300px;
}
.gauge .dxg-range.dxg-background-range {
  fill: url(#gradientGauge);
}
.gauge .dxg-line {
  transform: scaleX(1.04) scaleY(1.03) translate(-4px, -4px);
}
.gauge .dxg-line path:first-child {
  display: none;
}
.gauge .dxg-line path:last-child {
  display: none;
}
.gauge .dxg-line path:nth-child(2) {
  stroke: #ed811c;
}
.gauge .dxg-line path:nth-child(6) {
  stroke: #ed811c;
}
.gauge .dxg-line path:nth-child(3) {
  stroke: #a7db29;
}
.gauge .dxg-line path:nth-child(5) {
  stroke: #a7db29;
}
.gauge .dxg-line path:nth-child(4) {
  stroke: #25cd6b;
}
.gauge .dxg-elements text:first-child {
  transform: translate(19px, 13px);
}
.gauge .dxg-elements text:last-child {
  transform: translate(-27px, 14px);
}
.gauge .dxg-value-indicator path {
  transform: scale(1.2) translate(0, -5px);
  transform-origin: center center;
}
.gauge .dxg-value-indicator .dxg-title {
  text-transform: uppercase;
}
.gauge .dxg-value-indicator .dxg-title text:first-child {
  transform: translateY(5px);
}
.gauge .dxg-value-indicator .dxg-spindle-border:nth-child(4) {
  transform: translate(0, -109px);
}
.gauge .dxg-value-indicator .dxg-spindle-hole:nth-child(5) {
  transform: translate(0, -109px);
}
.gauge .dxg-value-indicator .dxg-spindle-hole {
  fill: #26323a;
}
</style>
<body>
<main class = "main">
  <h1> Example </h1>
<h2> Gauge chart plugin using jQuery </h2>
  <div class = "gauge-container">
    <div class = "gauge">  </div>
    <div class = "gauge">  </div>
  </div>
</main>
<svg width = "0" height = "0" version = "1.1" class = "gradient-mask" xmlns = "http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id = "gradientGauge">
        <stop class = "color-red" offset = "0%"/>
        <stop class = "color-yellow" offset = "17%"/>
        <stop class = "color-green" offset = "40%"/>
        <stop class = "color-yellow" offset = "87%"/>
        <stop class = "color-red" offset = "100%"/>
      </linearGradient>
  </defs>  
</svg>
<script>
$(function() {
  class GaugeChart {
    constructor(element, params) {
      this._element = element;
      this._initialValue = params.initialValue;
      this._higherValue = params.higherValue;
      this._title = params.title;
      this._subtitle = params.subtitle;
    }
    _buildConfig() {
      let element = this._element;
      return {
        value: this._initialValue,
        valueIndicator: {
          color: '#fff'
        },
        geometry: {
          startAngle: 180,
          endAngle: 360
        },
        scale: {
          startValue: 0,
          endValue: this._higherValue,
          customTicks: [0, 250, 500, 780, 1050, 1300, 1560],
          tick: { 
            length: 8
          },
          label: {
            font: {
              color: '#87959f',
              size: 9,
              family: '"Open Sans", sans-serif'
            }
          }
        },
        title: {
          verticalAlignment: 'bottom',
          text: this._title,
          font: {
            family: '"Open Sans", sans-serif',
            color: '#fff',
            size: 10
          },
          subtitle: {
            text: this._subtitle,
            font: {
              family: '"Open Sans", sans-serif',
              color: '#fff',
              weight: 700,
              size: 28
            }
          }
        },
        onInitialized: function() {
          let currentGauge = $(element);
          let circle = currentGauge.find('.dxg-spindle-hole').clone();
          let border = currentGauge.find('.dxg-spindle-border').clone();
          currentGauge.find('.dxg-title text').first().attr('y', 48);
          currentGauge.find('.dxg-title text').last().attr('y', 28);
          currentGauge.find('.dxg-value-indicator').append(border, circle);
        }   
      }
    }
    init() {
      $(this._element).dxCircularGauge(this._buildConfig());
    }
  }
  $(document).ready(function () {   
    $('.gauge').each(function(index, item) {
      let params = {
        initialValue: 780,
        higherValue: 1560,
        title: `Temperature ${index + 1}`,
        subtitle: '780 ?C'
      };
      let gauge = new GaugeChart(item, params);
      gauge.init();
    });
    $('#random').click(function() {
      $('.gauge').each(function(index, item) {
        let gauge = $(item).dxCircularGauge('instance');
        let randomNum = Math.round(Math.random() * 1560);
        let gaugeElement = $(gauge._$element[0]);
        gaugeElement.find('.dxg-title text').last().html(`${randomNum} ?C`);
        gauge.value(randomNum);
      });
    });
  });
});
</script>
</body>
</html>

Explanation:

In the above example, we have created a Gauge chart plugin using jQuery.

Output:

Following is the output of this example.

Next TopicHorizontal Scrollable Timeline Plugin - jTimeline

← prev next →