How to Create Charts in Xamarin.Forms Portable Application using OxyPlot?

Question

Good Day everyone. I'm creating a Xamarin.Forms Portable Application and I want to display there a Chart using a OxyPlot.

But the codes I've found on the Internet doesn't seem to work fine. I just want to ask how am I going to create a Chart, specifically Pie Chart here in OxyPlot. Starting from my XAML to XAML.cs and to other files like model and viewmodel.

Can you please somehow provide me some instructions or code maybe on how am I going to do this?

I want the Chart to be coded here in my 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"
         x:Class="XamarinFormsDemo.Views.SalesPage"
         xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
         BackgroundImage="bg3.jpg"
         Title="Sales Page">

</ContentPage>

SalesPage.xaml.cs

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

namespace XamarinFormsDemo.Views
    {
        public partial class SalesPage : ContentPage
        {       
        public SalesPage()
        {
            InitializeComponent();
        }
    }
}

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;

namespace XamarinFormsDemo.Droid
{
    [Activity(Label = "XamarinFormsDemo", Icon = "@drawable/recordsicon", 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());
        ImageCircleRenderer.Init();
        }
    }
}

This is actually my first time to create Charts so please help me. Thanks for your help.

Answer 1

There is a getting started guide for Oxy Plot and Xamarin.Forms here. To answer your question, you can do the following:

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

    <oxy:PieSeries ... />

</ContentPage>

There is more documentation on the PieSeries and some samples of using it on the internet. Example:

    private static PlotModel CreateExample()
    {
        var model = new PlotModel { Title = "World population by continent" };

        var ps = new PieSeries
        {
            StrokeThickness = 2.0,
            InsideLabelPosition = 0.8,
            AngleSpan = 360,
            StartAngle = 0
        };

        // http://www.nationsonline.org/oneworld/world_population.htm
        // http://en.wikipedia.org/wiki/Continent
        ps.Slices.Add(new PieSlice("Africa", 1030) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Americas", 929) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Asia", 4157));
        ps.Slices.Add(new PieSlice("Europe", 739) { IsExploded = true });
        ps.Slices.Add(new PieSlice("Oceania", 35) { IsExploded = true });

        model.Series.Add(ps);
        return model;
    }