This is a migrated thread and some comments may be shown as answers.

Dynamic gauges creation

1 Answer 83 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
David Gunderson
Top achievements
Rank 1
David Gunderson asked on 28 Apr 2010, 02:47 PM
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.ObjectByVal 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.ObjectByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click  
        ConfigureGauge()  
    End Sub 
End Class 

1 Answer, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 29 Apr 2010, 12:52 PM
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.
Tags
Gauge
Asked by
David Gunderson
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Share this question
or