Binding Data to radial gauge

4 posts, 1 answers
  1. Louis
    Louis avatar
    2 posts
    Member since:
    Dec 2012

    Posted 24 Feb 2013 Link to this post

    Hi I am busy converting a asp.net dashboard to silverlight, especially the visual components.  AM struggling a bit with binding data to the circular "Needle" Gauge as well as the circular "Radialbar" gauge.  These are my XAML Setups for the two:

     <telerik:RadRadialGauge Name="radialGauge"
                        Width="300"
                        Height="300"
                        Background="Azure" Margin="286,29,214,123">
                <telerik:RadialScale Name="scale"
                        Min="0"
                        Max="30"
                        LabelOffset="0.05*"
                        LabelRotationMode="None"
                        LabelFormat="{}{0}" Foreground="Red" Background="Orange">
                    <telerik:RadialScale.Indicators>
                        <telerik:Needle Name="needle1" Background="DarkBlue"  IsAnimated="True" RefreshMode="Average" 
                                       IsEnabled="True" Visibility="Visible" />
                      <telerik:Pinpoint  Background="RosyBrown" />
                    </telerik:RadialScale.Indicators>
                    <telerik:RadialScale.Ranges>
                        <telerik:GaugeRange Background="#FFA3A3A3" 
                            Min="0" Max="10" />
                        <telerik:GaugeRange Background="#FF000000" 
                            Min="10" Max="20"  />
                        <telerik:GaugeRange Background="#FFE50000" 
                            Min="20" Max="30" />

                    </telerik:RadialScale.Ranges>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>


            <telerik:RadRadialGauge Width="200" Height="200" telerik:StyleManager.Theme="Windows8" Name="Bar" Margin="44,155,556,97" IsEnabled="True" Visibility="Visible">
                <telerik:RadialScale>
                    <telerik:RadialScale.Ranges>
                        <telerik:GaugeRange Min="0" Max="25"
                    StartWidth="0.05"
                    EndWidth="0.05"
                    Background="Blue"
                    TickBackground="Blue"
                    LabelForeground="Blue"
                    IndicatorBackground="Blue" />
                        <telerik:GaugeRange Min="25" Max="50"
                    StartWidth="0.05"
                    EndWidth="0.05"
                    Background="SkyBlue"
                    TickBackground="SkyBlue"
                    LabelForeground="SkyBlue"
                    IndicatorBackground="SkyBlue" />
                        <telerik:GaugeRange Min="50" Max="75"
                    StartWidth="0.05"
                    EndWidth="0.05"
                    Background="Green"
                    TickBackground="Green"
                    LabelForeground="Green"
                    IndicatorBackground="Green" />
                        <telerik:GaugeRange Min="75" Max="100"
                    StartWidth="0.05"
                    EndWidth="0.05"
                    Background="Yellow"
                    TickBackground="Yellow"
                    LabelForeground="Yellow"
                    IndicatorBackground="Yellow" />
                    </telerik:RadialScale.Ranges>
                    <telerik:RadialScale.Indicators>
                        <telerik:BarIndicator Name="radialBar" 
                    UseRangeColor="True" 
                    RangeColorMode="Default"
                     />
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>

    And then I bind my data in the code behind:
            Me.needle1.Value = e.Result
            Me.radialBar.ValueSource = e.Result

    The MS SQl Query I bind to is a simple count statement:
    Select count(*) as TotC from Table
    The return value is supposed to be "7"

    Regards and thank You
     


  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 27 Feb 2013 Link to this post

    Hello Louis,

    You should use the Value property in both cases for setting the value to the indicator. The ValueSource property is designed for other purposes.

    Kind regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Louis
    Louis avatar
    2 posts
    Member since:
    Dec 2012

    Posted 28 Feb 2013 Link to this post

    Hi Thank you for the response"

    If I change it to bind to "Value"  as below I get an error :  

    Me.needle1.Value = e.Result

    Error:
    Value of type 'System.Collections.ObjectModel.ObservableCollection(Of DummyServicesSLGauge.ESSRef.GaugeData)' cannot be converted to 'Double'.    

    This is my WCF service Config collecting my data:

    If I use the same syntax and bind it as a single column to a datagrid it is fine, but if I bind it to a Label I get no values, and the error on binding to Gauges


    <OperationContract()> _
        Public Function GetInProgress() As List(Of GaugeData)
            Dim essconn As String = System.Configuration.ConfigurationManager.ConnectionStrings("ESSConnectionString1").ConnectionString
            Dim totalList = New List(Of GaugeData)()
            Using conn As New SqlConnection(essconn)
                Const Sql As String = "select count(*) as TotC from currincs"

                conn.Open()
                Using cmd As New SqlCommand(Sql, conn)
                    Dim dr As SqlDataReader = cmd.ExecuteReader(CommandBehavior.CloseConnection)
                    If dr IsNot Nothing Then
                        Do While dr.Read()
                            Dim varCur = New GaugeData With {.TotC = dr.GetInt32(0)}
                            totalList.Add(varCur)
                        Loop
                    End If
                    Return totalList
                End Using
                conn.Close()
            End Using
        End Function


    Thank You
  5. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 04 Mar 2013 Link to this post

    Hello Louis,

    The type of "Value" property of any indicator in the gauge control is the "double". So, you shouldn't assign an ObservableCollection to it. You should use a value of result which is convertible to the double. In your case it is GaugeData.TotC property of result.
    The sample code is below.
    Me.needle1.Value = e.Result(0).TotC

    Kind regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top