ChartSeriesProvider doesn't work with LegendSettings.

[Dmitry]

I use dynamic numer of SplineSeries in my chart (so I use ChartSeriesProvider) and I want to display Chart Legend in the right upper corner of chart. But ChartSeriesProvider doesn't work with LegendSettings. An empty chart area is displayed. Please see 'EmptyChartArea.PNG' file attached. I did the following XAML markup:

<UserControl x:Class="DeviceReading.Views.AutomaticGainControlView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:local="clr-namespace:DeviceReading"
             xmlns:views="clr-namespace:DeviceReading.Views"
             prism:ViewModelLocator.AutoWireViewModel="True">

    <UserControl.Resources>
        <!--Series colors-->
        <telerik:ChartPalette x:Key="customPalette">
            <telerik:ChartPalette.SeriesEntries>
                <telerik:PaletteEntryCollection SeriesFamily="Line">
                    <telerik:PaletteEntry Fill="Blue" Stroke="Blue"/>
                    <telerik:PaletteEntry Fill="Crimson" Stroke="Crimson"/>
                    <telerik:PaletteEntry Fill="Green" Stroke="Green"/>
                    <telerik:PaletteEntry Fill="DarkOrange" Stroke="DarkOrange"/>
                    <telerik:PaletteEntry Fill="Purple" Stroke="Purple"/>
                    <telerik:PaletteEntry Fill="DarkTurquoise" Stroke="DarkTurquoise"/>
                    <telerik:PaletteEntry Fill="SaddleBrown" Stroke="SaddleBrown"/>
                    <telerik:PaletteEntry Fill="SlateBlue" Stroke="SlateBlue"/>
                </telerik:PaletteEntryCollection>
            </telerik:ChartPalette.SeriesEntries>
        </telerik:ChartPalette>

        <local:StringToLegendSettingsConverter x:Key="StringToLegendSettingsConverter"/>
    </UserControl.Resources>

<telerik:RadCartesianChart Visibility="{Binding IsAbsoluteSplineChartVisible}" Palette="{StaticResource customPalette}">
     <!--Turn scrollbars off-->
     <telerik:RadCartesianChart.Resources>
         <Style TargetType="telerik:PanZoomBar">
             <Setter Property="Visibility" Value="Collapsed"/>
         </Style>
     </telerik:RadCartesianChart.Resources>
     <!-- X-axis -->
     <telerik:RadCartesianChart.HorizontalAxis>
         <telerik:DateTimeContinuousAxis MajorStepUnit="Second" LabelInterval="5" LabelFormat="hh:mm:ss" FontFamily="Segoe UI" PlotMode="OnTicks" TickOrigin="{Binding AlignmentDate}"/>
     </telerik:RadCartesianChart.HorizontalAxis>
     <!-- Y-axis -->
     <telerik:RadCartesianChart.VerticalAxis>
          <telerik:LinearAxis FontFamily="Segoe UI" Title="Децибелы [Дб]" />
     </telerik:RadCartesianChart.VerticalAxis>
     <!--Coordinate grid-->
     <telerik:RadCartesianChart.Grid>
         <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="3,4" MajorYLineDashArray="3,4"/>
     </telerik:RadCartesianChart.Grid>
     <!--Series Provider used-->
     <telerik:RadCartesianChart.SeriesProvider>
         <telerik:ChartSeriesProvider Source="{Binding SeriesData}">
             <telerik:ChartSeriesProvider.SeriesDescriptors>
                 <telerik:CategoricalSeriesDescriptor CategoryPath="Category" ValuePath="Value" ItemsSourcePath="ChartPoints">
                     <telerik:CategoricalSeriesDescriptor.TypeConverter>
                          <local:SeriesTypeConverter/>
                     </telerik:CategoricalSeriesDescriptor.TypeConverter>
                     <!--USE StringToLegendSettingsConverter-->
                     <telerik:CategoricalSeriesDescriptor.Style>
                          <Style TargetType="telerik:SplineSeries">
                              <Setter Property="LegendSettings" Value="{Binding  SeriesName, Converter={StaticResource StringToLegendSettingsConverter}}"/>
                          </Style>
                     </telerik:CategoricalSeriesDescriptor.Style>
                 </telerik:CategoricalSeriesDescriptor>
             </telerik:ChartSeriesProvider.SeriesDescriptors>
         </telerik:ChartSeriesProvider>
     </telerik:RadCartesianChart.SeriesProvider>
     <!--Zooming and Panning-->
     <telerik:RadCartesianChart.Behaviors>
         <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both"  PanMode="Both"/>
     </telerik:RadCartesianChart.Behaviors>
