jQuery addClass example

Change class name on click in jQuery

by vitormosousa

HTML

<!DOCTYPE html>
<html>
<head>
	<script src="\jquery.min.js"></script>
	<script src="\d3-gauge.js"></script>
	<link rel="stylesheet" href="\style.css">
</head>
<body>
<script>
	setInterval(function() {
	  // Gets ADC value at every one second
	  GetADC();
	}, 1000);

	function GetADC() {
	  var xhttp = new XMLHttpRequest();
          var adc=0;
	  xhttp.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
		adc = Number(this.responseText);
	      	gauges.forEach(function (gauge) {			
			console.log(adc)
	    		gauge.write(adc);
	  		});
	    }
	  };
	  xhttp.open("GET", "/getADC", false);
	  xhttp.send();
	}

	var gauges = [];
	var small =  {
	    size :  100
	  , min  :  0
	  , max  :  50 
	  , transitionDuration : 500

	  , label                      :  'label.text'
	  , minorTicks                 :  4
	  , majorTicks                 :  5
	  , needleWidthRatio           :  0.6
	  , needleContainerRadiusRatio :  0.7

	  , zones: [
	      { clazz: 'yellow-zone', from: 0.73, to: 0.9 }
	    , { clazz: 'red-zone', from: 0.9, to: 1.0 }
	    ]
	};

	function createGauge (opts) {
	  var el = document.createElement('div');
	  el.setAttribute('class', 'gauge-container');
	  document.body.appendChild(el);
	  var g = d3Gauge(el, opts);
	  g.currentValue = g._range / 2;
	  gauges.push(g);
	}

	createGauge({ clazz: 'simple', label:  'Temperature' });
	createGauge({ clazz: 'grayscale', label:  'Pressure' });
</script>

</body>
</html>

CSS

.d3-gauge {
  float: left;
}

/* Simple */
.d3-gauge.simple .outer-circle {
  fill         :  #ccc;
  stroke       :  #000;
  stroke-width :  0.5px;
}

.d3-gauge.simple .inner-circle {
  fill         :  #fff;
  stroke       :  #E0E0E0;
  stroke-width :  2px;
}

.d3-gauge.simple .label {
  fill      :  #333;
  font-size :  16px;
}

.d3-gauge.simple .labelc {
  fill      :  #333;
  font-size :  12px;
}

.d3-gauge.simple .major-tick {
  stroke       :  #333;
  stroke-width :  2px;
}

.d3-gauge.simple .minor-tick {
  stroke       :  #666;
  stroke-width :  1px;
}

.d3-gauge.simple .major-tick-label {
  fill         :  darkblue;
  stroke-width :  2px;
  font-size    :  15px;
}

.d3-gauge.simple .needle {
  fill         :  #dc3912;
  stroke       :  #c63310;
  fill-opacity :  0.7;
}

.d3-gauge.simple .needle-container {
  fill         :  #4684EE;
  stroke       :  #666;
  fill-opacity :  1;
}

.d3-gauge.simple .current-value {
  fill         :  #000;
  stroke-width :  0px;
}

.d3-gauge.simple .green-zone {
  fill :  #FF9900
}

.d3-gauge.simple .yellow-zone {
  fill :  #FF9900
}

.d3-gauge.simple .red-zone {
  fill :  #DC3912
}

/* GrayScale */

.d3-gauge.grayscale .outer-circle {
  fill         :  #00A8A9;
  stroke       :  #000;
  stroke-width :  0.5px;
}

.d3-gauge.grayscale .inner-circle {
  fill         :  #111;
  stroke       :  #E0E0E0;
  stroke-width :  2px;
}

.d3-gauge.grayscale .label {
  fill      :  #ff9102;
  font-size :  24px;
}

.d3-gauge.grayscale .labelc {
  fill      :  #fff;
  font-size :  12px;
}

.d3-gauge.grayscale .major-tick {
  stroke       :  #888;
  stroke-width :  2px;
}

.d3-gauge.grayscale .minor-tick {
  stroke       :  #777;
  stroke-width :  1px;
}

.d3-gauge.grayscale .major-tick-label {
  fill         :  #ddd;
  stroke-width :  2px;
  font-size    :  15px;
}

.d3-gauge.grayscale .needle {
  fill         :  #ff9102;
  stroke       :  #555;
  fill-opacity :  0.7;
}

.d3-gauge.grayscale .needle-container {
  fill         :  #444;
 ...