Dynamic gauges creation

[David Gunderson]

Background... I am trying to create a Gauge page that i can use QueryString (http://Localhost/default.aspx?ID=xxxx) to pass an Identifer to the Gauge I have this part working. I want the gauges to display Dynamically since all my data is not being represented as 0-100 on all datasets. 

I am attempting to create a radial gauge with 3 Color Range Scales (Red, Yellow, Green) and a needle. I can do it all in the Xaml just fine(not Dynamic enough) but when i attempt to intergrate the data from RIA Services I have some issues.

The Needle is being pulled from RIA Services and i am using Binding this is working.
Now for my Min Max fields on the Scale and the Ranges are where i am running into issues i need to do some math on them in order to get them

The data that i have to deal with is as follows and the customer is not willing to add  a min max field to the database.

Database Field / Gauge Item

Actual Value / Needle.Value

Tolerance Value /  (Yellow.Max - Yellow.Min)
Target Value / Green.Min

With in these 3 Fields i have the math on how to figure out the other itemes needed. The Issues that i am seeing is that i can't figure out how to get these items to load on runtime of the applicaiton so i placed a button on the project with a launch event to do the gauge configuration(not acceptable to have a button). That works to a point.

The other issues it that i can ususall only get 2 of the 3 color scales to display.
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: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" x:Class="MetricsDashboard.MainPage"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" xmlns:my="clr-namespace:MetricsDashboard.Web" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid>
       <Grid x:Name="LayoutRoot" Background="#FF373737">
            <Grid x:Name="Maingrid"  d:LayoutOverrides="GridBox" DataContext="{Binding ElementName=CognosMetricDomainDataSource1, Path=Data}">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="0*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="0*" />
                    <ColumnDefinition Width="0*"/>
                    <ColumnDefinition Width="0*" />
                </Grid.ColumnDefinitions>
                <Telerik_Windows_Controls:RadGauge x:Name="radGauge" Grid.Column="0" VerticalAlignment="Top"
                    Height="210" Width="210" HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding MName}"  >
                    <Telerik_Windows_Controls_Gauges:RadialGauge>
                        <Telerik_Windows_Controls_Gauges:RadialScale x:Name="RadialScale" IsInteractive="False" Min="0" Max="1000">
                            <Telerik_Windows_Controls_Gauges:RangeList d:LayoutOverrides="Width, Height">
                                <Telerik_Windows_Controls_Gauges:RadialRange x:Name="Gauge1Green"   Background="#FF13FF00" BorderBrush="#7FFFFFFF"
                                                                             StartWidth="0.06" EndWidth="0.06"
                                                                             Max="{Binding ElementName=RadialScale, Path=Max}"
                                                                             Min="{Binding TargetVal}" />

                                <Telerik_Windows_Controls_Gauges:RadialRange x:Name="Gauge1Yellow"  Background="#7FFFF900" BorderBrush="#7FFFFFFF"
                                                                             StartWidth="0.06" EndWidth="0.06"
                                                                             Max="{Binding TargetVal}"
                                                                             Min="{Binding TargetVal}"/>
                                <Telerik_Windows_Controls_Gauges:RadialRange x:Name="Gauge1Red"     Background="#7FFF0000" BorderBrush="#7FFFFFFF"
                                                                             StartWidth="0.06" EndWidth="0.06"
                                                                             Min="{Binding ElementName=RadialScale, Path=Min}"/>
                            </Telerik_Windows_Controls_Gauges:RangeList>
                            <Telerik_Windows_Controls_Gauges:IndicatorList Height="210" Width="210">
                                <Telerik_Windows_Controls_Gauges:Needle x:Name="Needle" IsAnimated="True" Value="{Binding ActualVal}" Cursor="Hand" />
                            </Telerik_Windows_Controls_Gauges:IndicatorList>
                        </Telerik_Windows_Controls_Gauges:RadialScale>
                        <Grid>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.60*" />
                                    <RowDefinition Height="0.40*" />
                                </Grid.RowDefinitions>
                                <TextBlock x:Name="txtKPIID" Grid.Row="0" Text="{Binding KpiSid}" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="14" FontFamily="Arial" Foreground="Black"></TextBlock>
                                <TextBox x:Name="ValueBox" Grid.Row="1" Text="{Binding ActualVal}" VerticalAlignment="Center" d:LayoutOverrides="Width" HorizontalAlignment="Center"/>

                            </Grid>
                        </Grid>
                    </Telerik_Windows_Controls_Gauges:RadialGauge>
                </Telerik_Windows_Controls:RadGauge>
                <Button Content="Button" Height="23" Margin="69,214,71,0" Name="Button1" VerticalAlignment="Top" MaxWidth="75" />
                <sdk:DataGrid AutoGenerateColumns="False" Height="200" HorizontalAlignment="Stretch" ItemsSource="{Binding}" Name="CognosMetricDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Bottom" ColumnWidth="SizeToCells" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Visibility="Collapsed">
                    <sdk:DataGrid.Columns>
                        <sdk:DataGridTextColumn x:Name="ActualValColumn" Binding="{Binding Path=ActualVal}" Header="Actual Val" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="FYTimeColumn" Binding="{Binding Path=FYTime}" Header="FYTime" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="KpiSidColumn" Binding="{Binding Path=KpiSid, Mode=OneWay}" Header="Kpi Sid" IsReadOnly="True" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="MNameColumn" Binding="{Binding Path=MName}" Header="MName" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="MonthColumn" Binding="{Binding Path=Month}" Header="Month" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="TargetValColumn" Binding="{Binding Path=TargetVal}" Header="Target Val" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="ToleranceValColumn" Binding="{Binding Path=ToleranceVal}" Header="Tolerance Val" Width="SizeToHeader" />
                        <sdk:DataGridTextColumn x:Name="ValueColumn" Binding="{Binding Path=Value}" Header="Value" Width="SizeToHeader" />
                    </sdk:DataGrid.Columns>
                </sdk:DataGrid>
                <Telerik_Windows_Controls_Gauges:Needle Grid.Column="1" HorizontalAlignment="Left" Height="68" Margin="0,0,0,77" VerticalAlignment="Bottom" Width="0"/>
            </Grid>
            <StackPanel Height="30" HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Top" Margin="8,233,0,0">
                <TextBox Name="KPInumTextBox" Width="60" Visibility="Collapsed"/>

            </StackPanel>
        </Grid>
        <riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:CognosMetric, CreateList=true}" Height="0" Name="CognosMetricDomainDataSource1" QueryName="GetCognosMetricsByKPIIDQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:CognosMetricsDS />
            </riaControls:DomainDataSource.DomainContext>
            <riaControls:DomainDataSource.QueryParameters>
                <riaControls:Parameter ParameterName="KPInum" Value="{Binding ElementName=KPInumTextBox, Path=Text}" />
            </riaControls:DomainDataSource.QueryParameters>
        </riaControls:DomainDataSource>
    </Grid>

