How to: Show Live Data from a Database (using UpdatePanel)

Jul 19, 2021
4 minutes to read

You can display live data in gauges. This example uses a linear gauge to show the maximum unit price (UnitPrice) of products from the Northwind database. A timer updates the gauge every two seconds to display real-time prices.

Default.aspx.cs
Default.aspx (C#)
Default.aspx (VB.NET)
Default.aspx.vb

csharp

using System;
using DevExpress.Web.ASPxGauges.Gauges.Linear;
using DevExpress.Web.ASPxGauges;
using System.Data;
using System.Web.UI;

namespace WebApplication1 {
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Init(object sender, EventArgs e) {
            if (!IsPostBack && !IsCallback) {
                UpdateGauge();
            }
        }
        private void SetupDataSourceInternal() {
            SqlDataSource1.ConnectionString = "Data Source=(local);Initial Catalog=Northwind;Integrated Security=True";
            SqlDataSource1.DataSourceMode = System.Web.UI.WebControls.SqlDataSourceMode.DataSet;
        }
        private void UpdateGauge() {
            SetupDataSourceInternal();
            UpdateScaleInternal(gauge);
        }
        private void UpdateScaleInternal(ASPxGaugeControl gauge) {
            float oldValue = ((LinearGauge)gauge.Gauges[0]).Scales[0].Value;
            //use a random value, just for demonstration purposes.
            //DataView dv = SqlDataSource1.Select(DataSourceSelectArguments.Empty) as DataView;
            //float newValue = Convert.ToSingle(dv.Table.Rows[0][0]);
            float newValue = new Random().Next(300);
            if (oldValue != newValue) {
                ((LinearGauge)gauge.Gauges[0]).Scales[0].Value = newValue;
                gauge.DataBind();
            }
        }
        protected void timer_Tick(object sender, EventArgs e) {
            UpdateGauge();
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges" TagPrefix="dxg" %>
<%@ Register assembly="DevExpress.Web.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxTimer" tagprefix="dxt" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Linear" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Circular" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.State" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v9.1, Version=9.1.0.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Digital" tagprefix="dxg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            <div>With UpdatePanel
                <dxg:ASPxGaugeControl ID="gauge" runat="server" Height="250px" Width="250px" 
            BackColor="White" 
    EnableClientSideAPI="False">
                    <Gauges>
                        <dxg:LinearGauge Bounds="0, 0, 250, 250" Name="Gauge0">
                            <scales>
                                <dxg:LinearScaleComponent AppearanceTickmarkText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            EndPoint="62.5, 35" MajorTickCount="6" MajorTickmark-FormatString="{0:F0}" 
                            MajorTickmark-ShapeOffset="-20" MajorTickmark-ShapeType="Linear_Style1_1" 
                            MajorTickmark-TextOffset="-32" MaxValue="300" MinorTickCount="4" 
                            MinorTickmark-ShapeOffset="-14" MinorTickmark-ShapeType="Linear_Style1_2" 
                            Name="Gauge0_Scale1" StartPoint="62.5, 215" AcceptOrder="0">
                                </dxg:LinearScaleComponent>
                            </scales>
                            <levels>
                                <dxg:LinearScaleLevelComponent Name="Gauge0_Level1" ScaleID="Gauge0_Scale1" 
                            Shader="&lt;ShaderObject Type=&quot;Gray&quot;/&gt;" ShapeType="Style4" 
                            ZOrder="-50" AcceptOrder="50" LinearScale="" />
                            </levels>
                            <labels>
                                <dxg:LabelComponent AppearanceText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            Name="Gauge0_Label1" Text="UnitPrice" ZOrder="-1001" AcceptOrder="1001" />
                            </labels>
                        </dxg:LinearGauge>
                    </Gauges>
                </dxg:ASPxGaugeControl>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
    <dxt:ASPxTimer ID="timer" runat="server" Interval="2000" ontick="timer_Tick">
    </dxt:ASPxTimer>
    <asp:sqldatasource runat="server" ID="SqlDataSource1" 
        SelectCommand="SELECT MAX(UnitPrice) AS Expr1 FROM Products">
    </asp:sqldatasource>
    </form>
</body>
</html>

aspx

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges" TagPrefix="dxg" %>
<%@ Register assembly="DevExpress.Web.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxTimer" tagprefix="dxt" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Linear" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Circular" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.State" tagprefix="dxg" %>
<%@ Register assembly="DevExpress.Web.ASPxGauges.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGauges.Gauges.Digital" tagprefix="dxg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            <div>With UpdatePanel
                <dxg:ASPxGaugeControl ID="gauge" runat="server" Height="250px" Width="250px" 
            BackColor="White" 
    EnableClientSideAPI="False">
                    <Gauges>
                        <dxg:LinearGauge Bounds="0, 0, 250, 250" Name="Gauge0">
                            <scales>
                                <dxg:LinearScaleComponent AppearanceTickmarkText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            EndPoint="62.5, 35" MajorTickCount="6" MajorTickmark-FormatString="{0:F0}" 
                            MajorTickmark-ShapeOffset="-20" MajorTickmark-ShapeType="Linear_Style1_1" 
                            MajorTickmark-TextOffset="-32" MaxValue="300" MinorTickCount="4" 
                            MinorTickmark-ShapeOffset="-14" MinorTickmark-ShapeType="Linear_Style1_2" 
                            Name="Gauge0_Scale1" StartPoint="62.5, 215" AcceptOrder="0">
                                </dxg:LinearScaleComponent>
                            </scales>
                            <levels>
                                <dxg:LinearScaleLevelComponent Name="Gauge0_Level1" ScaleID="Gauge0_Scale1" 
                            Shader="&lt;ShaderObject Type=&quot;Gray&quot;/&gt;" ShapeType="Style4" 
                            ZOrder="-50" AcceptOrder="50" LinearScale="" />
                            </levels>
                            <labels>
                                <dxg:LabelComponent AppearanceText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            Name="Gauge0_Label1" Text="UnitPrice" ZOrder="-1001" AcceptOrder="1001" />
                            </labels>
                        </dxg:LinearGauge>
                    </Gauges>
                </dxg:ASPxGaugeControl>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
    <dxt:ASPxTimer ID="timer" runat="server" Interval="2000" ontick="timer_Tick">
    </dxt:ASPxTimer>
    <asp:sqldatasource runat="server" ID="SqlDataSource1" 
        SelectCommand="SELECT MAX(UnitPrice) AS Expr1 FROM Products">
    </asp:sqldatasource>
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Web.ASPxGauges.Gauges.Linear
Imports DevExpress.Web.ASPxGauges
Imports System.Data
Imports System.Web.UI

Namespace WebApplication1
    Partial Public Class _Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
            If (Not IsPostBack) AndAlso (Not IsCallback) Then
                UpdateGauge()
            End If
        End Sub
        Private Sub SetupDataSourceInternal()
            SqlDataSource1.ConnectionString = "Data Source=(local);Initial Catalog=Northwind;Integrated Security=True"
            SqlDataSource1.DataSourceMode = System.Web.UI.WebControls.SqlDataSourceMode.DataSet
        End Sub
        Private Sub UpdateGauge()
            SetupDataSourceInternal()
            UpdateScaleInternal(gauge)
        End Sub
        Private Sub UpdateScaleInternal(ByVal gauge As ASPxGaugeControl)
            Dim oldValue As Single = (CType(gauge.Gauges(0), LinearGauge)).Scales(0).Value
            'use a random value, just for demonstration purposes.
            'DataView dv = SqlDataSource1.Select(DataSourceSelectArguments.Empty) as DataView;
            'float newValue = Convert.ToSingle(dv.Table.Rows[0][0]);
            Dim newValue As Single = New Random().Next(300)
            If oldValue <> newValue Then
                CType(gauge.Gauges(0), LinearGauge).Scales(0).Value = newValue
                gauge.DataBind()
            End If
        End Sub
        Protected Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs)
            UpdateGauge()
        End Sub
    End Class
End Namespace