Multiple Gauges with Ria Services

[David Gunderson]

This is a two part question
I am attempting to load 9 Gauges with Data from a SQL 2005 Database.

1. When i place 5 gauges of the 9 on the page it will load it takes it a min but it will load when i place the 6th on the page it times out. I am currently using a specific query for the KpiSid (Unique Identifer in the db that = the gauge i want to display)

Public Function GetCognosMetricsByKPIID(ByVal KPInum As Integer) As IQueryable(Of CognosMetric)

Return Me.ObjectContext.CognosMetrics.Where(Function(c) c.KpiSid.Equals(KPInum) = True)

End Function

Is there a way to dump all the data to the page in like a datagrid (hidden) then loop through it for each gauge?

MainPage.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:MetricsDashAuto.Web"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:local="clr-namespace:MetricsDashAuto" x:Class="MetricsDashAuto.MainPage"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid x:Name="Layout_Root" Background="#FF373737">
        <Grid.RowDefinitions>
            <RowDefinition Height="33*" />
            <RowDefinition Height="33*" />
            <RowDefinition Height="33*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="25*"/>
            <ColumnDefinition Width="25*"/>
            <ColumnDefinition Width="25*"/>
            <ColumnDefinition Width="25*"/>
        </Grid.ColumnDefinitions>
        <local:SLUC15337 Grid.Row="0" Grid.Column="0" />
        <local:SLUC10089 Grid.Row="0" Grid.Column="1"/>
        <local:SLUC10517 Grid.Row="0" Grid.Column="2" />
        <local:SLUC10677 Grid.Row="0" Grid.Column="3"/>
        <local:SLUC11330 Grid.Row="1" Grid.Column="0" />
        <local:SLUC12345 Grid.Row="1" Grid.Column="1" />
        <local:SLUC14708 Grid.Row="1" Grid.Column="2" />
        <local:SLUC14725 Grid.Row="1" Grid.Column="3" />
        <local:SLUC11904 Grid.Row="2" Grid.Column="0" />
        <local:SLUC9652 Grid.Row="2" Grid.Column="1" />
    </Grid>

</UserControl>

One of the usercontrols.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Telerik_Windows_Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
    xmlns:Telerik_Windows_Controls_Gauges="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
    xmlns:Telerik_Windows_Controls_Map="clr-namespace:Telerik.Windows.Controls.Map;assembly=Telerik.Windows.Controls.DataVisualization"
    xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
    xmlns:MetricsDashAuto_Web="clr-namespace:MetricsDashAuto.Web"
    mc:Ignorable="d"
    x:Class="MetricsDashAuto.SLUC14725"
    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot_14725" DataContext="{Binding Data, ElementName=CognosMetricDomainDataSource14725}" Background="#FF373737"
          HorizontalAlignment="Center" Width="640">
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <Telerik_Windows_Controls:RadGauge HorizontalAlignment="Center" x:Name="CognosMetricRadGauge14725" VerticalAlignment="Center">

            <Telerik_Windows_Controls_Gauges:RadialGauge x:Name="Gauge14725">
                <Telerik_Windows_Controls_Gauges:RadialScale Min="0.80964" Max="1.09956" Radius="0.75">
                    <Telerik_Windows_Controls_Gauges:RangeList>
                        <Telerik_Windows_Controls_Gauges:RadialRange Background="#AB34E800"
                            StartWidth="0.12"
                            EndWidth="0.12"
                            Max="{Binding GMax}"
                            Min="{Binding GMin}"
                            ToolTipService.ToolTip="Yellow"/>
                        <Telerik_Windows_Controls_Gauges:RadialRange Background="Yellow"
                            StartWidth="0.12"
                            EndWidth="0.12"
                            Max="{Binding GMin}"
                            Min="{Binding RMax}"/>
                        <Telerik_Windows_Controls_Gauges:RadialRange Background="Red"
                            StartWidth="0.12"
                            EndWidth="0.12"
                            Max="{Binding RMax}"
                            Min="{Binding RMin}"
                            ToolTipService.ToolTip="{Binding RMax}"/>
                    </Telerik_Windows_Controls_Gauges:RangeList>
                    <Telerik_Windows_Controls_Gauges:IndicatorList>
                        <Telerik_Windows_Controls_Gauges:Needle Value="{Binding ActualVal}"/>
                    </Telerik_Windows_Controls_Gauges:IndicatorList>
                </Telerik_Windows_Controls_Gauges:RadialScale>
            </Telerik_Windows_Controls_Gauges:RadialGauge>
        </Telerik_Windows_Controls:RadGauge>
        <Ellipse
            x:Name="Ellipse14725" ToolTipService.ToolTip="{Binding Description}"
            Fill="#00EFA400"
            Width="{Binding Width, ElementName=Gauge}"
            Height="{Binding Height, ElementName=Gauge}"
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Cursor="Hand"
            Stroke="#00000000" MouseLeftButtonUp="Ellipse14725_MouseLeftButtonUp"
            />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="96*" />
                <RowDefinition Height="96*" />
                <RowDefinition Height="53*" />
                <RowDefinition Height="43*" />
                <RowDefinition Height="96*" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="4" Foreground="GhostWhite" Text="{Binding ActualVal}" FontSize="14" VerticalAlignment="Center" Margin="1,0,0,0" TextAlignment="Center" HorizontalAlignment="Center" />
            <Telerik_Windows_Controls_Map:Arrow Grid.Row="3" HorizontalAlignment="Center" x:Name="Arrow14725" VerticalAlignment="Bottom" Direction="Down" Margin="316,0" />
            <TextBox Text="{Binding Trend}" x:Name="TxtblkTrend14725" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
        <TextBlock Foreground="GhostWhite" HorizontalAlignment="Center" Text="{Binding MName}" Grid.Row="1" FontSize="14" FontStretch="Condensed" />
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Foreground="GhostWhite" HorizontalAlignment="Right" Text="Goal: " Grid.Row="2" Grid.Column="0" FontSize="14" FontStretch="Condensed" />
            <TextBlock Foreground="GhostWhite" HorizontalAlignment="Left" Text="{Binding GMin}" Grid.Row="2" Grid.Column="1" FontStretch="Condensed" FontSize="14" />

        </Grid>
        <riaControls:DomainDataSource AutoLoad="True" Height="0" x:Name="CognosMetricDomainDataSource14725" QueryName="GetCognosMetricsByKPIIDQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <MetricsDashAuto_Web:CognosMetricsDS />
            </riaControls:DomainDataSource.DomainContext>
            <riaControls:DomainDataSource.QueryParameters>
                <riaControls:Parameter x:Name="Parameter14725" ParameterName="KPInum" Value="14725" />
            </riaControls:DomainDataSource.QueryParameters>
        </riaControls:DomainDataSource>
    </Grid>