</UserControl>

MainPage.xaml.vb

Imports System.ServiceModel.DomainServices.Client
Imports MetricsDashboard.Web
Imports Telerik.Windows.Controls.Gauges

Partial Public Class MainPage
    Inherits UserControl
    Public Sub New()

        InitializeComponent()
    End Sub

    Private Sub CognosMetricDomainDataSource1_LoadedData(ByVal sender As System.Object, ByVal e As System.Windows.Controls.LoadedDataEventArgs) Handles CognosMetricDomainDataSource1.LoadedData
        If e.HasError Then
            System.Windows.MessageBox.Show(e.Error.ToString, "Load Error", System.Windows.MessageBoxButton.OK)
            e.MarkErrorAsHandled()
        End If
    End Sub

    Private Sub ConfigureGauge()

        Dim strTarVal = TargetValColumn.GetCellContent(0).ToString()
        Dim strActualVal = ActualValColumn.GetCellContent(0).ToString()
        Dim strTolVal = ToleranceValColumn.GetCellContent(0).ToString()

        RadialScale.Max = strTarVal + (strTarVal * 0.3)
        RadialScale.Min = strActualVal - (strActualVal * 0.3)
        Gauge1Green.Max = strTarVal + (strActualVal * 0.3)
        Gauge1Green.Min = strTarVal
        Gauge1Yellow.Max = strTarVal
        Gauge1Yellow.Min = strTarVal - strTolVal
        Gauge1Red.Max = strTarVal - strTolVal
        Gauge1Red.Min = strTarVal - (strTarVal * 0.3)


    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
        ConfigureGauge()
    End Sub
End Class

[Andrey]

Hi David Gunderson,

There are several ways to solve the problem with mathematics.

1. You can create value converters for values which must be calculated and use it in binding expressions. For example, following converters calculate min and max values of the green range based on the value of needle indicator:

Imports System.Windows.Data

''' <summary>
''' Converts actual value to the green range min value
''' </summary>
''' <remarks></remarks>
Public Class GreenMinValueConverter
    Implements IValueConverter

    Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Return value - value * 0.3
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Return value
    End Function
End Class

''' <summary>
''' Converts actual value to the green range max value
''' </summary>
''' <remarks></remarks>
Public Class GreenMaxValueConverter
    Implements IValueConverter

    Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Return value + value * 0.3
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Return value
    End Function
End Class

<Grid.Resources>
    <local:GreenMinValueConverter x:Key="GreenMinValueConverter" />
    <local:GreenMaxValueConverter x:Key="GreenMaxValueConverter" />
</Grid.Resources>

<Telerik_Windows_Controls_Gauges:RadialRange x:Name="Gauge1Green"
    Background="#FF13FF00"
    BorderBrush="#7FFFFFFF"
    StartWidth="0.06" EndWidth="0.06"
    Max="{Binding ElementName=Needle, Path=Value, Converter={StaticResource GreenMaxValueConverter}}"
    Min="{Binding ElementName=Needle, Path=Value, Converter={StaticResource GreenMinValueConverter}}">

2. You can perform all calculations and set scale and range values in the DomainDataSource Loaded event handler.

I've simplified a bit your code (because I don't have all parts of your application) and checked visibility of the ranges. After calculating the min and max values the resulting ranges are overlapped. So you have to correct your calculations somehow.

Greetings,
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.