</telerik:RadCartesianChart>
</UserControl>

Below is StringToLegendSettingsConverter class:

public class StringToLegendSettingsConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return new SeriesLegendSettings { Title = "" + value };
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Below is SeriesModel class (with Rusian remarks).

public class SeriesModel
{
        #region Constructors
        /// <summary>
        /// Создаёт экземпляр SeriesModel по умолчанию.
        /// </summary>
        public SeriesModel() { }
        /// <summary>
        /// Создаёт экземпляр SeriesModel  по заданным параметрам
        /// </summary>
        /// <param name="chartPoints">Тип серии (вид графика).</param>
        /// <param name="seriesType">Коллекция точек, представляющая серию (кривую графика).</param>
        public SeriesModel(RadObservableCollection<ChartPoint> chartPoints, string seriesName, string seriesType = "Spline")
        {
            this.ChartPoints = chartPoints;
            this.SeriesName = seriesName;
            this.SeriesType = seriesType;
        }
        #endregion

        #region Properties

        /// <summary>
        /// Тип серии (вид графика). Т.е. состоит ли график кривой из отрезков, просто соединяющих точки (LineChart),
        /// либо места, в которых отрезки соединяются с точками, имеют закруглённую форму (SplineCahrt).
        /// </summary>
        public string SeriesType { get; set; }

        /// <summary>
        /// Имя серии. Например, "1-й луч", "2-й луч" и т.д.
        /// </summary>
        public string SeriesName { get; set; }

        /// <summary>
        /// Коллекция точек, представляющая серию (кривую графика).
        /// </summary>
        public RadObservableCollection<ChartPoint> ChartPoints { get; set; }

        #endregion
}

Below is using SeriesModel Instance in 'AutomaticGainControlViewModel' class (ViewModel of 'AutomaticGainControl' chart) constructor for asigning to SeriesName property (with Rusian remarks):

. . . . . . . . . . . . . . .
// Создать и начать заполнять коллекцию точек для графиков кривых абсолютных значений.
this.SeriesData = new RadObservableCollection<SeriesModel>();
// Добавить точку для графика кривой коэффициента усиления на первом луче в прямом направлении.
series = new SeriesModel();
series.SeriesType = "Spline";
series.SeriesName = "P1AB";
series.ChartPoints = new RadObservableCollection<ChartPoint>();
automaticGainControl = this.Data[0].Value;
series.ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData.Add(series);
// Добавить точку для графика кривой коэффициента усиления на первом луче в обратном направлении.
series = new SeriesModel();
series.SeriesType = "Spline";
series.SeriesName = "P1BA";
series.ChartPoints = new RadObservableCollection<ChartPoint>();
automaticGainControl = this.Data[1].Value;
series.ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData.Add(series);
// Добавить точку для графика кривой коэффициента усиления на втором луче в прямом направлении.
series = new SeriesModel();
series.SeriesType = "Spline";
series.SeriesName = "P2AB";
series.ChartPoints = new RadObservableCollection<ChartPoint>();
automaticGainControl = this.Data[2].Value;
series.ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData.Add(series);
// Добавить точку для графика кривой коэффициента усиления на втором луче в обратном направлении.
series = new SeriesModel();
series.SeriesType = "Spline";
series.SeriesName = "P2BA";
series.ChartPoints = new RadObservableCollection<ChartPoint>();
automaticGainControl = (ushort)this.Data[3].Value;
series.ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData.Add(series);
. . . . . . . . . . . . . .

And, just in case, I bring a 'SeriesTypeConverter' converter class source code here:

public class SeriesTypeConverter : IValueConverter
{
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            SeriesModel seriesItem = value as SeriesModel;

            if (seriesItem.SeriesType == "Spline")
            {
                return typeof(SplineSeries);
            }
            else
            {
                return typeof(LineSeries);
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
}

What have I done wrong in my program that I have the empty chart. How to correct the error. Thank you very much in advance.

[Dmitry]

There is SeriesData RadObservableСollection here. May be it need to correct answer.

/// <summary>
/// Возвращает или задаёт коллекцию, содержащую серии (кривые) линейных графиков коэффициента усиления по лучам.
/// </summary>
public RadObservableCollection<SeriesModel> SeriesData { get; set; }

 

[Martin Ivanov]

Hello Yaroslav,

I tested your code and the No Data to Plot message is not displayed on my side. However, the spline line is missing too. This is expected behavior and it comes from the fact that in order to draw a line you need at least two data points. Each of the 4 series you are adding in the chart have a single point in it. In order to display something you will need to add more data points in each series. You can check the attached project.

You can also take a look at the SeriesProvider and SplineSeries help articles. About the legend you can read the RadLegend Support help article.

Regards,
Martin
Telerik by Progress

[Dmitry]

Hello, Martin.Thank you very much for your help and support. BUT:

1) In your example there is only one SplineSeries without any RadLegend support.

2) You wrote: "...In order to display something you will need to add more data points in each series...". But I have a timer tick handler which supplys the chart (all four SplineSeries) with the values of new data points. Below is the code snippet from this handler doing this operation:

// Get new point for the first SplineSeries.
automaticGainControl = this.Data[0].Value;
this.SeriesData[0].ChartPoints.SuspendNotifications();
if (this.SeriesData[0].ChartPoints.Count > 30)
   this.SeriesData[0].ChartPoints.RemoveAt(0);
this.SeriesData[0].ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData[0].ChartPoints.ResumeNotifications();
// Get new point for for the second SplineSeries.
automaticGainControl = this.Data[1].Value;
this.SeriesData[1].ChartPoints.SuspendNotifications();
if (this.SeriesData[1].ChartPoints.Count > 30)
    this.SeriesData[1].ChartPoints.RemoveAt(0);
this.SeriesData[1].ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData[1].ChartPoints.ResumeNotifications();
// Get new point for for the third SplineSeries.
automaticGainControl = this.Data[2].Value;
this.SeriesData[2].ChartPoints.SuspendNotifications();
if (this.SeriesData[2].ChartPoints.Count > 30)
   this.SeriesData[2].ChartPoints.RemoveAt(0);
this.SeriesData[2].ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData[2].ChartPoints.ResumeNotifications();
// Get new point for for the fourth SplineSeries.
automaticGainControl = this.Data[3].Value;
this.SeriesData[3].ChartPoints.SuspendNotifications();
if (this.SeriesData[3].ChartPoints.Count > 30)
    this.SeriesData[3].ChartPoints.RemoveAt(0);
this.SeriesData[3].ChartPoints.Add(new ChartPoint(new DateTime(this._currentDate.Ticks), automaticGainControl));
this.SeriesData[3].ChartPoints.ResumeNotifications();

3) I must use SplineSeries for charts but not LineSeries, according to the specifications and requirements on the program I develop.

4) In 'RadLegend Support paper there is no description about how to use RadLegendSupport with SeriesProvider in case of dynamically changed number of SplineSeries or or at least dynamically changed number of LineSeries.

So I'm in need of RadLegend Support working with SeriesProvider with dynamically changed number of SlineSeries. I'll be very grateful for the help.

