I need to make a chart where some series are lineseries and others are scatterseries. They should each have their own Y-axis which can be configured with Ymin and Ymax. I would also like to set the same color on the series and the corresponding Y-axis font.
I followed this example:
But I have some binding problems: SerieName(string), Ymax(double), Ymin(double) and SerieColor(SolidColorBrush). What am I doing wrong?
My ViewModel has the property: ObservableCollection<ChartSerie> Series
The ChartSerie class:
namespace SyncFusionTest
{
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Media;
public class ChartSerie : INotifyPropertyChanged
{
public ChartSerie()
{
this.Points = new ObservableCollection<ChartPoint>();
}
public event PropertyChangedEventHandler PropertyChanged;
public bool IsRef { get; set; }
public ObservableCollection<ChartPoint> Points { get; }
public SolidColorBrush SerieColor { get; set; }
public string SerieName { get; set; }
public double Ymax { get; set; }
public double Ymin { get; set; }
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
The ChartPoint class:
namespace SyncFusionTest
{
using System;
public class ChartPoint
{
public DateTime TimeStamp { get; set; }
public double Value { get; set; }
}
}
My View:
<Window
x:Class="SyncFusionTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:SyncFusionTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
Title="MainWindow"
Width="800"
Height="450"
DataContext="{DynamicResource ViewModel}"
mc:Ignorable="d">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ScatterSeriesTemplate" DataType="local:ChartSerie">
<syncfusion:ScatterSeries
ItemsSource="{Binding Path=Points}"
Label="{Binding Path=SerieName}"
Palette="Custom"
ScatterHeight="5"
ScatterWidth="5"
XBindingPath="TimeStamp"
YBindingPath="Value">
<syncfusion:ScatterSeries.YAxis>
<syncfusion:NumericalAxis
Foreground="{Binding Path=SerieColor}"
Header="{Binding Path=SerieName}"
Maximum="{Binding Path=Ymax}"
Minimum="{Binding Path=Ymin}" />
</syncfusion:ScatterSeries.YAxis>
<syncfusion:ScatterSeries.ColorModel>
<syncfusion:ChartColorModel>
<syncfusion:ChartColorModel.CustomBrushes>
<SolidColorBrush Color="{Binding Path=SerieColor}" />
</syncfusion:ChartColorModel.CustomBrushes>
</syncfusion:ChartColorModel>
</syncfusion:ScatterSeries.ColorModel>
</syncfusion:ScatterSeries>
</DataTemplate>
<DataTemplate x:Key="LineSeriesTemplate" DataType="local:ChartSerie">
<syncfusion:LineSeries
ItemsSource="{Binding Path=Points}"
Label="{Binding Path=SerieName}"
Palette="Custom"
XBindingPath="TimeStamp"
YBindingPath="Value">
<syncfusion:LineSeries.YAxis>
<syncfusion:NumericalAxis
Foreground="{Binding Path=SerieColor}"
Header="{Binding Path=SerieName}"
Maximum="{Binding Path=Ymax}"
Minimum="{Binding Path=Ymin}" />
</syncfusion:LineSeries.YAxis>
<syncfusion:LineSeries.ColorModel>
<syncfusion:ChartColorModel>
<syncfusion:ChartColorModel.CustomBrushes>
<SolidColorBrush Color="{Binding Path=SerieColor}" />
</syncfusion:ChartColorModel.CustomBrushes>
</syncfusion:ChartColorModel>
</syncfusion:LineSeries.ColorModel>
</syncfusion:LineSeries>
</DataTemplate>
</Window.Resources>
<Grid>
<local:SfChartExt Source="{Binding Path=Series}">
<local:SfChartExt.PrimaryAxis>
<syncfusion:DateTimeAxis />
</local:SfChartExt.PrimaryAxis>
<local:SfChartExt.SeriesTemplateSelector>
<local:SeriesDataTemplateSelector LineSeriesTemplate="{StaticResource LineSeriesTemplate}" ScatterSeriesTemplate="{StaticResource ScatterSeriesTemplate}" />
</local:SfChartExt.SeriesTemplateSelector>
</local:SfChartExt>
</Grid>
</Window>
Hi Christian Larsen,
Thanks for providing the sample.
We will check and update you with complete details on 24th May 2022.
Regards,
Yuvaraj.
Hi Christian Larsen,
We have achieved your requirement “Binding SeriesName, SeriesColor, Ymax, Ymin” with the help of below code example.
CodeSnippet:
|
<DataTemplate x:Key="ScatterSeriesTemplate" DataType="local:ChartSerie"> <local:ScatterSeriesExt x:Name="scatter" ItemsSource="{Binding Path=Points}" ScatterHeight="5" ScatterWidth="5" Interior="{Binding Path=SerieColor}" XBindingPath="TimeStamp" YBindingPath="Value"> <local:ScatterSeriesExt.YAxis> <syncfusion:NumericalAxis Foreground="{Binding SerieColor}" Header="{Binding SerieName}" Maximum="{Binding Ymax}" Minimum="{Binding Ymin}"> </syncfusion:NumericalAxis> </local:ScatterSeriesExt.YAxis> </local:ScatterSeriesExt> </DataTemplate>
<DataTemplate x:Key="LineSeriesTemplate" DataType="local:ChartSerie"> <local:LineSeriesExt x:Name="lineseries" ItemsSource="{Binding Path=Points}" Interior="{Binding Path=SerieColor}" XBindingPath="TimeStamp" YBindingPath="Value"> <local:LineSeriesExt.YAxis> <syncfusion:NumericalAxis Foreground="{Binding SerieColor}" Header="{Binding SerieName}" Maximum="{Binding Ymax}" Minimum="{Binding Ymin}" > </syncfusion:NumericalAxis> </local:LineSeriesExt.YAxis> </local:LineSeriesExt> </DataTemplate> |
|
public class LineSeriesExt : LineSeries { protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); this.ActualYAxis.DataContext = this.DataContext; } }
public class ScatterSeriesExt : ScatterSeries { protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); this.ActualYAxis.DataContext = this.DataContext; } } |
Output:
We have attached the complete sample for your reference. Please find the sample from the below attachment.
Please let us know if you have any further assistance.
Regards,
Yuvaraj.
Hi Yuvaraj Palanisamy
It works perfectly. Thank you :-)
Best regards
Christian.
Hi Christian Larsen,
Thanks for your update.
Please let us know if you need any further assistance.
Regards,
Yuvaraj.