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

• Jul 19, 2021
• 2 minutes to read

You can show 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 (C#)

<form id="form1" runat="server">

    <div>With CustomCallBack
        <dxg:ASPxGaugeControl ID="gauge" runat="server" Height="250px" Width="250px" BackColor="White" 
                EnableClientSideAPI="True" oncustomcallback="gauge_CustomCallback">
            <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>
            <ClientSideEvents EndCallback="function(s, e) { timer.Start(); }" />
        </dxg:ASPxGaugeControl>
        </div>
    <dxt:ASPxTimer ID="timer" runat="server" Interval="2000">
    <ClientSideEvents Tick="function(s, e) { timer.Stop(); gauge.PerformCallback(); }" />
    </dxt:ASPxTimer>
    <asp:sqldatasource runat="server" ID="SqlDataSource1" 
        SelectCommand="SELECT MAX(UnitPrice) AS Expr1 FROM Products">
    </asp:sqldatasource>
</form>

Default.aspx.cs

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 gauge_CustomCallback(object source, DevExpress.Web.CallbackEventArgsBase e) {
            UpdateGauge();
        }
    }
}

Default.aspx.vb

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 gauge_CustomCallback(ByVal source As Object, ByVal e As DevExpress.Web.CallbackEventArgsBase)
            UpdateGauge()
        End Sub
    End Class
End Namespace