We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DateTime x-axis label conversion?

Thread ID:





101183 Oct 4,2011 03:24 PM UTC Nov 2,2011 05:18 AM UTC WPF 6
Tags: Chart
Valerie Cole
Asked On October 4, 2011 03:24 PM UTC


I am using the chart control to display one or more series of live, continuously updating data, with DateTime as the x-axis data type. The x-axis range is updated so that the data displayed is for some window of time determined by other properties (let's say it shows the last 3 minutes of data). I want the x-axis labels to show as a TimeSpan though, as a value of DateTime.Now - X. I am having trouble figuring out how to accomplish this.

So far I have this code, which sets up an ObservableCollection to act as the LabelSource, and when the data is updated, it updates the collection:

// This code runs once when the chart is initialized
ObservableCollection> labelsSource = new ObservableCollection>();

chartArea.PrimaryAxis.ValueType = ChartValueType.DateTime;
chartArea.PrimaryAxis.LabelsMode = ChartAxisLabelsMode.DataSource;
chartArea.PrimaryAxis.LabelsSource = labelsSource;
chartArea.PrimaryAxis.PositionPath = "Key";
chartArea.PrimaryAxis.ContentPath = "Value";

// The following code executes whenever new data is added to the series data source
DateTime start = GetMinDateTimeForAxisRange(); // returns the start DateTime of the x-axis range, ~ 3 minutes ago
while (start < DateTime.Now)
labelsSource.Add(new KeyValuePair(start, (DateTime.Now - start).ToString()));
start += TimeSpan.FromSeconds(30);

labelsSource.Add(new KeyValuePair(DateTime.Now, "Now"));

This code appears to only partially work - I can see the tick lines, but there are no labels displayed. Also, if I try to add a format string to the (DateTime.Now - start).ToString("hh:mm"), it stops working completely - there are no tick lines and no labels shown.

Please help!



Valerie Cole
Replied On October 4, 2011 03:34 PM UTC

Sorry I forgot to add the generic types for the KeyValuePair.

Also I have attached an image that shows what I'm trying to achieve in the chart.


Valerie Cole
Replied On October 4, 2011 04:36 PM UTC

I did some digging with WPF Inspector and found that the ChartAxisLabels being generated do not have their Content or Axis set (both are null). The Position is set correctly though.

I looked at the data context of the axis, and it has the correct ContentPath="Value" and PositionPath="Key". It also has the LabelSource set to my ObservableCollection.

I think this may be a problem in the syncfusion code that creates the ChartAxisLabels from the LabelSource? Is it expecting the content path to point to a property of the same type as the x-axis values? Because I am pointing to a type of string, whereas the actual type of the x-axis data is DateTime...

Valerie Cole
Replied On October 4, 2011 09:04 PM UTC

Okay, so I have made some progress, but still having trouble...

For some reason, it didn't like me using KeyValuePair and using "Value" as the ContentPath. Instead I switched it to use anonymous objects and it started showing the labels.

Now, the problem is the edge labels. I have provided a sample application that will demonstrate the issue. When you press "Add Data Set" it adds a set of data to the chart, and at first the right-most edge label is not shown, then after a second (new data is added to the series), it shows the right edge label - but the left edge label is then hidden and never seen again!

Also, I specified in the style (found in App.xaml for simplicity) that the EdgeLabelsDrawingMode=Shift, yet it still appears to be drawing them as Center.

This sample application is almost exactly the same as the code I am working on in our application and testing it with - I am developing a light-weight wrapper control that performs some custom logic to make the Syncfusion chart do what we want, in an easy-to-use way. My wrapper code is in Chart.cs, and the default style/template is in App.xaml.

Please let me know what I'm doing wrong with the custom labels - I need both edge labels to show properly, without being cut off.

Also, if there is a better or built-in way to accomplish the live-updating, continuously data in the graph (even when no new data appears), please let me know. You will see what I mean when you run the app and add a data set.




Sujitha S [Syncfusion]
Replied On October 21, 2011 12:18 PM UTC

Hi Valerie,

We have created the simple sample based on your requirement, Please refer to the attached sample.

In the sample i have set the DateTime label in mm:ss format, that adds the real time data for every 10 seconds.

Let me know, if you have any queries.

Sujitha S


Valerie Cole
Replied On October 25, 2011 11:06 PM UTC

Hi Sujitha,

I am unable to run the sample provided... it is referencing Syncfusion.Chart.Wpf.SampleLayout.dll and I dont have that assembly...

Were you able to run the sample application I provided in my last post? The label on one end of the X axis disappears, and the other gets cut of...



Ganesan [Syncfusion]
Replied On November 2, 2011 05:18 AM UTC

Hi Valerie,

We would like to inform you that please followup in the incident I86519 for further details regarding the scenario reported in this forum,as this issue reported is being under track through our DirectTrac response system.

We will get back to you with the specified timeline to resolve the scenario reported through our DirectTrac response system .



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon