Multi Axes chart xamarin iOS

[maria]

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

[Didi]

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

[maria]

Thank you didi! It helps a lot!

[maria]

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?

[Didi]

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

[maria]

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>

[maria]

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>

[Yana]

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]

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]

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