[Dmitry]

The timer which poll the values of new datapoints for the Chart does one tick per second.

[Dmitry]

Please, help me.

[Martin Ivanov]

Hi Yaroslav,

The same approach described in the RadLegend Support article is used to define the legend settings of the series. The main difference is that the settings are defined in a Style.

<telerik:CategoricalSeriesDescriptor.Style>
    <Style TargetType="telerik:SplineSeries">
        <Setter Property="LegendSettings">
            <Setter.Value>
                <telerik:SeriesLegendSettings Title="{Binding SeriesName}" />
            </Setter.Value>
        </Setter>
    </Style>
</telerik:CategoricalSeriesDescriptor.Style>
<!-- ........ -->
<telerik:RadLegend Items="{Binding ElementName=chart, Path=LegendItems}" Grid.Column="1" />

However, we will consider adding this information in our help documentation.

I updated my last project to demonstrate how to update the chart's data at run time. You can also take a look at the Live Data RadChartView demo.

Regards,
Martin
Telerik by Progress

[Dmitry]

Hello, Martin. When I try to do like in your last example I have the same result - the empty chart window with "No data to plot" message there. I did your example using WPF Window but I use Prism UserControl. Can it be the reason of error?

[Dmitry]

You use WPF Window. I use Prism UserControl because the charts are in single module in my application. May it be the reason that I cant get the result. Your last example works good. I do the same as in your example but have the empty chart window.

[Martin Ivanov]

Hi Yaroslav,

No, the Prism UserControl must not be an issue and the chart should be displayed as expected. Without your implementation I cannot be sure what is happening, but I can suggest you to check the UI for WPF assemblies which you are using. If they are NoXaml and you use the implicit styles theming mechanism, the custom series Style defined in the descriptor should be based on its default Style. Otherwise, the ControlTemplate of the series will be overridden by the new style's empty template and the series won't be drawn.

<telerik:CategoricalSeriesDescriptor.Style>
    <Style TargetType="telerik:SplineSeries" BasedOn="{StaticResource SplineSeriesStyle}">
        <Setter Property="LegendSettings">
            <Setter.Value>
                <telerik:SeriesLegendSettings Title="{Binding SeriesName}" />
            </Setter.Value>
        </Setter>
    </Style>
</telerik:CategoricalSeriesDescriptor.Style>

Regards,
Martin
Telerik by Progress

[Dmitry]

Hello, Martin. Now I do in the following way, please see XAML markup below.

<telerik:RadCartesianChart Visibility="{Binding IsAbsoluteSplineChartVisible}" Palette="{StaticResource customPalette}">
            <!--Turn scrollbar off-->
            <telerik:RadCartesianChart.Resources>
                <Style TargetType="telerik:PanZoomBar">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </telerik:RadCartesianChart.Resources>
            <!-- X-axis -->
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis MajorStepUnit="Second" LabelInterval="5" LabelFormat="hh:mm:ss" FontFamily="Segoe UI" PlotMode="OnTicks" TickOrigin="{Binding AlignmentDate}"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <!-- Y-axis -->
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis FontFamily="Segoe UI" Title="Децибелы [Дб]" />
            </telerik:RadCartesianChart.VerticalAxis>
            <!--Layout greed-->
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="3,4" MajorYLineDashArray="3,4"/>
            </telerik:RadCartesianChart.Grid>
            <!--Series Provider-->
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding SeriesData}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Category" ValuePath="Value" ItemsSourcePath="ChartPoints">
                            <telerik:CategoricalSeriesDescriptor.TypeConverter>
                                <local:SeriesTypeConverter/>
                            </telerik:CategoricalSeriesDescriptor.TypeConverter>
                            <!-- !!! THE LEGEND !!! -->
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:SplineSeries" BasedOn="{StaticResource SplineSeriesStyle}">
                                    <Setter Property="LegendSettings">
                                        <Setter.Value>
                                            <telerik:SeriesLegendSettings Title="{Binding SeriesName, Converter={StaticResource StringToLegendSettingsConverter}}" />
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
            <!--Behaviors-->
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both"  PanMode="Both"/>
            </telerik:RadCartesianChart.Behaviors>
        </telerik:RadCartesianChart>

The chart is displayed but no legend is visible. I've tryed to comment the following part of XAML:

<telerik:CategoricalSeriesDescriptor.TypeConverter>
    <local:SeriesTypeConverter/>
</telerik:CategoricalSeriesDescriptor.TypeConverter>

But this is doesn't help. The legend remains invisible. By the way, I use your 'Office 2013' theme in my application.

[Martin Ivanov]

Hi Yaroslav,

I can't see the RadLegend definition in the provided XAML snippet. Can you confirm that you are using the RadLeged control? Note that only defining the SeriesLegendSettings won't display a legend. This will only populate the LegendItems collection of the chart. To display the items you can use the RadLegend control or any other ItemsControl.

If this doesn't help I would ask you to send me runnable code snippets demonstrating the missing legend. Or open a new support ticket from your telerik.com account and attach a sample project.

Regards,
Martin
Telerik by Progress

[Dmitry]

Hello, Martin. This way all works. Please see XAML markup below:

<!--Визуализатор цветов кривых абсолютных графиков, соответствующих сигналам измерительных лучей-->
        <telerik:RadLegend Grid.Column="1" Items="{Binding LegendItems, ElementName=splineAbsoluteChart}" HorizontalAlignment="Right" VerticalAlignment="Top"
                           Visibility="{Binding IsAbsoluteSplineChartVisible}"/>
        <!--График значений коэффициента усиления [Дб.] по каждому лучу, отображаемый в виде кривых.-->
        <telerik:RadCartesianChart x:Name="splineAbsoluteChart" Visibility="{Binding IsAbsoluteSplineChartVisible}" Palette="{StaticResource customPalette}">
            <!--Turn scrollbar off-->
            <telerik:RadCartesianChart.Resources>
                <Style TargetType="telerik:PanZoomBar">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </telerik:RadCartesianChart.Resources>
            <!-- X-axis -->
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis MajorStepUnit="Second" LabelInterval="5" LabelFormat="hh:mm:ss" FontFamily="Segoe UI" PlotMode="OnTicks" TickOrigin="{Binding AlignmentDate}"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <!-- Y-axis -->
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis FontFamily="Segoe UI" Title="Децибелы [Дб]" />
            </telerik:RadCartesianChart.VerticalAxis>
            <!--Layout greed-->
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="3,4" MajorYLineDashArray="3,4"/>
            </telerik:RadCartesianChart.Grid>
            <!--Series Provider-->
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding SeriesData}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Category" ValuePath="Value" ItemsSourcePath="ChartPoints">
                            <telerik:CategoricalSeriesDescriptor.TypeConverter>
                                <local:SeriesTypeConverter/>
                            </telerik:CategoricalSeriesDescriptor.TypeConverter>
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:SplineSeries" BasedOn="{StaticResource SplineSeriesStyle}">
                                    <Setter Property="LegendSettings" Value="{Binding  SeriesName, Converter={StaticResource StringToLegendSettingsConverter}}"/>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
            <!--Behaviors-->
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both"  PanMode="Both"/>
            </telerik:RadCartesianChart.Behaviors>
        </telerik:RadCartesianChart>

 

After all I did it and it works! Thanks for your helping.

[Johannes]

Why do you use a Converter instead of something like this:

<Style TargetType="telerik:LineSeries">
    <Setter Property="LegendSettings">
        <Setter.Value>
            <telerik:SeriesLegendSettings Title="{Binding Path=Name}"/>
        </Setter.Value>
    </Setter>
</Style>

 

[Dmitry]

Hello, Johannes. I did as I had known. I will take note of your information. Thank you.