Process Custom JSON with Guage and table in Zoho Creator HTML -- https://help.zoho.com/portal/en/community/topic/dashboard-data-from-deluge-function

guage.js

<%{
	data_source = {"code":"0","description":"Success","subscriberQuota":{"qtavalue":"500.00","qtabalance":"419.30","qtaconsumption":"80.70","type":"2","refuelingTotal":"0.00","qtaconsumptionTotal":"263.22"},"historyQuota":{{"time":"20220707","qtaconsumption":"19.07","mcc":"714"},{"time":"20220707","qtaconsumption":"236.41","mcc":"710"},{"time":"20220707","qtaconsumption":"7.74","mcc":"708"},{"time":"20220706","qtaconsumption":"164.85","mcc":"714"}},"ext":null};
	subscriberQuota = data_source.get("subscriberQuota");
	qtaconsumption = subscriberQuota.get("qtaconsumption").toDecimal();
	qtavalue = subscriberQuota.get("qtavalue").toDecimal();
	percent = ((qtaconsumption / qtavalue).round(4) * 100).round(2);
	deg_value = percent / 200;
	%>
<div style="margin:10px;display:flex;flex-direction:column;">
	<h1 style="text-align:center;">subscriberQuota</h1>
	<p><%=subscriberQuota%></p>
	<p>qtaconsumption: <%=qtaconsumption%></p>
	<p>qtavalue: <%=qtavalue%></p>
	<p>percent: <%=percent%></p>
	<div class="gauge">
	  <div class="gauge__body">
		<div class="gauge__fill"></div>
		<div class="gauge__cover"><%=percent%> %</div>
	  </div>
	</div>
</div>

<div style="margin:10px;display:flex;flex-direction:column;">
	<h1 style="text-align:center;">historyQuota</h1>
	<p><%=data_source.getJson("historyQuota")%></p>
	<table>
		<tr>
			<th>
				time
			</th>
			<th>
				qtaconsumption
			</th>
			<th>
				mcc
			</th>
		</tr>
<%
	for each  historyQuota in data_source.getJson("historyQuota")
	{
		%>
<tr>
				<th>
					<%=historyQuota.get("time")%>
				</th>
				<th>
					<%=historyQuota.get("qtaconsumption")%>
				</th>
				<th>
					<%=historyQuota.get("mcc")%> 
				</th>
			</tr>
<%
	}
	%>
</table>
</div>

<style>
.gauge {
  width: 100%;
  max-width: 250px;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  color: #004033;
  margin:auto;
}

.gauge__body {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: #b4c0be;
  position: relative;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  overflow: hidden;
}

.gauge__fill {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: 100%;
  background: #009578;
  transform-origin: center top;
  transform: rotate(<%=deg_value%>turn);
  animation: cFill 1.5s 1;
}
@keyframes cFill{
	from {transform: rotate(0.0turn);}
	to {transform: rotate(<%=deg_value%>turn);}
}
.gauge__cover {
  width: 75%;
  height: 150%;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);

  /* Text */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25%;
  box-sizing: border-box;
}

</style>
<%

}%>

Preview Link