Y-Axis formatting in line/bar charts

5 posts, 0 answers
  1. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 10 Mar 2011 Link to this post

    Hello,

    We have the requirement to format the labels on the Y-Axis as times (3:00,4:00,5:00, etc). From what I can tell, the control converts all data to doubles and I can only supply a standard .NET format string.  Is there a simple solution for this?

    Thanks,

    Mike
     
  2. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 14 Mar 2011 Link to this post

    any options here?
  3. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 15 Mar 2011 Link to this post

    Hello Mike,

    You can format the values along the y axis, by using a custom format string:

    Chart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat

    If this does not meet your requirements well, you can have more complete control over the YAxis, and the labels. You can use a converter, to convert the default value, to whatever format/value suits your scenario best. A sample setup for the xaml may look like this:

    <UserControl x:Class="Chart.Q3.Fixes.Empty.Empty2"
        mc:Ignorable="d"
                 xmlns:converter="clr-namespace:Chart.Q3.Fixes.Empty"
                 xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
                 xmlns:Chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
                 xmlns:telerik="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
                 xmlns:local="clr-namespace:Chart.Q3.Fixes.Empty"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
      
            <converter:DateConverter x:Key="DateConverter">            
            </converter:DateConverter>
              
            <Style       
                TargetType="telerik:AxisLabel2D">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="ItemLabelStyle">
                    <Setter.Value>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextAlignment" Value="Center" />
                            <Setter Property="Padding" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:AxisLabel2D">                       
                            <?SILVERLIGHT BEGIN?>
                            <primitives:LayoutTransformControl x:Name="PART_LayoutTransformControl" 
                                                           VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                           HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                                <primitives:LayoutTransformControl.Content>
                                    <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                           Text="{Binding Converter={StaticResource DateConverter}}" />
                                </primitives:LayoutTransformControl.Content>
                                <primitives:LayoutTransformControl.LayoutTransform>
                                    <RotateTransform x:Name="PART_RotateTransform" />
                                </primitives:LayoutTransformControl.LayoutTransform>
                            </primitives:LayoutTransformControl>
                            <?SILVERLIGHT END?>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
      
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
      
            <Chart:RadChart x:Name="Chart1">              
            </Chart:RadChart>
      
        </Grid>
    </UserControl>

    and the converted is a pretty standard one, as shown below:

    public class DateConverter : IValueConverter
       {
           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
           {
               string returnValue;
               TickPoint tickPoint = value as TickPoint;
               if ((value as TickPoint).LabelFormat == "CustomYFormat" && (value as TickPoint).Value.ToString().Length>3 )
               {
                   returnValue = (value as TickPoint).Value.ToString().Substring(0, 3) + "Custom text";
               }
               else
               {
                   returnValue = (value as TickPoint).Value.ToString(); ;
               }
                             
               return returnValue;
           }
           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
           {
               string strValue = value as string;
               DateTime resultDateTime;
               if (DateTime.TryParse(strValue, out resultDateTime))
               {
                   return resultDateTime;
               }
               return DependencyProperty.UnsetValue;
           }
       }

    I hope this information helps.

    All the best,
    Yavor
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  4. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 16 Mar 2011 Link to this post

    Yavor, that was exactly what we were looking for thank you.  Is there a way to re-template the annotation tooltip on the chart as well?  The tooltip has the same requirement as the axis labels.

    Mike
  5. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 21 Mar 2011 Link to this post

    Hi Mike,

    For customizing the tooltip, you can take a slightly different approach. This is elaborated on in the following help article:

    http://www.telerik.com/help/silverlight/radchart-features-tooltips.html

    The last section, "Customizing Tooltip Content" includes more information along the lines of customizing the tooltip.
    I hope this information helps.

    Kind regards,
    Yavor
    the Telerik team
Back to Top