</UserControl>

one of the usercontrols.xaml.vb

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Threading
Imports Telerik.Windows.Controls
Imports Telerik.Windows.Controls.Gauges
Imports System.Windows.Browser
Imports MetricsDashAuto.Web
Imports System.ServiceModel.Web

Partial Public Class SLUC14725
    Inherits UserControl

    Public Sub New()
        ' Required to initialize variables
        InitializeComponent()


    End Sub
    Private Sub CognosMetricDomainDataSource14725_LoadedData(ByVal sender As System.Object, ByVal e As System.Windows.Controls.LoadedDataEventArgs)

        If e.HasError Then
            System.Windows.MessageBox.Show(e.Error.ToString, "Load Error", System.Windows.MessageBoxButton.OK)
            e.MarkErrorAsHandled()
        Else
        End If
    End Sub

    Private Sub Ellipse14725_MouseLeftButtonUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Ellipse14725.MouseLeftButtonUp
        HtmlPage.Window.Navigate(New Uri("http://ngmnc2-j6ops-a1/StratPlan/Include/Graph.aspx?sid=" + Parameter14725.Value, UriKind.Absolute), "Blank")
    End Sub

    Private Sub TxtblkTrend14725_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles TxtblkTrend14725.TextChanged

        If TxtblkTrend14725.Text = "U" Then
            Arrow14725.Direction = Map.ArrowDirection.Up
            TxtblkTrend14725.Visibility = Windows.Visibility.Collapsed
        ElseIf TxtblkTrend14725.Text = "S" Then
            Arrow14725.Visibility = Windows.Visibility.Collapsed
            TxtblkTrend14725.Visibility = Windows.Visibility.Collapsed
        End If
    End Sub
End Class

2. is there a way to Bind to the Min and Max Values for a gauge? Rmin = 0.80964 GMax=1.09956

<

 

 

Telerik_Windows_Controls_Gauges:RadialScale Min="{Binding RMin}" Max="{Binding GMax}" Radius="0.75">

I get a Invalid Value Error when i attempt this. 

 

[Jim Daly]

One thing you could do, if it would be ok to return all of the KPI data to the client in one call, is to filter it on the client via LINQ. So for example you could do something like:

RadGauge1.ItemsSource = MyKPIs.Where(k => k.KpiSid == 1);
RadGauge2.ItemsSource = MyKPIs.Where(k => k.KpiSid == 2);

Assuming that MyKPIs is a property holding the collection of KPI data that you return from your service.

It look as though the Min and Max properties of RadialScale are readonly.

[David Gunderson]

Thanks Jim, 
    I will try that method. I am able to bind to the  Min Max values now that i updated the Assemblies to the latetest ones.

Dave

[David Gunderson]

So I have the gauges working the way i want them now but i am running into an issue with one piece of data that I am passing to one of the gauges

<Telerik_Windows_Controls_Gauges:RadialScale Min="{Binding RMin}" Max="{Binding GMax}" Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

This is working on 11 of the guages that i am passing data to on one of the gauges i am not using small numbers and i think that is what may be causing an issue. The RMin is set at 9919.3572 and the GMax is Set at 12295.8. I am getting an Error that states the Min is Greater than the Max. Which you can see really isn't true.

When i input the numbers manually on the gauge and remove the binding I get the same Error

<Telerik_Windows_Controls_Gauges:RadialScale Min="9919.3572" Max="12295.8" Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

I have also tried to change the Max to have the same number of decimal points as the Min

<Telerik_Windows_Controls_Gauges:RadialScale Min="9919.3572" Max="12295.8000" Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

and rounded the numbers (this really wouldn't work for my production needs but figured i would try it)

<Telerik_Windows_Controls_Gauges:RadialScale Min="9919" Max="12296" Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

None of the above worked. It still throws the same error. is there an issue passing 4 to 5 digits to a gauge?


Thanks Dave

[Andrey]

Hi David,

The scale validates min-max properties. The max property should be greater than min.
Default min-max range of scale is 0-100. So, when you change the min property to 9919.3572 then it is greater than max (100).
You can try to change max property before min. For example the following code will work properly:

<Telerik_Windows_Controls_Gauges:RadialScale Max="12295.8" Min="9919.3572" Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

Regards,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David Gunderson]

<Telerik_Windows_Controls_Gauges:RadialScale Max="{Binding GMax}" Min="{Binding RMin}"  Radius="0.75" MajorTicks="0" MinorTicks="0" MiddleTicks="0">

So basically if i call the Min Value first it doesn't work because of the way it is being built and if i call out the max value first it does work. Nice to know. That thought never crossed my mind in testing.

Thanks
Dave