Dynamic JustGauge Dashboard

by Nayana Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
   <br>
    <select id="meterSelect" onchange="loadGauge(this)">
      <option value="">Choose any meter</option>
      <option value="0">meter1</option>
      <option value="1">meter2</option>
      <option value="2">meter3</option>
    </select>
    <br><br>
    <div id="container" class="row"></div>

CSS

.guage{
    width: 300px;
    height:300px;
}

JavaScript

var jsondata =[{
    "_id" : "5de879d7b85e230239731807",
    "meterID" : "MainMeter", 
    "frequency" : "50.08",
    "p1" : "-0.99",
    "v1" : "229.60",
    "i1" : "565.65",
    "w1" : "87310.27",
    "p2" : "-0.99",
    "v2" : "228.15",
    "i2" : "366.59",
    "w2" : "92505.92",
    "p3" : "-0.97",
    "v3" : "228.03",
    "i3" : "499.87",
    "w3" : "115150.46",
    "tw" : "245966.64",
    "tpf" : "-0.98",
    "gatewayID" : "15034631",
    "time" : "2019-12-05 09:00:31"
},{
    "_id" : "5de879d7b85e230239731807",
    "meterID" : "15034632",
    "frequency" : "50.28",
    "p1" : "-0.85",
    "v1" : "129.60",
    "i1" : "55.65",
    "w1" : "37000.27",
    "p2" : "-0.97",
    "v2" : "230.15",
    "i2" : "85.59",
    "w2" : "27000.92",
    "p3" : "-0.95",
    "v3" : "228.03",
    "i3" : "30.87",
    "w3" : "29000.46",
    "tw" : "195966.64",
    "tpf" : "-0.97",
    "gatewayID" : "16034631",
    "time" : "2019-12-05 09:00:31"
},
{
    "_id" : "5de879d7b85e230239731807",
    "meterID" : "15034633",
    "frequency" : "49.08",
    "p1" : "-0.80",
    "v1" : "149.60",
    "i1" : "30.65",
    "w1" : "45000.27",
    "p2" : "-0.99",
    "v2" : "220.15",
    "i2" : "45.59",
    "w2" : "32000.92",
    "p3" : "-0.96",
    "v3" : "198.03",
    "i3" : "78.87",
    "w3" : "18000.46",
    "tw" : "197966.64",
    "tpf" : "-0.99",
    "gatewayID" : "18034631",
    "time" : "2019-12-05 09:00:31"
}]

function loadGauge(elem){

	//var selectedValue=$(elem).val();
  
  var selectedJsonObject = jsondata[selectedValue];
  $("#container").html("");
  
  for(var i in selectedJsonObject){
  	if(i.startsWith("p") || i.startsWith("v") || i.startsWith("i") || i.startsWith("w")){
   	 		$("#container").append('<div id="guage_'+i+'" class="col-md-3"></div>');
        var maxvalue="", low1, low2, low3, high1,
        	high2, high3, name, shortname;
          
        if(i.startsWith("p")){
        		maxvalue = 1;
            low1=0; low2 =0.4; low3=0.7; 
            high1=0.3; high2=0.6;...