I need assistance with updating a JavaScript Gage that showcases a percentage and refreshes every 5 seconds on an ASPX page. Currently, I am refreshing the entire page, but I understand that this is not ideal practice. Could someone guide me on how to specifically refresh only the JavaScript Gage within the div gg11? I am relatively new to JavaScript, so any help on achieving this would be greatly appreciated.
ASPX
<div id="gg11" class="gauge"></div>
<meta http-equiv="refresh" content="5; URL=http://localhost:63738/main.aspx">
ASPX.cs
protected void Page_Load(object sender, EventArgs e)
{
JavaScriptMethod();
}
protected void JavaScriptMethod()
{
Calculations();
StringBuilder sb = new StringBuilder();
sb.Append("<script>");
sb.Append("var gg1 = new JustGage({");
sb.Append("id: \"gg11\",");
sb.Append("donut: 0,");
sb.Append("title: \"LAKE WALES\",");
sb.Append("titleFontColor: \"#000000\",");
sb.AppendFormat("value: {0},", percent);
sb.Append("min: 0,");
sb.Append("max: 100,");
sb.Append("labelFontColor: \"#000000\",");
sb.Append("humanFriendlyDecimal: 1,");
sb.Append("decimals: 1,");
sb.Append("symbol: \"%\",");
sb.Append("startAnimationType : \"bounce\",");
sb.Append("refreshAnimationType: \"bounce\",");
sb.Append("startAnimationTime: 1000,");
sb.Append("gaugeWidthScale: 1.2,");
sb.Append("customSectors: [{color: \"#ff0000\",lo: 0,hi: 79}, {color: \"#ffa500\",lo: 80,hi: 89}, {color: \"#1eae1e\",lo: 90,hi: 100}],");
sb.Append("counter: true");
sb.Append("});");
sb.Append("</script>");
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "temp", sb.ToString(), false);
}