Multiple VerticalAxis

8 posts, 2 answers
  1. Uwe
    Uwe avatar
    48 posts
    Member since:
    Sep 2012

    Posted 09 Mar 2015 Link to this post

    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
  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 10 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Uwe
    Uwe avatar
    48 posts
    Member since:
    Sep 2012

    Posted 11 Mar 2015 in reply to Martin Link to this post

    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
  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 11 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Uwe
    Uwe avatar
    48 posts
    Member since:
    Sep 2012

    Posted 12 Mar 2015 in reply to Martin Link to this post

    Hi Martin,

    my DataContext is null?

    var seriesViewModel = series.DataContext as SeriesProviderDataItem;

    Greetings Uwe
  7. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 12 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Uwe
    Uwe avatar
    48 posts
    Member since:
    Sep 2012

    Posted 20 Mar 2015 in reply to Martin Link to this post

    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
  9. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 23 Mar 2015 Link to this post

    Hi Uwe,

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

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready