Multiple X-Axis LineSeries Issue

[Mike]

I have been trying to create a chart that has two x-axis lineseries. They both have the same Category and Value binding, but to 2 different items sources. Whenever I load the data into the data sources the graph are in the chart plots them side by side.

I am 99% sure this is because my category datasource doesn't have the same categories in each. I have a time element stored in milliseconds and a value element. Now the time element for the first record in the first dataset is "0.03" but in the second dataset it's "0.028". Second record is "0.07" and "0.66" respectively.

This is for a data logging analysis app, so I'm essentially trying to combine two sets of data with slightly differing millisecond capture points but overlayed on the same chart area.

So given that I have differing "categories" I'm presuming that I'd need to look at the linearaxis, but when I do I get no chart data. I'm trying to get something similar to the 2nd image on this Telerik post: http://blogs.telerik.com/winformsteam/posts/13-04-04/top-3-features-you'll-love-about-radchartview-q1'13

If I create a chart like this you can see what I mean:

<tel:RadCartesianChart >
  <tel:RadCartesianChart.HorizontalAxis>
    <tel:CategoricalAxis/>
  </tel:RadCartesianChart.HorizontalAxis>
  <tel:RadCartesianChart.VerticalAxis>
    <tel:LinearAxis/>
  </tel:RadCartesianChart.VerticalAxis>
  <tel:RadCartesianChart.Series>
    <tel:LineSeries Stroke="Orange" StrokeThickness="2">
      <tel:LineSeries.DataPoints>
       <tel:CategoricalDataPoint Category="1" Value="10"/>
       <tel:CategoricalDataPoint Category="2" Value="30"/>
       <tel:CategoricalDataPoint Category="3" Value="20"/>
      </tel:LineSeries.DataPoints>
    </tel:LineSeries>
    <tel:LineSeries Stroke="Blue" StrokeThickness="2">
      <tel:LineSeries.DataPoints>
        <tel:CategoricalDataPoint Category="1.1" Value="45"/>
        <tel:CategoricalDataPoint Category="2.1" Value="20"/>
        <tel:CategoricalDataPoint Category="3.1" Value="40"/>
      </tel:LineSeries.DataPoints>
    </tel:LineSeries>
  </tel:RadCartesianChart.Series>
 </tel:RadCartesianChart>

[Mike]

If it helps this is the actual chart in my app

<tel:RadCartesianChart
    Grid.Row="1"
    x:Name="radChart_Speed">
    <tel:RadCartesianChart.Behaviors>
        <tel:ChartPanAndZoomBehavior ZoomMode="Horizontal" />
    </tel:RadCartesianChart.Behaviors>
    <tel:LineSeries
        ItemsSource="{Binding TelemetrySimData.selectedLapNo1.ltTelemetryData}"
        CategoryBinding="telCurrentTime"
        Stroke="Blue"
        StrokeThickness="1"
        CombineMode="None"
        ValueBinding="telSpeed"/>
    <tel:LineSeries
        ItemsSource="{Binding TelemetrySimData.selectedLapNo2.ltTelemetryData}"
        CategoryBinding="telCurrentTime"
        Stroke="Red"
        CombineMode="None"
        StrokeThickness="1"
        ValueBinding="telSpeed" />
    <tel:LineSeries
        ItemsSource="{Binding TelemetrySimData.selectedLapNo3.ltTelemetryData}"
        CategoryBinding="telCurrentTime"
        Stroke="Green"
        CombineMode="None"
        StrokeThickness="1"
        ValueBinding="telSpeed" />
    <tel:RadCartesianChart.HorizontalAxis>
        <tel:DateTimeCategoricalAxis
            LabelFitMode="Rotate"
            ShowLabels="True"
            LabelInterval="5" DateTimeComponent="Second" MajorTickInterval="10">
            <tel:DateTimeCategoricalAxis.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ., Converter={StaticResource lapTimeConverter}}"/>
                </DataTemplate>
            </tel:DateTimeCategoricalAxis.LabelTemplate>
        </tel:DateTimeCategoricalAxis>
    </tel:RadCartesianChart.HorizontalAxis>
    <tel:RadCartesianChart.VerticalAxis>
        <tel:LinearAxis/>
    </tel:RadCartesianChart.VerticalAxis>
</tel:RadCartesianChart>

And this gives you a better idea of the data in the class:
Lap#1
telCurrentTime=0.100 telSpeed=100
telCurrentTime=0.110 telSpeed=103
telCurrentTime=0.120 telSpeed=105
telCurrentTime=0.130 telSpeed=109
Lap#2
telCurrentTime=0.110 telSpeed=102
telCurrentTime=0.115 telSpeed=106
telCurrentTime=0.126 telSpeed=106
telCurrentTime=0.138 telSpeed=108

I'm now proper stuck, so any help would be very much appreciated.

Thanks...

[Ves]

Hi Mike,

You need to use DateTimeContinuousAxis in this case. While DateTimeCategoricalAxis is meant to be used with DateTime values, your observations are correct and different values are treated as different categories. On the other hand, DateTimeContinuousAxis places the items, so that the timespans between the DateTime values are respected and points are placed appropriately.

Best regards,
Ves
Telerik

[Mike]

Thanks. I did look at that initially, but my data wasn't in a datetime format, so I couldn't get it to work. I've now changed the actual data to be in DateTime and it's working a treat.

Mike...