Lineseries weird behavior on palette in RadChartView

[Daniel]

I'm adding two dynamic series to a chart, one LineSeries and one PointSeries

For the LineSeries i leave all the styling as default, and I tried using the standards Palettes (Windows8 in this case). When I have more than one series, everything's ok. However, when I only have 1 series shown on the grid, then the LineSeries somehow skips the first color and shows the second one. 
I tried reproducing the problem using a custom palette just to see if I was doing something wrong, but the behavior is the same (first color skipped when only 1 series). What's going on?

 chart definition:

<telerik:RadCartesianChart Grid.Row="0" Height="Auto" Name="ChartControl" BorderThickness="0" Background="Transparent" Palette="Windows8" DataContextChanged="OnChartSeriesUpdated">

                <telerik:RadCartesianChart.Annotations>

                <telerik:CartesianGridLineAnnotation ZIndex="-200" Value= "7" Stroke="Black" StrokeThickness="2.5" Axis="{Binding ElementName=VerticalAxis}"/>
                <telerik:CartesianGridLineAnnotation ZIndex="-2100" Value="4" Stroke="Black" StrokeThickness="1.5" Axis="{Binding ElementName=VerticalAxis}"/>
                <telerik:CartesianGridLineAnnotation ZIndex="-2100" Value="1" Stroke="Black" StrokeThickness="3.5" Axis="{Binding ElementName=VerticalAxis}"/>

                <telerik:CartesianPlotBandAnnotation ZIndex="-200" From="0" To="1" Fill="Coral" Axis="{Binding ElementName=VerticalAxis}"/>
                <telerik:CartesianPlotBandAnnotation ZIndex="-200" From="7" To="8" Fill="Coral" Axis="{Binding ElementName=VerticalAxis}"/>
            </telerik:RadCartesianChart.Annotations>

            <telerik:RadCartesianChart.SeriesProvider>
                    <telerik:ChartSeriesProvider Source="{Binding }">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="ResultDataPoints" CategoryPath="MeasurementTimestamp" ValuePath="Value" Style="{StaticResource PointSeriesStyle}" />
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="ResultDataPoints" CategoryPath="MeasurementTimestamp" ValuePath="Value" Style="{StaticResource LineSeriesStyle}" />
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>
                </telerik:RadCartesianChart.SeriesProvider>

            <telerik:RadCartesianChart.HorizontalAxis>

                <!--date and time points are skipped when points are too close together-->
                <telerik:DateTimeContinuousAxis LabelTemplateSelector="{StaticResource HorizontalLabelTemplateSelector}"
                                    Name="HorizontalAxis"
                                    MaxHeight="8"
                                    MinHeight="0"
                                    LabelFitMode="MultiLine"
                                    LabelFormat="H:mm"
                                    LabelInterval="3"
                                    LastLabelVisibility="Visible"
                                    MajorTickLength="3" />

            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis LabelTemplateSelector="{StaticResource VerticalLabelTemplateSelector}"
                                    Name="VerticalAxis"
                                    Maximum="8"
                                    Minimum="0">


                    <telerik:LinearAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Converter={StaticResource TargetLabelFormatConverter}}"/>
                        </DataTemplate>
                    </telerik:LinearAxis.LabelTemplate>

                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>

        </telerik:RadCartesianChart>

style definitions:

 

<Style x:Key="PointSeriesStyle" TargetType="telerik:PointSeries">
            <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource LegendElementConverter}}"/>
            <Setter Property="PointTemplateSelector" Value="{StaticResource LevyJennigsPointTemplateSelector}"></Setter>
            <Setter Property="AllowSelect" Value="True"></Setter>
        </Style>

        <Style x:Key="LineSeriesStyle" TargetType="telerikChart:LineSeries" />

several series (points and lines colors match, legend proves it) see "several series.png"

 one serie (line series skips first color) see "one serie.png"

 

Thanks a lot for your help in advance.

 

[Petar Marchev]

Hi Daniel,

The chart series provider is an entity that creates series for you. Usually, when you have a static number of series, you would define them in xaml and there would be no reason to use a series provider.

The provider is fed by an IEnumerable (its Source property). It expects some collection with items, where each item will be presented by a series. Actually, by one or more series. This depends on the series descriptors.

The descriptors describe how an element should be transformed into a series. You could use a series descriptor selector, too, when needed. In your case, however, you have added two series descriptors, so the result is that for each item in the Source collection, you get two series created. So if you have a total of three items in this collection, you end up with 6 series. When there is only 1 item, you end up with two series (one point series, one line series).

This is why it appears that the first palette entry is not used, it actually is used by the first point series and the second line series uses the second palette entry.

I am a little unsure what is the final result you are looking for and this is why I cannot suggest a strategy to resolve this. I suggest you invest some more times into getting to know the series provider, so that you can take advantage of its features and get the desired output.

online documentation
sdk samples

Perhaps you can simply use a PointTemplate with the line series.

If you need advice or have any other questions, please do give us more information on the expected output.

Regards,
Petar Marchev
Telerik

[Daniel]

Hi Petar,

 

thanks for your answer. I use the SeriesProvider because I have a dynamic number of series, so that part is fine.

The reason why I use 2 series descriptors is because I need to show points AND trend lines. If I use the line series I just get lines, and if I use point series I just get points. So I wanted to get both displayed, as you can see on the screenshot attached in the previous post, and I thought this is the easiest way to do so.

What I don't understand is why the palette used for the line series is the same than the one used for the point series when there's just 1 item.

When there's more than one point the palette is "restarted", otherwise the colors would be interpolated (one at a time from the palette for each series) when there's more than 1 item as well. Or am I missing something?

[Daniel]

Hi Petar,

 

It's me once more. After reviewing carefully your answer I tried out the PointSeriesTemplate. I could have sworn I tried that before and didn't work, but probably it was because of trying several things at the same time :) That's when I decided to use 2 series (line & point). I thought at the moment that having a point template would break apart the line series into just showing points

However, after giving it a try it works. I still would like to know though why the behavior explained in my example happens, I mean, why the palette is used differently (being it the same for both series) when there's 1 point vs 2+ points, but that's just gonna be an extra curiosity and not part of the solution to the issue.

thanks a lot!

[Petar Marchev]

Hi Daniel,

When you have a single item in your Source collection, the provider generates two series. These two series are added to the Series collection of the chart and the chart know that it has two series.

This is the answer to the question here. There are two series and the chart knows about them. The chart is not interested in the fact that these two series present the same item (have the same data context). As far as the chart is concerned, these are two distinct series and should be treated as such. This is why the first series gets the first palette entry and the second series gets the second palette entry.

Regards,
Petar Marchev
Telerik