Home / Community & Support / Developer Productivity Tools Forums / WPF > Gauges > Is there a way to use times as labels on a linear gauge like a timeline?

• jgill Intermediate

  Posted on Mar 30, 2011 (permalink)

  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.

  Reply

• Andrey Andrey

  Posted on Apr 4, 2011 (permalink)

  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"

          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

          xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

          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

  Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Gauges > Is there a way to use times as labels on a linear gauge like a timeline?