How to combine two or more Line and Areaseries

[Guntram]

Hi chartview evangelists,

I am trying to combine two or more series of different kinds in one chart.
They all have the same x axis, Nautical miles.

They all have different heights to show, e.g. groundlevel, cloudlevel, freezelevel and so on.

Currently they all have their own horizontal categoryaxis and the data does not really correlate.

Here my Xaml:

<telerik:RadCartesianChart x:Name="chartProfle" d:LayoutOverrides="Height" Grid.Row="1" EmptyContent="No route selected.">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartSelectionBehavior x:Name="chartProfileSelectionBehaviour" DataPointSelectionMode="Multiple" HitTestMargin="0" SelectionChanged="chartProfileSelectionBehaviour_SelectionChanged" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis x:Name="axHeight" LabelFormat="0"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:SplineAreaSeries x:Name="Ground" Fill="#FF58972E" DisplayName="Groundpath" AllowSelect="True" StrokeMode="LeftLine">
        <telerik:SplineAreaSeries.HorizontalAxis>
            <telerik:CategoricalAxis LabelFormat="0" LabelInterval="100" PlotMode="OnTicksPadded"/>
        </telerik:SplineAreaSeries.HorizontalAxis>
        <telerik:SplineAreaSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="dElevation"/>
        </telerik:SplineAreaSeries.ValueBinding>
    </telerik:SplineAreaSeries>
    <telerik:LineSeries x:Name="Flightpath" Stroke="Blue" ItemsSource="{Binding ItemsSource, ElementName=lstRoutePoints}" DisplayName="Flightpath" AllowSelect="True">
        <telerik:LineSeries.Resources>
            <DataTemplate x:Key="RoutePointChartTemplate">
                <Grid x:Name="grdChartPoint" Background="Black">
                    <sdk:Label x:Name="lblChartPoint" Margin="0" d:LayoutOverrides="Height" Background="White" Content="{Binding DataItem.PSortOrder}" BorderBrush="Black" BorderThickness="1" Padding="1" Width="20" HorizontalAlignment="Center" FontSize="9.333" FontWeight="Bold" ToolTipService.ToolTip="{Binding DataItem.pDescription}"/>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FlightPathTrackballTemplate">
                <Grid>
                    <sdk:Label Margin="0" d:LayoutOverrides="Width, Height" Content="{Binding DataItem.ID}"/>
                </Grid>
            </DataTemplate>
        </telerik:LineSeries.Resources>
        <telerik:LineSeries.HorizontalAxis>
            <telerik:CategoricalAxis LabelFormat="0" LabelInterval="100" PlotMode="OnTicksPadded"/>
        </telerik:LineSeries.HorizontalAxis>
        <telerik:LineSeries.TrackBallInfoTemplate>
            <StaticResource ResourceKey="FlightPathTrackballTemplate"/>
        </telerik:LineSeries.TrackBallInfoTemplate>
        <telerik:LineSeries.PointTemplate>
            <StaticResource ResourceKey="RoutePointChartTemplate"/>
        </telerik:LineSeries.PointTemplate>
        <telerik:LineSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="pHeight"/>
        </telerik:LineSeries.ValueBinding>
        <telerik:LineSeries.CategoryBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Distance0Kum"/>
        </telerik:LineSeries.CategoryBinding>
    </telerik:LineSeries>
</telerik:RadCartesianChart>

What I want is to have the distance from start placed correctly on the x axis.

Could you please help how to achieve this?

Thanks in advance

[Nikolay]

Hi,

If both series should share the same categorical axis it is not needed to define it for each of the series, but for the whole chart instead :

<telerik:RadCartesianChart x:Name="chartProfle" d:LayoutOverrides="Height" Grid.Row="1" EmptyContent="No route selected.">
        <telerik:RadCartesianChart.Behaviors>
            <telerik:ChartSelectionBehavior x:Name="chartProfileSelectionBehaviour" DataPointSelectionMode="Multiple" HitTestMargin="0" SelectionChanged="chartProfileSelectionBehaviour_SelectionChanged" />
        </telerik:RadCartesianChart.Behaviors>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis x:Name="axHeight" LabelFormat="0"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis LabelFormat="0" LabelInterval="100" PlotMode="OnTicksPadded"/>
        </telerik:RadCartesianChart.HorizontalAxis>
          ...

