Multiple series adjacent rather than on top of each other

[Andrew]

I'm trying to create a LineSeries chart with two series of data which are displayed on top of each other. The display data is data bound to series1 and series2. When I use the code below the two graphs are adjacent to each other (series1 on the left and series2 on the right). How can I get the two series to display on top of each other?

<telerik1:RadCartesianChart x:Name="RadChart1">
 <telerik1:RadCartesianChart.HorizontalAxis>
  <telerik1:CategoricalAxis
   x:Name="AxisX"
   Title="Length (km)"
   IsStepRecalculationOnZoomEnabled="True"
   LabelFormat="{}{0:0.000}"
   MajorTickInterval="1000"
   PlotMode="OnTicks"
   SmartLabelsMode="SmartStep"
   TitleTemplate="{DynamicResource BoldAxisTitle}" />
 </telerik1:RadCartesianChart.HorizontalAxis>
 
 <telerik1:RadCartesianChart.VerticalAxis>
  <telerik1:LinearAxis
   x:Name="AxisY"
   Title="dB"
   MajorStep="5"
   Maximum="40"
   Minimum="0"
   TitleTemplate="{DynamicResource BoldAxisTitle}" />
 </telerik1:RadCartesianChart.VerticalAxis>
 
 <telerik1:RadCartesianChart.Series>
  <telerik1:LineSeries
   CategoryBinding="XVal"
   ItemsSource="{Binding series1}"
   Stroke="RoyalBlue"
   StrokeThickness="1"
   ValueBinding="YVal">
   
  </telerik1:LineSeries>
   <telerik1:LineSeries
   CategoryBinding="XVal"
   ItemsSource="{Binding series2}"
   Stroke="Purple"
   StrokeThickness="1"
   ValueBinding="YVal">
  </telerik1:LineSeries>
 </telerik1:RadCartesianChart.Series>
</telerik1:RadCartesianChart>

[Dinko | Tech Support Engineer]

Hello Andrew,

Thank you for contacting us.

I wasn't able to reproduce this behavior on my side. I have created sample project based on the provided code snippet. Give this project a try and let me know if I am missing something from your implementation. When you run the project you can observe that the series are visualized on top of each other.

Regards,
Dinko
Progress Telerik

[Andrew]

Dinko,

Thanks for your reply. I think I've worked out the problem thanks to your example. In my case the Category in PlotInfo is a double and not a string. The weird thing is that even though the doubles display the same number with Trace.WriteLine(x) they are obviously slightly different at the binary level. As a result the graph does not see the points from series1 and series2 as being in the same category. Strangely this results in the graphs being plotted side by side (in different colours) rather than on top of each other. Unfortunately my length (the double Category) is the result of a complex calculation and this must be causing the slight variation. I'll convert the double to a string with a fixed number of decimal places so both are using exactly the same category. You can simulate what I was seeing by changing your code to this:-

PlotInfo point1 = new PlotInfo();
point1.Category = i;
point1.Value = rnd.Next(5,40);
PlotInfo point2 = new PlotInfo();
point2.Category = i+100;
point2.Value = rnd.Next(5, 40);

[Dinko | Tech Support Engineer]

Hi Andrew,

The CategoricalAxis of the chart works with discrete data. This means that a category will be created for each distinct category value in the data source. So in order two data points to be placed in the same categorical slot they need to have an equal value. In the code snippet from your last reply the two points have a different category as the first one has "' the second one has "i+100". So when "i" is 10 the category of the point2 will be 110. In this case, the points will be placed in different categories because they have a different value. That is why in your case the series are placed next to each other.

PlotInfo point1 = new PlotInfo();
point1.Category = i;
point1.Value = rnd.Next(5,40);
PlotInfo point2 = new PlotInfo();
//point2.Category = i+100;
point2.Category = i;
point2.Value = rnd.Next(5, 40);

Regards,
Dinko
Progress Telerik