Multiple X-Axis LineSeries Issue

4 posts, 0 answers
  1. Mike
    Mike avatar
    28 posts
    Member since:
    Apr 2013

    Posted 11 Sep 2013 Link to this post

    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>
  2. Mike
    Mike avatar
    28 posts
    Member since:
    Apr 2013

    Posted 11 Sep 2013 Link to this post

    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...



  3. UI for WPF is Visual Studio 2017 Ready
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Sep 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  5. Mike
    Mike avatar
    28 posts
    Member since:
    Apr 2013

    Posted 25 Sep 2013 Link to this post

    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...
Back to Top