Is there a way to use times as labels on a linear gauge like a timeline?

2 posts, 0 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 30 Mar 2011 Link to this post

    Hello,
    We have a need to represent a timeline of upcoming process executions to display to the users how close the current time is to the last execution and how close it is to the upcoming next execution.

    It seems that the values and labels on the RadGauge linear gauge are always numeric values.  Is there a way to make the labels date/time values, specifically times?  We only really need a label that = 0 and one that = 100.

    Example:  The server process ran at 2:00 PM and it will run again at 4:00 PM.  The current time is 2:45 PM.  We want to show 2:00 PM as the label on the lowest gauge value, e.g. 0, and 4:00 PM for the value for the highest gauge value, e.g. 100, and have a marker at a position that is equivalent to 2:45 PM (without specifically showing that the current time is 2:45 PM).  The closer the time gets to the 4:00 PM or upperbound value the closer to the "red" (literally) the user will be.

    Is this possible with the linear RadGauge in horizontal orientation to represent a timeline?  If there is an example or if one could be provided, that would be great as none of the examples/samples I have seen demonstrate something like this.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 04 Apr 2011 Link to this post

    Hi jgill,

    You can use a custom tick mark to show time as the gauge's label. The following sample code displays 2:00 PM and 4:00 PM:
    <Window x:Class="CustomTicks.MainWindow"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <DataTemplate x:Key="TickLabelAppearance">
                <TextBlock HorizontalAlignment="Center"
                       FontFamily="{Binding Path=Properties.FontFamily}"
                       FontSize="{Binding Path=Properties.FontSize}"
                       Foreground="{Binding Path=Properties.Foreground}"
                       Margin="4,2,4,2">
                <TextBlock.Text>
                    <Binding>
                        <Binding.Converter>
                            <telerik:LabelFormatConverter />
                        </Binding.Converter>
                    </Binding>
                </TextBlock.Text>
                </TextBlock>
            </DataTemplate>
      
            <Style x:Key="TickMarkStyle" TargetType="telerik:CustomTickMark">
                <Setter Property="Length" Value="0.075" />
                <Setter Property="TickWidth" Value="0.2" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle
                                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                Fill="White" 
                                Stretch="Fill" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" Value="{StaticResource TickLabelAppearance}" />
            </Style>
      
        </Window.Resources>
        <Grid>
            <telerik:RadGauge Width="200" Height="300">
                <telerik:LinearGauge>
                    <telerik:LinearScale MajorTicks="-1">
                        <telerik:TickList>
                            <telerik:CustomTickMark Value="0"
                                                    Format="2:00 PM"
                                                    Style="{StaticResource TickMarkStyle}">
                            </telerik:CustomTickMark>
                            <telerik:CustomTickMark Value="100"
                                                    Format="4:00 PM"
                                                    Style="{StaticResource TickMarkStyle}">
                            </telerik:CustomTickMark>
                        </telerik:TickList>
                    </telerik:LinearScale>
                </telerik:LinearGauge>
            </telerik:RadGauge>
        </Grid>
    </Window>

    Regards,
    Andrey Murzov
    the Telerik team
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top