Multiple VerticalAxis

[Uwe]

Hello Telerik

is it possible to add dynamical LineSeries to a RadCartesianChart-Control like in the SeriesProvider example from ChartView_WPF sdk project on Github, but each LineSeries with a own VerticalAxis?

Regards Uwe

[Martin Ivanov]

Hi Uwe,

Yes, you can have an axis for each series by setting its VerticalAxis (or HorizontalAxis) property. When you are populating the chart's Series dynamically with a SeriesProvider you can add the axis in the series' descriptor Style. However, if you define the axis directly in the style, since the same Style is applied to all series, the same axis will be used for each series. Therefore, you will have a single axis. This is why when you use the series provider you will need to create a new axis for each time the style is assigned. You can do that through an attached property. Here is an example:

<telerik:CategoricalSeriesDescriptor.Style>
    <Style TargetType="telerik:LineSeries">
        <Setter Property="local:ChartUtilities.AttachVerticalAxis" Value="True" />
    </Style>
</telerik:CategoricalSeriesDescriptor.Style>

public class ChartUtilities
{
    public static bool GetAttachVerticalAxis(DependencyObject obj)
    {
        return (bool)obj.GetValue(AttachVerticalAxisProperty);
    }

    public static void SetAttachVerticalAxis(DependencyObject obj, bool value)
    {
        obj.SetValue(AttachVerticalAxisProperty, value);
    }

    public static readonly DependencyProperty AttachVerticalAxisProperty =
        DependencyProperty.RegisterAttached("AttachVerticalAxis", typeof(bool), typeof(ChartUtilities), new PropertyMetadata(false, OnAttachVerticalAxisChanged));

    private static void OnAttachVerticalAxisChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var series = d as CartesianSeries;
        if (series != null)
        {
            series.VerticalAxis = (bool)e.NewValue ? new LinearAxis() : null;
        }
    }
}

In addition you can take a look at the Multiple Axes help article.

Regards,
Martin
Telerik

 

 

[Uwe]

Hello Martin,

that works very well, thank you!
May be you can give me a hint how I can set the axis color to the same value as the LineSeries (SplineSeries) color in this constellation?
I'm setting the LineSeries Stroke-Color like this:

<telerik:RadCartesianChart.SeriesProvider>
    <telerik:ChartSeriesProvider Source="{Binding Data}">
        <telerik:ChartSeriesProvider.SeriesDescriptors>
            <telerik:CategoricalSeriesDescriptor CategoryPath="Nr"
                                                 ValuePath="Value"
                                                 ItemsSourcePath="Items">
                <telerik:CategoricalSeriesDescriptor.Style>
                    <Style TargetType="telerik:SplineSeries">
                        <Setter Property="StrokeThickness" Value="{Binding SeriesStrokeThikness}"/>
                        <Setter Property="Stroke" Value="{Binding SeriesBrush}"/>
                        <Setter Property="local:ChartUtilities.AttachVerticalAxis"  Value="True" />
                    </Style>
                </telerik:CategoricalSeriesDescriptor.Style>
            </telerik:CategoricalSeriesDescriptor>
        </telerik:ChartSeriesProvider.SeriesDescriptors>
    </telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>

and

public class SeriesProviderDataItem : INotifyPropertyChanged
{
    #region INotifyPropertyChanged implementiation
    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string p)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(p));
    }
    #endregion

    private Brush seriesBrush = new SolidColorBrush(Colors.Black);
    public Brush SeriesBrush
    {
        get
        {
            return seriesBrush;
        }
        set
        {
            seriesBrush = value;
            OnPropertyChanged("SeriesBrush");
        }
    }
    private double seriesStrokeThikness = 5;
    public double SeriesStrokeThikness
    {
        get
        {
            return seriesStrokeThikness;
        }
        set
        {
            seriesStrokeThikness = value;
            OnPropertyChanged("SeriesStrokeThikness");
        }
    }

    public ObservableCollection<MeasurementValue> Items { get; set; }

    public SeriesProviderDataItem()
    {
    }

    public SeriesProviderDataItem(SolidColorBrush brush)
    {
        SeriesBrush = brush;
    }
}

Regards Uwe

[Martin Ivanov]

Hello Uwe,

You can get the axis' color from your view model in the OnPropertyChangedCallback of the attached property and then set it on the vertical axis' LineStroke or ElementBrush property. The LineStroke controls only the color of the line and the ElementBrush determines the color of all axis' elements - labels, line, ticks. 

private static void OnAttachVerticalAxisChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var series = d as CartesianSeries;
    if (series != null)
    {
        var seriesViewModel = series.DataContext as SeriesProviderDataItem;
        series.VerticalAxis = (bool)e.NewValue ? new LinearAxis() { LineStroke = seriesViewModel.SeriesBrush } : null;
    }
}

Please let me know if this helps.

Regards,
Martin
Telerik

 

 

[Uwe]

Hi Martin,

my DataContext is null?

var seriesViewModel = series.DataContext as SeriesProviderDataItem;

Greetings Uwe

[Martin Ivanov]

Hello Uwe,

Can you please prepare an isolated sample with your implementation so that I can test it locally? This will help me in better understanding your case and suggest you a possible approach for implementing the desired functionality.

Note that the forum does not allow attaching of archives, but If you open a new support ticket you will be able to attach .zip files.

Regards,
Martin
Telerik

 

 

[Uwe]

Hello Martin,

thank you for your effort, that work very fine.
I chose the solution withe a second DependencyProperty.
Maybe some other programmer has some similar requirements, so I swapped the dlls into your trial version and put the small project to Github.

Regards Uwe

[Martin Ivanov]

Hi Uwe,

Thank you for your effort to create and share the example with our community.

Regards,
Martin
Telerik