Dynamic gauges creation

2 posts, 0 answers
  1. David Gunderson
    David Gunderson avatar
    13 posts
    Member since:
    Apr 2010

    Posted 28 Apr 2010 Link to this post

    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 
  3. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 29 Apr 2010 Link to this post

    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.
Back to Top