TrackballLabelTemplate on DateTimeAxis

[Robert Gehrke]

Hello,

is it possible to change the TrackballLabelTemplate (StringFormat) on a DateTimeAxis? At the moment the displayed label always has the format 'dd/MMM/yyyy'. But I need a format like dd.MM.yyyy HH:mm. How can I achieve this?

This is not working:

  <DataTemplate x:Key="TrackballTemplate">
                 <Label BackgroundColor="Green" Text="{Binding StringFormat='{}{0:dd.MM.yyyy HH:mm}'}" TextColor="White" FontSize ="15" VerticalTextAlignment="Center"/>
   </DataTemplate>

<xForms:DateTimeAxis TrackballLabelTemplate="{StaticResource TrackballTemplate}"....

...because BindingContext is already the formatted string.

Thanks in advance,

Robert

[Divya Venkatesan]

Hi Robert, 

 

Thanks for using Syncfusion products. 

 

We have achieved your requirement by setting LabelFormat for axis and using Converter for setting LabelFormat for Trackball. You can set the required LabelFormat for axis using LabelCreated event of axis. Please refer the below code snippets. 

 

Code snippet for setting LabelFormat for axis[Xaml]: 

<chart:DateTimeAxis.LabelStyle> 

    <chart:ChartAxisLabelStyle LabelFormat="dd/MM/yyyy hh:mm:ss"/> 

</chart:DateTimeAxis.LabelStyle> 

 

Code snippet for TrackballLabelTemplate[Xaml]: 

<DataTemplate x:Key="TrackballTemplate"> 

    <Label BackgroundColor="Green" Text="{Binding Converter={StaticResource converter}}"  

           TextColor="White" FontSize ="15" VerticalTextAlignment="Center"/> 

</DataTemplate> 

 

Code snippet of Converter for setting LabelFormat for Trackball[C#]: 

    public class Converter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            if (value != null) 

            { 

                var date = System.Convert.ToDateTime(value.ToString()); 

                value = date.ToString("dd.MM.yyyy HH:mm"); 

            } 

            return value; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value; 

        } 

    } 

 

Code snippet for hooking LabelCreated event[Xaml]: 

<chart:DateTimeAxis LabelCreated="DateTimeAxis_LabelCreated"/> 

 

Code snippet of LabelCreated event[Xaml]: 

private void DateTimeAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e) 

{ 

    var date = Convert.ToDateTime(e.LabelContent); 

    e.LabelContent = date.ToString("MMM-dd"); 

} 

 

We have prepared a sample for this which can be downloaded from the following link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136913/ze/TrackballLabelFormat1143217136  

 

Please let us know if you need any further assistance. 

 

Regards, 

Divya Venkatesan 

 

[Robert Gehrke]

Hello Divya,

sorry for my late reply.

I integrated your code snippets in my solution, but with no success (exception in converter). Then I tried your example, with same result:

"System.FormatException: String was not recognized as a valid DateTime." String value is "Jan.-15" in your example. 

And I forgot to mention in my previous posting, that I'm already binding the LabelFormat (<xForms:ChartAxisLabelStyle LabelFormat="{Binding XLabelFormat}"></xForms:ChartAxisLabelStyle>), because I want to change the label format depending on the displayed date range. But the trackball label format does not have to be changed, but it should be independent from the axis-tick-template.

Is that possible?

Regards,

Robert

[Divya Venkatesan]

Hi Robert, 

 

By default, axis label will be displayed in “MMM-dd” format in Android and iOS. If you want to set the label format for axis trackball label, you need to set the axis label format as “dd/MM/yyyy hh:mm:ss” initially and then you can set the axis label format as needed in LabelCreated event of chart axis. Please refer the below code snippets. 

 

Code snippet for setting axis label Initially[Xaml]: 

<chart:DateTimeAxis.LabelStyle>  

    <chart:ChartAxisLabelStyle LabelFormat="dd/MM/yyyy hh:mm:ss"/>  

</chart:DateTimeAxis.LabelStyle> 

 

Code snippet for setting axis label format as needed[C#]: 

private void DateTimeAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e)  

{  

    var date = Convert.ToDateTime(e.LabelContent);  

    e.LabelContent = date.ToString(viewModel.XLabelFormat);  

}  

 

Please let us know if you need any further assistance. 

 

Regards, 

Divya Venkatesan