Dynamic series of different types with their own Yaxis

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:

How to generate dynamic number of series based on common items source in WPF Chart (SfChart)? | Syncfusion KB

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>




Attachment: SyncFusionTest_35cdb4d9.zip

4 Replies

YP Yuvaraj Palanisamy Syncfusion Team May 24, 2022 03:17 AM UTC

Hi Christian Larsen,


Thanks for providing the sample.


We will check and update you with complete details on 24th May 2022.


Regards,

Yuvaraj.




YP Yuvaraj Palanisamy Syncfusion Team May 24, 2022 02:20 PM UTC

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.


Attachment: SyncFusionTest_f245a7c1.zip


CL Christian Larsen May 25, 2022 07:39 AM UTC

Hi  Yuvaraj Palanisamy

It works perfectly. Thank you :-)

Best regards

Christian.



YP Yuvaraj Palanisamy Syncfusion Team May 26, 2022 05:48 AM UTC

Hi Christian Larsen,


Thanks for your update.


Please let us know if you need any further assistance.


Regards,

Yuvaraj.


Loader.
Up arrow icon