Series is not displayed if the elements of the collection are not exactly the same as the CategoryDateTimeXAxis

Andrew Rosca posted over 10 years ago

I am having the following problem: I have a chart with two series and a time axis. The series are bound to collections of objects where one of the properties is DateTime. The CategoryDateTimeXAxis is bound to a third collection of DateTime instances.

If the two series have exactly the same number of elements, with the same values, as the X axis, everything works. However, if the axis has a different number of elements, the series are not displayed. If one of the collections has fewer elements, it is not displayed.

In short, unless the axis collection and the series collections line up exactly, the series are not displayed.

My expectation would be that the chart control lines up the data points in each series with the axis by comparing DateTime values. This does not appear to be happening.

I have set up the test project below. The first chart has the exact same elements in all 3 collections (DateTime values at 1 minute intervals). The second chart has the date axis bound to a collection with twice as many elements as the series (DateTime values at 30 second intervals). On the second chart nothing is displayed.

As an additional test, when I remove one element from one of the series, that series disappears from the chart:

Items2.RemoveAt(0);

Here is my code:

XAML:

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ig="http://schemas.infragistics.com/xaml" x:Class="XamDataChartTest.MainWindow"

Title="MainWindow" Height="500" Width="500"

DataContext="{Binding RelativeSource={RelativeSource Self}}"

<Grid>

<ig:XamDataChart HorizontalAlignment="Stretch" Height="220">

<ig:XamDataChart.Axes>

<ig:CategoryDateTimeXAxis x:Name="xAxis1" DateTimeMemberPath="." ItemsSource="{Binding TimesMinutes}" Label="{}{:HH:mm}"/>

<ig:NumericYAxis x:Name="yAxis1"/>

</ig:XamDataChart.Axes>

<ig:XamDataChart.Series>

<ig:LineSeries XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}" ItemsSource="{Binding Items1}" ValueMemberPath="Value"/>

<ig:LineSeries XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}" ItemsSource="{Binding Items2}" ValueMemberPath="Value"/>

</ig:XamDataChart.Series>

</ig:XamDataChart>

<ig:XamDataChart HorizontalAlignment="Stretch" Height="220">

<ig:XamDataChart.Axes>

<ig:CategoryDateTimeXAxis x:Name="xAxis2" DateTimeMemberPath="." ItemsSource="{Binding TimesSeconds}" Label="{}{:HH:mm}"/>

<ig:NumericYAxis x:Name="yAxis2"/>

</ig:XamDataChart.Axes>

<ig:XamDataChart.Series>

<ig:LineSeries XAxis="{Binding ElementName=xAxis2}" YAxis="{Binding ElementName=yAxis2}" ItemsSource="{Binding Items1}" ValueMemberPath="Value"/>

<ig:LineSeries XAxis="{Binding ElementName=xAxis2}" YAxis="{Binding ElementName=yAxis2}" ItemsSource="{Binding Items2}" ValueMemberPath="Value"/>

</ig:XamDataChart.Series>

</ig:XamDataChart>

</StackPanel>

</Grid>

</Window>

Code-behind:

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace XamDataChartTest

{

public class Item

{

public DateTime Time { get; set; }

public double Value { get; set; }

}

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

for (var time = DateTime.Now; time < DateTime.Now.AddHours(12); time = time.AddMinutes(1))

{

Items1.Add(new Item { Time = time, Value = time.Subtract(DateTime.Now).TotalSeconds });

Items2.Add(new Item { Time = time, Value = 12 * 60 * 60 - time.Subtract(DateTime.Now).TotalSeconds});

//Items2.RemoveAt(0);

TimesMinutes.Add(time);

}

for (var time = DateTime.Now; time < DateTime.Now.AddHours(12); time = time.AddSeconds(1))

{

TimesSeconds.Add(time);

}

public ObservableCollection<DateTime> TimesMinutes

{

get { return (ObservableCollection<DateTime>)GetValue(TimesMinutesProperty); }

set { SetValue(TimesMinutesProperty, value); }

}

// Using a DependencyProperty as the backing store for Times. This enables animation, styling, binding, etc...

public static readonly DependencyProperty TimesMinutesProperty =

DependencyProperty.Register("TimesMinutes", typeof(ObservableCollection<DateTime>), typeof(MainWindow), new PropertyMetadata(new ObservableCollection<DateTime>()));

public ObservableCollection<DateTime> TimesSeconds

{

get { return (ObservableCollection<DateTime>)GetValue(TimesSecondsProperty); }

set { SetValue(TimesSecondsProperty, value); }

}

// Using a DependencyProperty as the backing store for Times. This enables animation, styling, binding, etc...

public static readonly DependencyProperty TimesSecondsProperty =

DependencyProperty.Register("TimesSeconds", typeof(ObservableCollection<DateTime>), typeof(MainWindow), new PropertyMetadata(new ObservableCollection<DateTime>()));

public ObservableCollection<Item> Items1

{

get { return (ObservableCollection<Item>)GetValue(Items1Property); }

set { SetValue(Items1Property, value); }

}

// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...

public static readonly DependencyProperty Items1Property =

DependencyProperty.Register("Items1", typeof(ObservableCollection<Item>), typeof(MainWindow), new PropertyMetadata(new ObservableCollection<Item>()));

public ObservableCollection<Item> Items2

{

get { return (ObservableCollection<Item>)GetValue(Items2Property); }

set { SetValue(Items2Property, value); }

}

// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...

public static readonly DependencyProperty Items2Property =

DependencyProperty.Register("Items2", typeof(ObservableCollection<Item>), typeof(MainWindow), new PropertyMetadata(new ObservableCollection<Item>()));

}

12875

[Infragistics] Marianne posted over 10 years ago

Hi Andrew,

I have several links for you but I think Graham described the issue you are seeing best on this link.

http://ko.infragistics.com/community/forums/t/72339.aspx

This is Graham’s description of the issue.

when using the CategoryDateTimeXAxis, unless each series has exactly the same number of entries with the same dates in the same order, you should use a seperate CategoryDateTimeXAxis per series. You would then synchronize their ranges by using the MinimumValue and MaximumValue.

Since the CategoryDateTimeXAxis handles reordering of unordered data and auto-min/max, you can't share it between series unless their data alignment is identical.

Scroll down on this site and look for Graham Murray’s response and explanation concerning the CategoryDateTimeXAxis. http://ko.infragistics.com/community/forums/p/71286/366652.aspx#366652

Here is another site where Stefan provides an explanation and a couple of samples that are using CategoryDateTimeXAxis with multiple series. http://ko.infragistics.com/community/forums/t/78217.aspx?PageIndex=1

Remember that you will need to align the two Axes by setting MinimumValue and MaximumValue on each and you will also need to set the AxisLabelSetting Visibility to Collaped on one of the Axes.

If you need to eliminate a value for one of the Items collections, you can set the Value to Double.NaN while retaining the Time for your Item class.

Please let me know if you have any questions.
Cancel
Reply

Cancel