This way both series would share the same axes and there is no need to define them for each of them, you would only need to set the Value and Category bindings.

Regards,
Nikolay
the Telerik team

[Guntram]

Hi Nikolay,

thank you for your answer. I just tried it and my xaml now looks like that:

<telerik:RadCartesianChart x:Name="chartProfle" d:LayoutOverrides="Height" Grid.Row="1" EmptyContent="No route selected.">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis PlotMode="OnTicksPadded"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartSelectionBehavior x:Name="chartProfileSelectionBehaviour" DataPointSelectionMode="Multiple" HitTestMargin="0" SelectionChanged="chartProfileSelectionBehaviour_SelectionChanged" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis x:Name="axHeight" LabelFormat="0"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:SplineAreaSeries x:Name="Ground" Fill="#FF58972E" DisplayName="Groundpath" AllowSelect="True" StrokeMode="LeftLine">
        <telerik:SplineAreaSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="dElevation"/>
        </telerik:SplineAreaSeries.ValueBinding>
    </telerik:SplineAreaSeries>
    <telerik:LineSeries x:Name="Flightpath" Stroke="Blue" ItemsSource="{Binding ItemsSource, ElementName=lstRoutePoints}" DisplayName="Flightpath" AllowSelect="True">
        <telerik:LineSeries.Resources>
            <DataTemplate x:Key="RoutePointChartTemplate">
                <Grid x:Name="grdChartPoint" Background="Black">
                    <sdk:Label x:Name="lblChartPoint" Margin="0" d:LayoutOverrides="Height" Background="White" Content="{Binding DataItem.PSortOrder}" BorderBrush="Black" BorderThickness="1" Padding="1" Width="20" HorizontalAlignment="Center" FontSize="9.333" FontWeight="Bold" ToolTipService.ToolTip="{Binding DataItem.pDescription}"/>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FlightPathTrackballTemplate">
                <Grid>
                    <sdk:Label Margin="0" d:LayoutOverrides="Width, Height" Content="{Binding DataItem.ID}"/>
                </Grid>
            </DataTemplate>
        </telerik:LineSeries.Resources>
        <telerik:LineSeries.TrackBallInfoTemplate>
            <StaticResource ResourceKey="FlightPathTrackballTemplate"/>
        </telerik:LineSeries.TrackBallInfoTemplate>
        <telerik:LineSeries.PointTemplate>
            <StaticResource ResourceKey="RoutePointChartTemplate"/>
        </telerik:LineSeries.PointTemplate>
        <telerik:LineSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="pHeight"/>
        </telerik:LineSeries.ValueBinding>
        <telerik:LineSeries.CategoryBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Distance0Kum"/>
        </telerik:LineSeries.CategoryBinding>
    </telerik:LineSeries>
</telerik:RadCartesianChart>

Unfortuneately, now I geht botht series side by side. I added an image of what I get.
What I want is to have them on the same xaxis.

BTW, why do I have to use an categorcal axis with lineseries? My xvalues are linear and is measured in nautical miles.
Maybe this is causing the problem.

Do you have an idea with that?

Thanks,
Guntram

[Nikolay]

Hi Guntram,

From the provided xaml it seems the SplineAreaSeries does not have a Category binding, which is the most likely reason why the series are not aligned correctly - in order for both series to share the same axis, they would have to have the same Category binding.

As for having both horizontal and vertical axes being linear, then the series types would be incorrect, as both SplineArea and Line series are categorical. They would have to be replaced with scatter series that have both XValueBinding and YValueBinding, however, unfortunately RadChart does not have a ScatterSplineArea series yet - the scatter series provided at the moment are ScatterLine, ScatterArea and ScatterPoint.

Thus, the best solution for the moment would be to use a categorical horizontal axis and create the same CategoryBinding for each of the series, binding to the same property, in which case both series would be aligned properly.

Regards,
Nikolay
the Telerik team