circular chart gauge fixed

temp.html

@@ -195,15 +195,15 @@
     }
     }
 
 
     .circular-chart.orange .circle {
     .circular-chart.orange .circle {
-      stroke: #ff9f00;
+      stroke: #FA8200;
     }
     }
 
 
-    .circular-chart.green .circle {
-      stroke: #4CC790;
+    .circular-chart.yellow .circle {
+      stroke: #FFC448;
     }
     }
 
 
     .circular-chart.blue .circle {
     .circular-chart.blue .circle {
-      stroke: #3c9ee5;
+      stroke: #4C80F8;
     }
     }
 
 
     .percentage {
     .percentage {
@@ -310,7 +310,7 @@
           </div>
           </div>
 
 
           <p style="font-size: min(max(8px, 2.75vw), 15px); text-align: center; align-items: center;">
           <p style="font-size: min(max(8px, 2.75vw), 15px); text-align: center; align-items: center;">
-            Temperature<br>°C</p>
+            Temperature<br><span style="color: #A1A8B9;">(°C)</span></p>
         </div>
         </div>
       </div>
       </div>
       <div class="col-4">
       <div class="col-4">
@@ -347,7 +347,7 @@
             </svg>
             </svg>
           </div>
           </div>
           <p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;">
           <p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;">
-            Humidity<br>%HR
+            Humidity<br><span style="color: #A1A8B9;">(%HR)</span>
           </p>
           </p>
         </div>
         </div>
       </div>
       </div>
@@ -384,7 +384,7 @@
           <p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;">
           <p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;">
             PM 2.5
             PM 2.5
             <br>
             <br>
-            (μg./m<sup>3</sup>)
+            <span style="color: #A1A8B9;">(μg./m<sup>3</sup>)</span>
           </p>
           </p>
         </div>
         </div>
       </div>
       </div>
@@ -570,17 +570,28 @@
           }
           }
         }
         }
       }).done(function (data) {
       }).done(function (data) {
-        var obj = jQuery.parseJSON(data);
+        //mock
+        // data = "{ success: 1, data : { temperature: 28, humidity: 72, pm2dot5: 34 } }"
+
+        var obj = (typeof data == "string") ? jQuery.parseJSON(data) : data;
         if (obj.success == 1) {
         if (obj.success == 1) {
 
 
-          var value = ["temperature", "humidity", "pm2dot5"];
+          var value = [
+            { params: "temperature", color: "orange" }, 
+            { params: "humidity", color: "blue" },
+            { params: "pm2dot5", color: "yellow" }
+          ];
 
 
           for (var v in value) {
           for (var v in value) {
-            var val = obj.data[value[v]];
-            if (value[v] == "humidity") val /= 2;
+            var val = obj.data[value[v].params];
+
+            console.log(value[v].params, obj.data[value[v].params])
+
+            if (value[v].params == "humidity") val /= 2;
+            if (value[v].params == "pm2dot5") val /= 6;
 
 
-            document.getElementById(`${value[v]}-gauge`).innerHTML = 
-            `<svg viewBox="0 0 36 24" class="circular-chart orange">
+            document.getElementById(`${value[v].params}-gauge`).innerHTML = 
+            `<svg viewBox="0 0 36 24" class="circular-chart ${value[v].color}">
                 <g transform="rotate(270, 18, 18)" >
                 <g transform="rotate(270, 18, 18)" >
                   <path class="circle-bg"
                   <path class="circle-bg"
                   stroke-dasharray="50, 100"
                   stroke-dasharray="50, 100"
@@ -594,7 +605,7 @@
                   />
                   />
                 </g>
                 </g>
                 
                 
-                <text x="18" y="20.35" class="percentage" >${val}</text>
+                <text x="18" y="20.35" class="percentage" >${obj.data[value[v].params]}</text>
               </svg>`;
               </svg>`;
           }
           }