Zoom doesn't work with multiple series

[Gaya]

Hi,

When I create one line series, the zoom and scroll work fine.
However, when I add more line series and try to zoom in, the series behave weird. Parts of the lines disappear and they don't actaully look like they're zoomed in.

Is there a limitation to implementing zoom on only one series? Or am I doing something wrong?


Thanks in advance.

[Gaya]

Hi, it's me again.
Does anyone have any idea as to how to solve my problem?

I didn't give a lot of details because I thought it might just be a known bug.

Has anyone ever created a chart using seriesmappings, with multiple line series, and had the zoom and scroll features work?

It's works fine for one line series, but then when I add more, doing it exactly the same way I added the first one, the zoom doesn't work.
When I try to zoom in, I do seem to only see the relevant parts of the lines according to the area I selected, but they're not actually zoomed in. What happens is that the the non relevant areas just disappear - it's like they become invisible and leave only the selected areas visible, but with no change in resolution. So the visible areas of the line are in the middle of the chart area, with empty areas on each side.

Has this happened to anyone before?

[Gaya]

Okay, so I've come to kind of a conclusion -
When I add multiple line series to my chart, that use a DateTime X axis, the zoom doesn't work properly unless all the line series have the same DateTime values.
Example:
I create two lists to represent two line series on the same chart. The lists contain MyData objects (MyData has two properties - double Value, DateTime Time). Notice that the DateTime values in each list are not the same.

List<MyData> FirstLineSeries = new List<MyData>();
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:00));
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:01));
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:02));
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:03));
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:04));
FirstLineSeries.Add(new MyData(2, 02/06/10 13:45:05));

List<MyData> SecondLineSeries = new List<MyData>();
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:00));
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:01));
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:03));
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:04));
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:05));
SecondLineSeries .Add(new MyData(2, 02/06/10 13:45:06));

If the DateTime values are the same (i.e - both lists contain MyData objects for 13:45:00, 13:45:01, 13:45:02 etc.), the zoom works fine.
But since they're different (notice FirstLineSeries has 13:45:02 in it, while SecondLineSeries doesn't), the zoon literally goes crazy when I load the chart. I still can't figure out what happens.


Do I have to make sure the DateTime values match 100% in all line series? Or am I still missing something?

Anyone who might have an idea, even if you're not sure of the answer, please leave a post. Might make me realise new things.


Thanks.

[Nikolay]

Hi Gaya,

We have encountered a similar issue and it has been logged for our developers to investigate, however, it is in a slightly different scenario. Could you, please, let us know if this problem only occurs when using a nested collection? Does it reproduce when the X Axis is not DateTime, for example, binding the series to DataPointMember.XValue?

As a possible work-around, could you try adding a manual X-Axis range and see if the problematic behavior still reproduces.

All the best,
Nikolay
the Telerik team

[Gaya]

Thanks for the reply.

I figured out what the problem was and how to work around it:

For the chart's ItemsSource, I create a list of lists, always using DateTime for the X Axis.
What I've discovered, is that if not all lists start and begin at exactly the same time, the zoom doesn't work properly. As I zoom in closer, the lines are less and less accurate. It's hard to descrive exactly what happens, but it's definitely not the expected behavior.
However, if all lists start and end at the same time (meaning the first item of each list has the same DateTime value, and same for the last item of each list), then the DateTime values within the lists don't have to match, and the zoom works fine.

So if for example I have two lists that both begin at 12:12:12 and end at 22:00:00, but the rest of the DateTime values within the lists don't match, it'll work fine.
If I take the exact same lists and change the start or end time of one of them, the zoom will behave differently.

So what I do to work around this, is that after filling my nested list with data and before displaying it on the chart, I go over all lists and find the minimum start date and maximum end date, and then manually add items to the beginning and end of the other lists, getting all lists to match each other's start and end dates.
Meanwhile, this solution seems to do the job.


As for your questions:

1. The problem only occured when I used a nested collection (list of lists). How can it occur otherwise? The problem only ever happens when I display more than one data series in the ChartArea, and as far as I know, the only way to set ItemsSource with more than one data series, is with some type of nested collection.

2. The problem also happens when I use type double for the XValue of an ItemMapping. So it doesn't only happen with DateTime, but with other data types too

