This is a migrated thread and some comments may be shown as answers.

Multi Axes chart xamarin iOS

7 Answers 372 Views

Chart

This is a migrated thread and some comments may be shown as answers.

maria asked on 28 May 2020, 09:49 AM

Hi i have problem creating multi axes chart for iOS.

Im trying to do something like the image attached and i read a lot of documentation but all of that is using native controller for iOS.
I have done creating this on android using customrenderer.

Is there any way to show the bar series YAXIS to right side of the chart?
Here's how my approach using custom renderer on iOS.

<telerikChart:RadCartesianChart

x:Name="multiAxesGraph"

Grid.Row="1"

BackgroundColor="{OnPlatform iOS=Transparent}"

HorizontalOptions="FillAndExpand"

Zoom="1,1">

<telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:DateTimeContinuousAxis

LabelFitMode="Rotate"

LabelFontSize="9"

LabelFormat="MM/d"

LabelTextColor="White"

LineColor="White"

MajorStep="7"

MajorStepUnit="Day"

MajorTickThickness="5"

PlotMode="OnTicks" />

</telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:NumericalAxis

LabelFontSize="9"

LabelTextColor="White"

LineColor="White"

MajorStep="5"

Maximum="{Binding MaxWeight, Mode=TwoWay}"

Minimum="{Binding MinWeight, Mode=TwoWay}" />

</telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:RadCartesianChart.Series>

<telerikChart:LineSeries

CategoryBinding="Category"

DisplayName="Weight"

ItemsSource="{Binding WeightGraph, Mode=TwoWay}"

ValueBinding="Value" />

<telerikChart:BarSeries

CategoryBinding="Category"

DisplayName="Water"

ItemsSource="{Binding WaterGraph, Mode=TwoWay}"

ValueBinding="Value" />

</telerikChart:RadCartesianChart.Series>

<telerikChart:RadCartesianChart.Palette>

<telerikChart:ChartPalette>

<telerikChart:ChartPalette.Entries>

<telerikChart:PaletteEntry FillColor="White" StrokeColor="White" />

<telerikChart:PaletteEntry FillColor="#8cc63f" StrokeColor="#8cc63f" />

</telerikChart:ChartPalette.Entries>

</telerikChart:ChartPalette>

</telerikChart:RadCartesianChart.Palette>

<telerikChart:RadCartesianChart.ChartBehaviors>

<telerikChart:ChartPanAndZoomBehavior

HandleDoubleTap="True"

PanMode="Horizontal"

ZoomMode="Horizontal" />

</telerikChart:RadCartesianChart.ChartBehaviors>

</telerikChart:RadCartesianChart>

protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)

{

base.OnElementChanged(e);

var series = Control.Series.ToArray();

if (series.Length == 2)

{

TKChartNumericAxis nativeAxis = series[1].YAxis as TKChartNumericAxis;

nativeAxis.Position = TKChartAxisPosition.Right;

nativeAxis.Style.LabelStyle.TextColor = UIColor.Green;

nativeAxis.Style.LineHidden = false;

nativeAxis.Style.LineStroke = new TKStroke(UIColor.White);

series[1].YAxis = nativeAxis;

}

I'm stuck here for 2 days creating custom renderer for iOS but none of them succeed.

Thanks

7 Answers, 1 is accepted

answered on 28 May 2020, 11:48 AM

ChartAxis.zip

Hello Maria,

Thank you for the provided code. As to the image attached, in the forum thread, there are only code snippets, no image attached.

There is no built-in multiple Y axis option, however, you can easily achieve that result using one of the following approaches:

1) by stacking charts on top of each other and setting the background to transparent.

As an example, here are two charts using that process:

hide the horizontal axis for every chart except the top one, here's how you can do that:

2) using a custom renderer.

I have attached a sample that shows how custom renderer should be implemented for iOS and Android. Please review the CustomChartRenderer.cs files in iOS and android projects. For ios, you need to override the UpdateNativeWidget method and inside it to create the y-axis, and x-axis (if it is needed).

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 29 May 2020, 09:26 AM

Hi Maria,

I am glad to hear that the provided solution was helpful.

Additional information:

Could you please elaborate more on the following: which approach for multiple y-axes is used 1 or 2? I have added Chart pan and zoom behavior in the project I have attached in my previous reply (custom renderer solution for the y-axis) and on my side, both series are zoomed as expected.

I look forward to your reply.

Regards,
Didi
Progress Telerik

answered on 01 Jun 2020, 12:29 AM

Hi didi,

I used the stacking 2 graphs to be like multiple axes like you mentioned above. I wasn't able to use the custom renderer for iOS. When i tried to use the custom renderer it is showing but only for a seconds and when the data loads it being reverted to not having the right axes. So i used the stacking of 2 graphs.

For the YAXIS left side thats the line series value in on the right side thats for the bar series.

I have added the chart pan and zoom on both graph but the topChart which is line series is the only graph that zoom and pan.

<telerikChart:RadCartesianChart

x:Name="BottomChart"

Margin="0,0,0,20"

BackgroundColor="Transparent"

Zoom="1,1">

<telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:CategoricalAxis LabelTextColor="Transparent" LineColor="Transparent" />

</telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:NumericalAxis

LabelTextColor="#8cc63f"

LineColor="White"

Location="Right" />

</telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:RadCartesianChart.Series>

<telerikChart:BarSeries ItemsSource="{Binding BarGraph}">

<telerikChart:BarSeries.ValueBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="Value" />

</telerikChart:BarSeries.ValueBinding>

<telerikChart:BarSeries.CategoryBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="Category" />

</telerikChart:BarSeries.CategoryBinding>

</telerikChart:BarSeries>

</telerikChart:RadCartesianChart.Series>

<telerikChart:RadCartesianChart.Palette>

<telerikChart:ChartPalette>

<telerikChart:ChartPalette.Entries>

<telerikChart:PaletteEntry FillColor="#8cc63f" StrokeColor="#8cc63f" />

</telerikChart:ChartPalette.Entries>

</telerikChart:ChartPalette>

</telerikChart:RadCartesianChart.Palette>

<telerikChart:RadCartesianChart.ChartBehaviors>

<telerikChart:ChartPanAndZoomBehavior

HandleDoubleTap="True"

PanMode="Horizontal"

ZoomMode="Horizontal" />

</telerikChart:RadCartesianChart.ChartBehaviors>

</telerikChart:RadCartesianChart>

<telerikChart:RadCartesianChart

x:Name="TopChart"

Margin="0,0,22,0"

BackgroundColor="Transparent"

HorizontalOptions="FillAndExpand"

Zoom="1,1">

<telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:DateTimeContinuousAxis

LabelFitMode="Rotate"

LabelFontSize="9"

LabelFormat="MM/d"

LabelTextColor="White"

LineColor="White"

MajorStep="7"

MajorStepUnit="Day"

MajorTickBackgroundColor="Gray"

MajorTickThickness="5"

PlotMode="OnTicks" />

</telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:NumericalAxis

LabelTextColor="White"

LineColor="White"

Location="Left"

Maximum="{Binding Maximum, Mode=TwoWay}"

Minimum="{Binding Minimum, Mode=TwoWay}" />

</telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:RadCartesianChart.Series>

<telerikChart:LineSeries ItemsSource="{Binding LineGraph}">

<telerikChart:LineSeries.ValueBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="Value" />

</telerikChart:LineSeries.ValueBinding>

<telerikChart:LineSeries.CategoryBinding>

<telerikChart:PropertyNameDataPointBinding PropertyName="Category" />

</telerikChart:LineSeries.CategoryBinding>

</telerikChart:LineSeries>

</telerikChart:RadCartesianChart.Series>

<telerikChart:RadCartesianChart.Palette>

<telerikChart:ChartPalette>

<telerikChart:ChartPalette.Entries>

<telerikChart:PaletteEntry FillColor="#fff" StrokeColor="#fff" />

</telerikChart:ChartPalette.Entries>

</telerikChart:ChartPalette>

</telerikChart:RadCartesianChart.Palette>

<telerikChart:RadCartesianChart.ChartBehaviors>

<telerikChart:ChartPanAndZoomBehavior

HandleDoubleTap="True"

PanMode="Horizontal"

ZoomMode="Horizontal" />

</telerikChart:RadCartesianChart.ChartBehaviors>

</telerikChart:RadCartesianChart>

answered on 01 Jun 2020, 01:39 AM

series.png

Hi,

When i tried to do the custom renderer using one chart and 2 series. I used your solution and modified a bit but when i tried to do this way the barseries and YAXIS right side is not showing anymore. The only thing show is the lineseries category and values.

protected override void UpdateNativeWidget()

{

base.UpdateNativeWidget();

if (this.Control.Series.Length == 2)

{

if (this.Control.Series[1] is TKChartColumnSeries)

{

TKChartNumericAxis tKChartNumericAxis = new TKChartNumericAxis();

tKChartNumericAxis.Position = TKChartAxisPosition.Right;

tKChartNumericAxis.Style.LabelStyle.TextColor = UIColor.White;

tKChartNumericAxis.Style.LineStroke = new TKStroke(UIColor.White);

this.Control.AddAxis(tKChartNumericAxis);

var barSeries = this.Control.Series[1] as TKChartColumnSeries;

var xx = barSeries.Title;

barSeries.YAxis = tKChartNumericAxis;

}

<telerikChart:RadCartesianChart

BackgroundColor="Transparent"

HorizontalOptions="FillAndExpand"

VerticalOptions="FillAndExpand"

Zoom="1,1">

<telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:DateTimeContinuousAxis

LabelFitMode="Rotate"

LabelFontSize="9"

LabelFormat="MM/d"

LabelTextColor="White"

LineColor="White"

MajorStep="7"

MajorStepUnit="Day"

MajorTickThickness="5"

PlotMode="OnTicks" />

</telerikChart:RadCartesianChart.HorizontalAxis>

<telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:NumericalAxis

LabelFontSize="9"

LabelTextColor="White"

LineColor="White"

MajorStep="5"

Maximum="{Binding Maximum, Mode=TwoWay}"

Minimum="{Binding Minimum, Mode=TwoWay}" />

</telerikChart:RadCartesianChart.VerticalAxis>

<telerikChart:RadCartesianChart.Series>

<telerikChart:LineSeries

CategoryBinding="Category"

DisplayName="Weight"

ItemsSource="{Binding LineGraph}"

ValueBinding="Value" />

<telerikChart:BarSeries

CategoryBinding="Category"

DisplayName="Score"

ItemsSource="{Binding BarGraph}"

ValueBinding="Value" />

</telerikChart:RadCartesianChart.Series>

<telerikChart:RadCartesianChart.Palette>

<telerikChart:ChartPalette>

<telerikChart:ChartPalette.Entries>

<telerikChart:PaletteEntry FillColor="White" StrokeColor="White" />

<telerikChart:PaletteEntry FillColor="#8cc63f" StrokeColor="#8cc63f" />

</telerikChart:ChartPalette.Entries>

</telerikChart:ChartPalette>

</telerikChart:RadCartesianChart.Palette>

<telerikChart:RadCartesianChart.ChartBehaviors>

<telerikChart:ChartPanAndZoomBehavior

HandleDoubleTap="True"

PanMode="Horizontal"

ZoomMode="Horizontal" />

</telerikChart:RadCartesianChart.ChartBehaviors>

</telerikChart:RadCartesianChart>

answered on 02 Jun 2020, 07:09 AM

ChartAxis.zip

Hello Maria,

I would need more information on the scenario and more specifically the data you're using to populate the Chart Series. I am asking as I have just tested a similar setup and the bar series is properly shown.

I have attached the updated project, can you download it and give it a try? Can you check what's different in the sample from the real app you have and send me what I have to update in order to reproduce the issue?

I look forward to your reply.

Regards,
Yana
Progress Telerik

Ajaysinh

commented on 30 Sep 2021, 05:11 AM

As I mention into https://feedback.telerik.com/xamarin/1537053-multi-axes-chart-with-delay-xamarin-ios. I have tried but it's not working with binding data after some delay.

Didi

commented on 04 Oct 2021, 01:52 PM

More information on this will be sent in the support ticket. We are researching the case.