Custom label Issue with Chart with Date in X Axis

4 posts, 0 answers
  1. sunita
    sunita avatar
    9 posts
    Member since:
    Feb 2011

    Posted 23 Aug 2011 Link to this post

    hello team,

    i want to have a custom X-axis for my line chart wherein X-axis we have dates but the format is Month and year (Dec 11). i want it in form of (Q4Y2011) . how can we do this.

    Regards,
    Sunita

  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 25 Aug 2011 Link to this post

    Hello Sunita,

    RadChart supports both standard and custom date/time format expressions, which you can use to format the series items labels, axes labels and tooltip texts. However, there are cases when the supported format strings for the Chart may fall short in meeting a particular format behavior. In such scenarios, you can customize Axis Labels via a converter.
    Steps for achieving this:
    1. Retemplate the AxisLabel2D, which is the type for the labels along both the x and y axis:

    <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?>
                    <telerik:LayoutTransformControl x:Name="PART_LayoutTransformControl" VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                        <telerik:LayoutTransformControl.Content>
                            <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                   Text="{Binding Converter={StaticResource DateConverter}}"/>
                        </telerik:LayoutTransformControl.Content>
                        <telerik:LayoutTransformControl.LayoutTransform>
                            <RotateTransform x:Name="PART_RotateTransform" />
                        </telerik:LayoutTransformControl.LayoutTransform>
                    </telerik:LayoutTransformControl>
                    <?SILVERLIGHT END?>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    2. Set a DefaultLabelFormat for the axis which will be customized. This default format will be used in the converter, to differentiate between the labels along the x and y axis. This may look something like this:

    Chart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "CustomXFormat";

    3. Include the actual converter in code-behind:

    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 == "CustomXFormat")
            {
                //Implement custom logic for formatting the XValues and displaying a fiscal period.
                //For example:
                //returnValue = GetFiscalPeriod(...) + DateTime.FromOADate((value as TickPoint).Value).ToString("MMM");
            }
            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;
        }
    }

    4. Include the converted in the resources section on the page:

    <converter:DateConverter x:Key="DateConverter">          
    </converter:DateConverter>

    Greetings,
    Evgenia
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. sunita
    sunita avatar
    9 posts
    Member since:
    Feb 2011

    Posted 02 Nov 2011 Link to this post

    hello Evgenia

    can you give me the sample example of this.

    thanks

    Sunita

  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 07 Nov 2011 Link to this post

    Hello Sunita,

    You may find attached a sample project that demonstrates the approach I described in my previous post. The sample is based on the MVVM pattern and you may feel free to customize it per your needs.

    Greetings,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top