3. As for adding a manual X Axis range - I tried, but I can't figure out how to set a range that's of type DateTime (the AddRange method takes two doubles as the range's beginning and end). However, the solution I use, also works with AutoRange for the X Axis.



Hope I was clear enough in my descriptions, and thanks again for the reply.

[Ves]

Hi Gaya,

Thank you for the additional information. Here are some clarifications regarding #1 and #3:

1) It is possible to populate RadChart with one list and to have several series in it. For this purpose, you need to create several SeriesMappings, where it would be expected, that in each of them the ItemMapping with DataPointMember=DataPointMember.XValue will have the same FieldName. You can find such example here - Live Data. There is one SeriesMapping for CPU Load and another for Memory Usage.

3) Indeed, the axes in RadChart are numeric, so you cannot supply DateTime values directly. Instead, you can provide the OLEAutomation date equivalent (use the ToOADate() method to obtain it), here is an example:

radChart.DefaultView.ChartArea.AxisX.MinValue = new DateTime( 2009, 1, 1 ).ToOADate();

You will also need to set the IsDateTime property to true. You can find more details in this help topic.

Best regards,
Ves
the Telerik team

[Ulrich]

I experience exactly the same problems, but I cannot use the provided workaround.

I have to display climatic data from monitoring drug storage, so I cannot simply add values which in reality never existed.

I tried setting the range of the x-axis manually, without any success.

Is there any other workaround for this? If I can't find a workaround, I would have to switch to a different control, which I am not a huge fan off since I am very impressed with the wpf chart so far.

best regards

Ulrik

[Velin]

Hello Ulrich,

Setting the X axis range to a custom one should make this issue go away. Please, review the attached example.

Hope this will help.

Sincerely yours,
Ryan
the Telerik team

[Ulrich Witschaß]

Hello Ryan,

I posted an example application to your support today which shows that setting a manual X range sadly does not fix the problem.

Regarding the example you posted: this doesn't really reflect the problem we are facing. I modified your example to nested lists and DateTime-X-Values, and zooming and scrolling stops working.

You can test it if you modify your CodeBehind file with the following:

public MainWindow()
      {
          InitializeComponent();

          IList<A> series1 = new List<A>();
          IList<A> series2 = new List<A>();

          DateTime start_time1 = DateTime.Now.AddDays(-7);
          DateTime start_time2 = DateTime.Now.AddDays(-10).AddMinutes(30);
          DateTime now = DateTime.Now;
          Random r = new Random(Environment.TickCount);
          while (start_time1 < now)
          {
              A a = new A();
              a.Date = start_time1;
              a.Y = r.Next(1, 100);
              series1.Add(a);
              start_time1 = start_time1.AddHours(1);
          }

          now = now.AddDays(-3);
          while (start_time2 < now)
          {
              A a = new A();
              a.Date = start_time2;
              a.Y = r.Next(1, 100);
              series2.Add(a);
              start_time2 = start_time2.AddHours(1);
          }

          this.Data.Add(series1);
          this.Data.Add(series2);


          SeriesMapping m1 = new SeriesMapping() { SeriesDefinition = new LineSeriesDefinition(), CollectionIndex=0 };
          m1.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "Y" });
          m1.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XValue, FieldName = "Date" });

          SeriesMapping m2 = new SeriesMapping() { SeriesDefinition = new LineSeriesDefinition(), CollectionIndex = 1 };
          m2.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "Y" });
          m2.ItemMappings.Add(new ItemMapping() { DataPointMember = DataPointMember.XValue, FieldName = "Date" });

          RadChart1.SeriesMappings.Add(m1);
          RadChart1.SeriesMappings.Add(m2);

          RadChart1.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
          RadChart1.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;

          RadChart1.DefaultView.ChartArea.AxisX.AutoRange = false;
          RadChart1.DefaultView.ChartArea.AxisX.AddRange(DateTime.Now.AddDays(-7).ToOADate(), DateTime.Now.ToOADate(), 25);


          RadChart1.ItemsSource = Data; // new ObservableCollection<A>(A.Get());
      }

       IList<IList<A>> Data = new List<IList<A>>();
  }

  public class A
  {
      public DateTime Date { get; set; }
      public int Y { get; set; }
      public int X1 { get; set; }
      public int X { get; set; }

      public static IEnumerable<A> Get()
      {
          Random r = new Random(Environment.TickCount);
          for (int i = 0; i < 100; i++)
          {
              yield return new A() { Y = r.Next(1, 100), X = i + 100, X1=i };
          }
      }
  }

best regards

Ulrik

[Ves]

Hi Ulrich Witschaß,

Your ticket has been replied. Let us know if further questions arise.

Sincerely,
Ves
the Telerik team