Unplanned
Last Updated: 17 Feb 2021 11:27 by ADMIN
ADMIN
Nikolay
Created on: 12 Nov 2014 15:18
Category: Chart
Type: Feature Request
12
Chart: Multiple Axes
A common scenario for the Chart is to have several Y-Axis, where some could be on the left, others could be on the right side of the Chart.
14 comments
ADMIN
Didi
Posted on: 17 Feb 2021 11:27

Hello Santhosh,

In order to apply format to the labels from the second vertical axes, you can directly set the LabelFormat property to the axes in the custom renderer. 

Example:

 Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis verticalAxisBar = new Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis();
                verticalAxisBar.HorizontalLocation = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisHorizontalLocation.Right;
// set label format to the vertical axes verticalAxisBar.LabelFormat = "";

I would like to ask you to open a support ticket/forum thread for future questions you may have. Please note that this public feedback item is a feature request about providing support for Multiple Axes. It is not related to the axes labels and label formats. 

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

santhosh
Posted on: 15 Feb 2021 08:31
Hi,

How to apply label format for Secondary Y-Axis.

Please find the attached file.
Attached Files:
ADMIN
Yana
Posted on: 02 Feb 2021 15:11

Hello Santhosh,

Indeed, the kb article shows the general approach. Other than that, if you have concrete charts that need a secondary axis, you can create a custom class that inherits from RadCartesianChart and use it as a target type in the renderer:

 public class MultipleAxesChart : RadCartesianChart
 { 
  

the XAML definition should be:

<local:MultipleAxesChart Margin="0, 20, 0, 0">

	<telerikChart:RadCartesianChart.BindingContext>
		<local:ViewModel/>
	</telerikChart:RadCartesianChart.BindingContext>

	<telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:CategoricalAxis/>
	</telerikChart:RadCartesianChart.HorizontalAxis>
	
	.....
</local:MultipleAxesChart>

And then use the class in the renderer:

[assembly: ExportRenderer(typeof(MultipleAxesChart), typeof(CustomChartRenderer))]

In this way the renderer will not be applied to all Charts in the app.

Another approach is in the renderer inside OnElementChanged event to check the series data  - through the this.Control references you have access to the series and the axes of the chart.

Please try these and let me know if you have any additional questions or concerns.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

santhosh
Posted on: 01 Feb 2021 08:05
Thank you for the quick response & solution
I have another query about how to handle the situation like the CustomChartRendered required the secondary Y-Axis case & not required the secondary Y-axis case using one CustomChartRendered.
In your example without checking the secondary Y-axis required or not all the time directly added an example Add AddeSecondaryVerticalAxis(series[1]) in the method OnElementChanged(). 
public class CustomChartRenderer : Telerik.XamarinForms.ChartRenderer.Android.CartesianChartRenderer
{
    public CustomChartRenderer(Context context) : base(context)
    {

    }         protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Telerik.XamarinForms.Chart.RadCartesianChart> e)
    {
        base.OnElementChanged(e);

        var series = this.Control.Series.ToArray();

        AddSecondaryHorizontalAxis(series[1]);
        AddSecondaryVerticalAxis(series[1]);
    }

    private void AddSecondaryVerticalAxis(Java.Lang.Object lineSeries)
    {
        if (lineSeries is Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)
        {
            var series = lineSeries as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;

            Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis verticalAxisBar = new Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis();
            verticalAxisBar.HorizontalLocation = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisHorizontalLocation.Right;
            series.VerticalAxis = verticalAxisBar;
        }
    }

    private void AddSecondaryHorizontalAxis(Java.Lang.Object lineSeries)
    {
        if (lineSeries is Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)
        {
            var series = lineSeries as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;

            Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.DateTimeCategoricalAxis horizontalAXis = new Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.DateTimeCategoricalAxis();
            horizontalAXis.VerticalLocation = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisVerticalLocation.Top;
            series.HorizontalAxis = horizontalAXis;
        }
    }
}
ADMIN
Didi
Posted on: 28 Jan 2021 15:06

Hello,

Each custom renderer class is decorated with an ExportRenderer attribute that registers the renderer with Xamarin.Forms. The attribute takes two parameters – the type name of the control being rendered(in your case the (Telerik.XamarinForms.Chart.RadCartesianChart ), and the type name of the custom renderer

 

[assembly: ExportRenderer (typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartAxis.Droid.CustomChartRenderer))]
namespace CustomChartRenderer.Droid
{
    public class CustomChartRenderer : CartesianChartRenderer

for example, the CustomChartRenderer class is created inside the ChartAxis.Droid project. 

For more details about custom renderer and export renderer attribute, please check the following link from the Microsoft documentation https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/introduction#creating-a-custom-renderer-class 

I hope the provided information was helpful.

For the example

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

santhosh
Posted on: 28 Jan 2021 08:05

While registering the renderer showing the error ChartAxis is not supporting in Android
Example

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartAxis.Droid.CustomChartRenderer))]

ADMIN
Didi
Posted on: 21 Jan 2021 15:56

Hi Santosh,

Thank you for your feedback.

I can assure you that we are keeping an eye on this item and track its demand. Please follow and vote for it in order to receive an email notification when there is an update. 

Solution:

We have a how-to article in our documentation that describes how to achieve this scenario using a custom renderer. Please check this link https://docs.telerik.com/devtools/xamarin/knowledge-base/chart-xamarin-multiple-axis 

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

santhosh
Posted on: 21 Jan 2021 09:59
I am waiting to see the secondary Y-Axis i.e the Y-Axis on both left and right side.
When can I expect this feature ? it seems it is pending from last couple of years.
ADMIN
Yana
Posted on: 18 Sep 2018 07:38
Hi Craig.

Thank you for sending your comment.  We have this feature request in mind and as you're following the item, you will receive an email notification as soon as there is a status change.
Craig
Posted on: 23 Aug 2018 20:53
I would also like to see this in Xamarin.Forms
ADMIN
Yana
Posted on: 19 Apr 2018 14:51
Hi CT, 

Thank you sending your comment. We're keeping an eye on this item and if there's demand, we'll schedule it for some of the upcoming releases.
CT
Posted on: 19 Apr 2018 09:47
Yeah, I am looking forward the secondary Y-Axis too.
ADMIN
Yana
Posted on: 03 Apr 2018 07:02
Hi Naveen,

Thank you for your comment.  At this point multiple axes feature is yet not planned for implementation. As you're following the item, you will be notified on any status changes.
Naveen
Posted on: 05 Jul 2017 07:12
I am waiting to see the secondary Y-Axis i.e the Y-Axis on both let and right side.