Rank 1
Had migrated from .Net Framework to .Net8 and of course updated Telerik references, and I'm facing this problem rendering the chart.
using Telerik.Windows.Controls.ChartView;
using Telerik.Windows.Controls.Legend;
namespace Manager
{
public partial class CustomChartControl : UserControl, INotifyPropertyChanged
{
private const int YAXIS_STEP_NUMBER = 8;
private ChartSerieCollectionVM _viewModel;
private string _title;
public LinearAxis LeftAxis { get { return chart.Resources["leftAxis"] as LinearAxis; } }
public LinearAxis LeftCAxis { get { return chart.Resources["leftAxisC"] as LinearAxis; } }
public LinearAxis RightAxis { get { return chart.Resources["rightAxis"] as LinearAxis; } }
public LinearAxis RightCAxis { get { return chart.Resources["rightAxisC"] as LinearAxis; } }
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged("Title");
}
}
public DateTime ActualMaxDateTime { get; private set; }
public DateTime ActualMinDateTime { get; private set; }
public CustomChartControl()
{
InitializeComponent();
}
public void SetDataContext(ChartSerieCollectionVM series)
{
foreach (var serie in series.Series)
{
AsignSerieAxis(serie);
}
_viewModel = series;
DataContext = _viewModel;
}
private void AsignSerieAxis(ChartSerieVM serie)
{
if (serie.HorizontalAlignment == Telerik.Charting.AxisHorizontalLocation.Left)
{
if (serie.IsC)
{
serie.Axis = this.LeftCAxis;
}
else
{
serie.Axis = this.LeftAxis;
}
}
else
{
if (serie.IsC)
{
serie.Axis = this.RightCAxis;
}
else
{
serie.Axis = this.RightAxis;
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
<telerik:RadCartesianChart x:Name="chart" Grid.Row="2">
<telerik:RadCartesianChart.Resources>
<telerik:LinearAxis
x:Key="leftAxisC"
Margin="0,0,0,0"
HorizontalLocation="Left"
IsInverse="True"
LineStroke="{DynamicResource Gray4}"
Maximum="1.1"
Minimum="0.9"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource CValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="leftAxis"
Margin="0,0,0,0"
HorizontalLocation="Left"
LineStroke="{DynamicResource Gray4}"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding .}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="rightAxisC"
Margin="0,0,0,0"
HorizontalLocation="Right"
IsInverse="True"
LineStroke="{DynamicResource Gray4}"
Maximum="1.1"
Minimum="0.9"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource CValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
<telerik:LinearAxis
x:Key="rightAxis"
Margin="0,0,0,0"
HorizontalLocation="Right"
LineStroke="{DynamicResource Gray4}"
RangeExtendDirection="Both"
TickThickness="0">
<telerik:LinearAxis.LabelTemplate>
<DataTemplate>
<TextBlock
x:Name="AxisLabel"
HorizontalAlignment="Right"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{DynamicResource Gray4}"
Text="{Binding ., Converter={StaticResource RightAxisValueConverter}}" />
</DataTemplate>
</telerik:LinearAxis.LabelTemplate>
</telerik:LinearAxis>
</telerik:RadCartesianChart.Resources>
<!-- HORIZONTAL AXIS -->
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:DateTimeContinuousAxis
ActualRangeChanged="DateTimeContinuousAxis_ActualRangeChanged"
Name="BottomAxis"
LabelFitMode="Rotate"
LabelFormat="HH:mm:ss"
LineThickness="1"
Maximum="{Binding MaxVisible, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Minimum="{Binding MinVisible, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
PlotMode="OnTicks" />
</telerik:RadCartesianChart.HorizontalAxis>
<!-- SERIES PROVIDER -->
<telerik:RadCartesianChart.SeriesProvider>
<telerik:ChartSeriesProvider Source="{Binding VisibleSeries}">
<telerik:ChartSeriesProvider.SeriesDescriptors>
<telerik:CategoricalSeriesDescriptor
CategoryPath="Date"
ItemsSourcePath="ItemsInView"
ValuePath="YVal">
<!-- Fill="{Binding Series.Stroke}" -->
<telerik:CategoricalSeriesDescriptor.Style>
<Style TargetType="telerik:LineSeries">
<Setter Property="Stroke" Value="{Binding SerieColor}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="LegendSettings">
<Setter.Value>
<telerik:SeriesLegendSettings Title="{Binding Title}" />
</Setter.Value>
</Setter>
<Setter Property="VerticalAxis" Value="{Binding Axis}" />
<Setter Property="TrackBallTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle
Width="7"
Height="7"
Fill="{Binding Series.Stroke}"
RenderTransformOrigin="0.5,0.5">
<Rectangle.ToolTip>
<ToolTip>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="lbPointValue" Text="{Binding Path=DataPoint.Value}" />
<TextBlock Text="{Binding Path=DataPoint.Category, StringFormat=HH:mm:ss}" />
</StackPanel>
</ToolTip>
</Rectangle.ToolTip>
</Rectangle>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Series, Converter={StaticResource DataPointSerieIsCConverter}}" Value="True">
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:CategoricalSeriesDescriptor.Style>
</telerik:CategoricalSeriesDescriptor>
</telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>
<!-- GRID -->
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" />
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.SmartLabelsStrategy>
<telerik:ChartSmartLabelsStrategy />
</telerik:RadCartesianChart.SmartLabelsStrategy>
</telerik:RadCartesianChart>
This CustomChart is declared from other view as:
<TabItem x:Name="TabTotal" Header="Total">
<this:CustomChartControl x:Name="TelerikPowerChart" />
</TabItem>
TelerikPowerChart.Title = "Total Active Power";
TelerikPowerChart.SetDataContext(_viewModel.ActiveModel.PowerSerieCollection
1 Answer, 1 is accepted
Hello Xabier,
The RadCartesianChart control requires both its HorizontalAxis and VerticalAxis properties to be set in order to visualize the series. In the provided code snippets, only the HorizontalAxis property is set, which results in the observed message.
Regarding the "No series added" message, in this case, it seems that the Source property of the ChartSeriesProvider instances is bound to a property named VisibleSeries, however, in the CustomChartControl.xaml.cs class, the ChartSerieCollectionVM object works with the Series properties.
With this being said, would it be possible to double-check that there aren't any binding errors in the Output window of Visual Studio regarding the Source property of the ChartSeriesProvider? If there are, resolving them, together with setting the VerticalAxis property of the RadCartesianChart, should correctly display the series and its data.
Regards,
Stenly
Progress Telerik
Start the 2025 Survey
Rank 1
Hello Stenly,
The VerticalAXis property is set by a Property Setter inside the CategoricalSeriesDescriptor.
<Setter Property="VerticalAxis" Value="{Binding Axis}" />
Binded to Axis property of ChartSerieVM of LinearAxis type. The value to Axis is set dynamically in AsignSerieAxis(). That is called from the MainView constructor.
I've been trying a lot of modifications, and the one that works is moving this callings to an MainView_Loaded event.
Does it make sense?
Yes moving the setting of models/properties bound to UI on Loaded event ensures the controls that are bound will take the bindings in (assuming you also call OnPropertyChanged() when you change a bound VM property. Loaded or calling such logic in Dispatcher.BeginInvoke(()=> action, Prioirity.Loaded) is pretty much the same approach, a typical workaround. I guess you have generally hit a timing issue between NetFramework/Net8 (related to loading of usercontrols and their resources). So if you want, you can send us a runnable sample that we can debug locally and eventually suggest a better solution.
If I had a static VerticalAxis
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
"No series added" message appears.
So it looks like the chart is rendered before the data is able to be binded. Is there any way to re-render the chart once the data is binded or to make the renderization waits for the data be binded?