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

Multi Axes chart xamarin iOS

7 Answers 188 Views
Chart
This is a migrated thread and some comments may be shown as answers.
maria
Top achievements
Rank 1
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

Sort by
0
Didi
Telerik team
answered on 28 May 2020, 11:48 AM

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.
0
maria
Top achievements
Rank 1
answered on 28 May 2020, 04:35 PM
Thank you didi! It helps a lot!
0
maria
Top achievements
Rank 1
answered on 29 May 2020, 04:09 AM
I tried the stacking of the chart and it is success however the zoom functionality is not working as intended. Only the topchart was able to zoom not the barseries. Is it possible to zoom both the stack graph at the same time?
0
Didi
Telerik team
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

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.
0
maria
Top achievements
Rank 1
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>
0
maria
Top achievements
Rank 1
answered on 01 Jun 2020, 01:39 AM

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>
0
Yana
Telerik team
answered on 02 Jun 2020, 07:09 AM

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

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.
Ajaysinh
Top achievements
Rank 1
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
Telerik team
commented on 04 Oct 2021, 01:52 PM

More information on this will be sent in the support ticket. We are researching the case. 
Tags
Chart
Asked by
maria
Top achievements
Rank 1
Answers by
Didi
Telerik team
maria
Top achievements
Rank 1
Yana
Telerik team
Share this question
or