This is a migrated thread and some comments may be shown as answers.

[Solved] TimeSpan formated string in axis labels

5 Answers 279 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Andrea asked on 05 Aug 2016, 12:00 PM

Hello everybody,
I have a RadCartesianChart and I'm trying to represent durations on the x-axis of the RadCartesianChart. My values representing the x-axis-values are TimeSpan objects. I have a Converter converting TimeSpan values into string. In my xaml I have defined I LineSeries Chart which I want to display the data in.
But waht ever I try I get an empty chart only. Nothing is displayed.
I found this thread http://www.telerik.com/forums/how-to-use-a-special-label-format-for-axis-labels, but it doesn't work for me.
My xaml looks like following:

<telerikChart:LineSeries ItemsSource="{Binding RRCollection}"> <telerikChart:LineSeries.HorizontalAxis> <telerikChart:LinearAxisShowLabels="True" MajorStep="10"

Minimum="{Binding MinTimeSpan,Converter={StaticResource TimeSpanFormatConverter},

                                                       ConverterParameter='{}{0:hh\\:mm\\:ss\\.ffff}'}"

Maximum="{Binding MaxTimeSpan,Converter={StaticResource TimeSpanFormatConverter},

ConverterParameter='{}{0:hh\\:mm\\:ss\\.ffff}'}" <br

>                                                                     LabelStyle="{StaticResource AxisLabelStyle}" LineStyle="{StaticResource AxisLineStyle}" ><

br> <telerikChart:LinearAxis.LabelTemplate> <DataTemplate> <TextBlock

Text="{Binding .,Converter={StaticResource TimeSpanFormatConverter}, <br>                                                                                                         ConverterParameter='{}{0:hh\\:mm\\:ss\\.ffff}'}" /><

br> </DataTemplate> </telerikChart:LinearAxis.LabelTemplate> </telerikChart:LinearAxis> </telerikChart:LineSeries.HorizontalAxis> <telerikChart:LineSeries.CategoryBinding> <telerikChart:PropertyNameDataPointBinding PropertyName="Duration"/> </telerikChart:LineSeries.CategoryBinding> <telerikChart:LineSeries.ValueBinding> <telerikChart:PropertyNameDataPointBinding PropertyName="YValue"/> </telerikChart:LineSeries.ValueBinding> <telerikChart:LineSeries.PointTemplate> <DataTemplate> <Ellipse Width="5" Height="5" Fill="{Binding DataItem.Brush}"/> </DataTemplate> </telerikChart:LineSeries.PointTemplate> </telerikChart:LineSeries>

Is the LineSeries the right object for converted timespan into string or must it be a ScatterLineSeries? I don't know.
Thanks for your help.
Regards
Andrea

5 Answers, 1 is accepted

answered on 05 Aug 2016, 08:45 PM

Hi Andrea,

I cannot see your converter, so I cannot determine how you're applying the parameter. However, there is a simpler way to achieve the same display format. The one you're trying to use is the "General Short" format.

You can achieve by doing .ToString("g") on a TimeSpan object in the converter without passing a parameter.

Here's the new XAML:

<telerikChart:LinearAxis.LabelTemplate>

<DataTemplate>

<TextBlock Text="{Binding Converter={StaticResource TimeSpanFormatConverter}}" />

</DataTemplate>

</telerikChart:LinearAxis.LabelTemplate>

And heres the converter:

public object Convert(object value, Type targetType, object parameter, string language)

{

double seconds = System.Convert.ToDouble(value);

TimeSpan timeSpan = TimeSpan.FromSeconds(seconds);

return timeSpan.ToString("g");

}

Here's what is looks like on the axis:

Now, I need to address your LinearAxis's Minimum and Maximum bindings. That converter returns a string, but you need to set a double value there, so it wont work as-is. You could write a separate converter that returns the max and min from the TimeSpan, but I recommend letting the Chart automatically do that for you.

Concerning the series type, I cannot see your model or any sample data, so I can only surmise what you want to plot. I do suspect that ScatterLineSeries is what you want based on your PropertyNameBindings.

Lastly, I do not see a VerticalAxis defined, the chart will not plot anything until that is set. I've updated your XAML to include all of what I mentioned above as well as a VerticalAxis.

<telerikChart:RadCartesianChart>

<telerikChart:ScatterLineSeries ItemsSource="{Binding RRCollection}">

<telerikChart:ScatterLineSeries.VerticalAxis>

<telerikChart:LinearAxis />

</telerikChart:ScatterLineSeries.VerticalAxis>

<telerikChart:ScatterLineSeries.HorizontalAxis>

<telerikChart:LinearAxis ShowLabels="True">

<telerikChart:LinearAxis.LabelTemplate>

<DataTemplate>

<TextBlock Text="{Binding Converter={StaticResource TimeSpanFormatConverter}}" />

</DataTemplate>

</telerikChart:LinearAxis.LabelTemplate>

</telerikChart:LinearAxis>

</telerikChart:ScatterLineSeries.HorizontalAxis>

<telerikChart:ScatterLineSeries.XValueBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="Duration" />

</telerikChart:ScatterLineSeries.XValueBinding>

<telerikChart:ScatterLineSeries.YValueBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="YValue" />

</telerikChart:ScatterLineSeries.YValueBinding>

<telerikChart:ScatterLineSeries.PointTemplate>

<DataTemplate>

<Ellipse Width="5"

Height="5"

Fill="{Binding DataItem.Brush}" />

</DataTemplate>

</telerikChart:ScatterLineSeries.PointTemplate>

</telerikChart:ScatterLineSeries>

</telerikChart:RadCartesianChart>

If this still inst working for you, please respond with the following items:

- All your XAML code related to the Chart, including the missing AxisLineStyle and AxisLabelStyle (please do not include HTML in your XAML)
- The TimeSpanFormatConverter converter
- The model you're using (what is RRCollection a list of?)
- A sample of what RRCollection contains and the full (please make sure you do not have any HTML in it)

Another faster option that you can take is to put together a small sample that reproduces the problem and open a ticket here and attached the demo (this is the fastest option because support tickets have a 24hr response time, while forums can take up to 72 hours).

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 08 Aug 2016, 11:55 AM

Hi Lance,

many thanks for your reply.

I wanted to open a ticket but can't find a way to do this. I already created tickets but I don't know whow I did it. There is neither a button nor a link to create a ticket.

That's why I use this forum further. The converter does not work for me. No data are drawn. I followed your suggestion and put a small sample app togehter with all components you required, I hope.

You will see I put two charts into the MainPage.xaml. The lower chart has double values for the x axis. And this works how I exptect it. But I don't want the x axis with double values. I need duration values for the x axis and my approach is to use a TimeSpan object.

In my TimeSpanToStringConverter I get a ClassCastException. When I debug into the converter and look at the passed value the value is "0". So far I understand the ClassCastExcpetion. I don't understand where this value "0" comes from.

Could you help to find the error in my code?

I wanted to attache my sample project as zip packed file. But this format is not allowed. Could you help?

Regards

Andrea

answered on 08 Aug 2016, 03:56 PM

Hello Andrea,

Thank you for providing additional information. Regarding the actual problem of the converter's incoming value, I'll need to debug your project directly as there are several possible ways the value could be zero.

Correct, you cannot attach a ZIP to a forum thread, I have two options for you to proceed:

Option 1: Support Ticket with 24 guaranteed response time
I can see that you have recently had tickets open and your support license is still valid, so you can indeed open a ticket. There have been new changes to the way tickets are created, there's an extra step in the beginning. I've made this a little easier by providing a direct link for you, follow these instructions:

1- Go to this page to open a Windows Universal Support Ticket (make sure you are signed in with your Telerik account before clicking the link)
2- Fill out the form, attach your example project and submit it.

I'll keep an eye on your account for the next few hours and grab your ticket, alternatively you can reply here with your ticket ID number and I'll be notified immediately.

Option 2: Provide a download link here
You can upload your project to a place where you can share a link here. For example OneDrive or DropBox lets you upload a file and then get a publicly shareable URL that will let me download the project.

Please Confirm
Just so that I completely understand what you want, you're looking to get the CategoricalAxis (X) to show a TimeSpan value instead of a DateTime value?

Once I get your reproducible project, I can start investigating the cause and will get back to you as soon as possible with the solution.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

answered on 09 Aug 2016, 04:09 PM

Hi Andrea,

I have responded to your ticket with the fixes, I'll close this thread so that we can continue the conversation in the ticket.

Explanation for others visiting this thread: the solution is to use a converter that will take the double and convert it to a TimeSpan, then return the formatted string value of that TimeSpan.

public object Convert(object value, Type targetType, object parameter, string language)

{

//the incoming value for a axis tick label is a string

var totalMillisecondsString = value as string;

//first we need to parse it into an int

int totalMiliseconds;

if (int.TryParse(totalMillisecondsString, out totalMiliseconds))

{

//next, create a TimeSpan from the parsed int

var span = TimeSpan.FromMilliseconds(totalMiliseconds);

//lastly, return the string formatted version of the TimeSpan

return span.ToString("c");

}

//if anything fails, just return the original label text

return value;

}

For the Axis LabelTemplate:

<telerikChart:LinearAxis.LabelTemplate>

<DataTemplate>

<TextBlock Text="{Binding Converter={StaticResource TimeSpanFormatConverter}}" />

</DataTemplate>

</telerikChart:LinearAxis.LabelTemplate>

One final note, make sure that any custom styling is not obscuring the label text (e.g. light text against a light background)

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress