OxyPlot Pie chart not showing in iOS

Hi everyone,

I've been scratching my head for a couple of hours over this, so maybe someone can help me...

I'm currently using the build 1968 of OxyPlot for Xamarin Forms, for an app that will be used on Android and iOS (PCL). I am initializing the renderers in the Android MainActivity and in the iOS AppDelegate, using the information provided on the page.

The pie chart shows perfectly on Android, no problem there. But on iOS, nothing shows. I had to manually add the references to the OxyPlot, OxyPlot.Xamarin.Forms, OxyPlot.Xamarin.Forms.Platform.iOS and OxyPlot.Xamarin.iOS libraries since the nuget package install didn't get them to be recognized by the project.

I also checked and tried some of the workarounds stated in this issue: https://github.com/oxyplot/oxyplot/issues/492, but I still don't have any graph showing.

Has anyone experienced this and have a clear workaround to get it showing ?

Thanks in advance,
Bruno

Posts

  • MKahmenMKahmen DEMember ✭✭

    Hi!

    Did you manage to get it running? Same prob here...

    Cheers

  • BrunoBarretteBrunoBarrette USMember

    Hi @MariusKahmen ! Totally forgot I had posted this, otherwise would've come and answered...

    I don't know precisely what was causing the error, but I ended up giving a fixed HeightRequest and WidthRequest to my chart (200 for both; my chart takes approximately half the screen in portrait, and I'm handling orientation change to actually hide it when in landscape on a phone because it rendered horribly).

    Here's the snippet of the part where my graph is:

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="50*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
    
            <oxy:PlotView Grid.Row="0" Grid.Column="0" x:Name="objPlotView"
                          IsVisible="{Binding DashboardVisible}" Model="{Binding DashboardPlotModel}" 
                          VerticalOptions="Center" HorizontalOptions="CenterAndExpand"
                          HeightRequest="200" WidthRequest="200" />
    

    Also, based on what I read in that issue on github, I created a custom renderer in my iOS project, that goes like this:

    public class MyPlotViewRenderer : PlotViewRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs<OxyPlot.Xamarin.Forms.PlotView> e) {
            base.OnElementChanged(e);
        }
    
        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
            base.OnElementPropertyChanged(sender, e);
        }
    }
    

    And finally in the FinishedLaunching of the AppDelegate I added those two line to init, just before the Xamarin.Forms.Init():

    MYPROJECT.iOS.Views.UserControls.MyPlotViewRenderer.Init();
    var dummy = typeof(MYPROJECT.iOS.Views.UserControls.MyPlotViewRenderer);
    

    I don't know which part exactly got it all working to be honest, but in the end the important part I think is that it works, so hope it helps you!

    Regards,
    Bruno

  • MKahmenMKahmen DEMember ✭✭
    edited April 2016

    Hi Bruno,

    Had a sleepless night yesterday. Eventually figured it out by editing the sample from CenterAndExpand to

    pView = new PlotView { Model = plotModel, //BackgroundColor = Color.White, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand, } ;

    Thanks anyways!!

    Have a good one
    Marius

  • BrunoBarretteBrunoBarrette USMember

    I think I had tried that too, but for some reason my chart was not showing up correctly (maybe related to something else though)...

    I don't know if you plan on using a legend with your pie chart, but I did, and I found that the one provided by OxyPlot wasn't really that great, so just in case you might need one (or for anyone out there who'd like it), here's the custom listview I made (using the wonderful FlowListView : https://www.nuget.org/packages/DLToolkit.Forms.Controls.FlowListView/

    public class DashboardLegendListView : FlowListView {

    public DashboardLegendListView() {
        HorizontalOptions = LayoutOptions.FillAndExpand;
        VerticalOptions = LayoutOptions.Start;
        IsGroupingEnabled = false;
        HasUnevenRows = true;
    
        FlowColumnsTemplates = new List<FlowColumnTemplateSelector>() { 
            new FlowColumnSimpleTemplateSelector() { ViewType = typeof(FlowGroupingLegendViewCell) }, 
            new FlowColumnSimpleTemplateSelector() { ViewType = typeof(FlowGroupingLegendViewCell) }, 
        };
    
        FlowColumnExpand = DLToolkit.Forms.Controls.FlowColumnExpand.None;            
        SeparatorVisibility = SeparatorVisibility.None;
    }
    

    }

    public class FlowGroupingLegendViewCell : FlowStackCell {
        public FlowGroupingLegendViewCell() {
            var stack = new StackLayout() {
                Padding = new Thickness(1, 1, 1, 1),
                Orientation = StackOrientation.Horizontal
            };
    
            var colorFrame = new Frame() { 
                OutlineColor = Color.Black,
                Padding = 0,
                HorizontalOptions = LayoutOptions.Start
            };
    
            var colorBox = new BoxView() { 
                HeightRequest = 10,
                WidthRequest = 10
            };
            colorBox.SetBinding<LegendItem>(BoxView.ColorProperty, v => v.LegendColor);
            colorFrame.Content = colorBox;
            stack.Children.Add(colorFrame);
    
            var legendLabel = new ExtendedLabel() { 
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            legendLabel.SetBinding<LegendItem>(ExtendedLabel.TextProperty, v => v.LegendText);
            stack.Children.Add(legendLabel);
    
            Children.Add(stack);
        }
    }
    
    public class LegendItem {
            public LegendItem() {
                LegendColor = Color.Default;
            }
    
            public Color LegendColor { get; set; }
            public string LegendText { get; set; }
    
        }
    

    Pretty simple, as it only displays a little box filled with the slice's color and the text you give it, but suited my needs. All I did was to fill my List bindable property at the same time as I was building the plot model, with the color and text based on the slice.

Sign In or Register to comment.