OxyPlot Chart Not Displaying On Xamarin Forms Portable Application

Question

I'm creating a PieChart using OxyPlot here in my Xamarin.Forms (Portable) Application. I created a ViewModel named PieViewModel where in I declare the content of the Pie Chart. In my SalesPage.XAML.cs, I call the ViewModel and access the salesmodel in it. In my XAML code, I bind the salesmodel in my code.

However, I wasn't able to display the PieChart. Here are the codes I used:

PieViewModel.cs

using OxyPlot;
using OxyPlot.Series;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

    namespace XamarinFormsDemo.ViewModels
    {
        public class PieViewModel : INotifyPropertyChanged
        {
            private PlotModel modelP1;
            public PieViewModel()
            {
                modelP1 = new PlotModel { Title = "Pie Sample1" };

                dynamic seriesP1 = new PieSeries { StrokeThickness = 2.0, InsideLabelPosition = 0.8, AngleSpan = 360, StartAngle = 0 };

                seriesP1.Slices.Add(new PieSlice("Africa", 1030) { IsExploded = false, Fill = OxyColors.PaleVioletRed });
                seriesP1.Slices.Add(new PieSlice("Americas", 929) { IsExploded = true });
                seriesP1.Slices.Add(new PieSlice("Asia", 4157) { IsExploded = true });
                seriesP1.Slices.Add(new PieSlice("Europe", 739) { IsExploded = true });
                seriesP1.Slices.Add(new PieSlice("Oceania", 35) { IsExploded = true });

                modelP1.Series.Add(seriesP1);

            }

            public PlotModel Model1
            {
                get { return modelP1; }
                set { modelP1 = value; }
            }


            public event PropertyChangedEventHandler PropertyChanged;

            protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }

        }
    }

.

SalesPage.XAML.cs

using OxyPlot;
using OxyPlot.Xamarin.Forms;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using XamarinFormsDemo.ViewModels;



using Xamarin.Forms;

    namespace XamarinFormsDemo.Views
    {
        public partial class SalesPage : ContentPage
        {

            public SalesPage()
            {

            }


        }
    }

. SalesPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         x:Class="XamarinFormsDemo.Views.SalesPage"
         BackgroundImage="bg3.jpg"
         Title="Sales Page">



    <oxy:PlotView Model="{Binding Model1}" VerticalOptions="Center" HorizontalOptions="Center"/>

</ContentPage>

. MainActivity.cs

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using ImageCircle.Forms.Plugin.Droid;
using Xamarin.Forms.Platform.Android;

namespace XamarinFormsDemo.Droid
{
    [Activity(Label = "XamarinFormsDemo", Icon = "@drawable/recordsicon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : AndroidActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
            LoadApplication(new App());
            ImageCircleRenderer.Init();
        }
    }
}

Please help me with this. I'm really getting confused on how the things are going. Thanks a lot.

Answer 1

Here's some sample code:

App: (Portable)

    public class App : Application
    {
        public App()
        {
            MainPage = new Page3();
        }
    }

XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="App26.Page3">
  <ContentPage.Content>
    <oxy:PlotView Model="{Binding MyModel}"></oxy:PlotView>
  </ContentPage.Content>
</ContentPage>

CS:

public partial class Page3 : ContentPage
{
    public MyViewModel vm { get; set; }

    public Page3()
    {
        InitializeComponent();

        vm = new MyViewModel();

        BindingContext = vm;
    }
}

ViewModel:

public class MyViewModel
{
    public PlotModel MyModel { get; set; }

    public MyViewModel()
    {
        PieSeries pieSeries = new PieSeries();
        pieSeries.Slices.Add(new PieSlice("Africa", 1030) { IsExploded = false, Fill = OxyColors.PaleVioletRed });
        pieSeries.Slices.Add(new PieSlice("Americas", 929) { IsExploded = true });
        pieSeries.Slices.Add(new PieSlice("Asia", 4157) { IsExploded = true });
        pieSeries.Slices.Add(new PieSlice("Europe", 739) { IsExploded = true });
        pieSeries.Slices.Add(new PieSlice("Oceania", 350) { IsExploded = true });

        MyModel = new PlotModel();
        MyModel.Series.Add(pieSeries);
    }
}

MainActivity: (Droid)

 [Activity(Label = "App26", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
        LoadApplication(new App());
    }
}