Usando o OxyPlot para Gráficos no Xamarin Android

Compartilhe

Oxyplot, uma bibliteca de plotagem com licença no MIT que possibilita gerar gráficos para diversos fins. Nesse post resolvi criar um pequeno tutorial para demonstrar sua eficácia.

Para um dos App’s que estou desenvolvendo foi necessário montar um gráfico demonstrativo de vendas e recursos, entre Pie e Lines, pesquisando na bibliotecas Nuget, encontrei o OxyPlot, uma Biblioteca que achei interessante. Com alguns minutos de leitura aprendi a manusear essa maravilhosa Lib e criar um pequeno tutorial.

Primeiro Passo:

Crie uma Android Blank App: 

Nomeie como: OxyPlotForm

Segundo Passo:

Após a sua Solution ficar pronta, Click com o Botão direito do Mouse sobre o seu Project e Click em Manage NuGet Packages:

Terceiro Passo:

Faça uma busca por Oxyplot Xamarin Android, como mostra a imagem:

Instale ao seu projeto.

Quarto passo:

Abra o Layout  Main.xaml

Quinto Passo, edite o conteúdo, como mostra abaixo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:padding="10dp">
    <oxyplot.xamarin.android.PlotView
        android:id="@+id/plotViewGrafico"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:id="@+id/space1" />
    <OxyPlot.Xamarin.Android.PlotView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/plotViewLinha" />
</LinearLayout>

Sexto passo:

Edite o Arquivo MainActivity.cs, como mostra abaixo:

using Android.App;
using Android.Widget;
using Android.OS;
using OxyPlot;
using OxyPlot.Series;
using OxyPlot.Xamarin.Android;
using Android.Views;
using OxyPlot.Axes;

namespace OxyPlotForm
{
    [Activity(Label = "OxyPlotForm", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        private PlotView plotViewGrafico;
        private PlotView plotViewLinhas;
        public PlotModel ModelPizza { get; set; }
        public PlotModel ModelLinhas { get; set; }
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Main);
            plotViewGrafico = FindViewById(Resource.Id.plotViewGrafico);
            plotViewLinhas = FindViewById(Resource.Id.plotViewLinha);

            var piemodel = new PlotModel();
            var pie1 = new PieSeries() { Title = "Exemplo Pizza" };
            
            pie1.Slices.Add(new PieSlice("Asia", 4524) { IsExploded = false, Fill = OxyColors.PaleVioletRed });
            pie1.Slices.Add(new PieSlice("Oceania", 584) { IsExploded = true });
            pie1.Slices.Add(new PieSlice("América do Sul", 8597) { IsExploded = true });
            pie1.Slices.Add(new PieSlice("América do Norte", 10587) { IsExploded = true });
            pie1.Slices.Add(new PieSlice("Europa", 987) { IsExploded = true });

            piemodel.Series.Add(pie1);
            ModelPizza = piemodel;
            plotViewGrafico.Model = ModelPizza;

            var model = new PlotModel() { LegendSymbolLength = 24 };
            var s1 = new LineSeries()
            {
                LabelFormatString = "{1}",
                Color = OxyColors.SkyBlue,
                MarkerType = MarkerType.Circle,
                MarkerSize = 6,
                MarkerStroke = OxyColors.White,
                MarkerFill = OxyColors.SkyBlue,
                MarkerStrokeThickness = 1.5
            };
            s1.Points.Add(new DataPoint(0, 10));
            s1.Points.Add(new DataPoint(10, 40));
            s1.Points.Add(new DataPoint(40, 20));
            s1.Points.Add(new DataPoint(60, 30));
            model.Series.Add(s1);
            model.Axes.Add(new LinearAxis() { Position = AxisPosition.Bottom, MinimumPadding = 0.1, MaximumPadding = 0.1 });
            model.Axes.Add(new LinearAxis() { Position = AxisPosition.Left, MinimumPadding = 0.1, MaximumPadding = 0.1 });

            var s2 = new LineSeries()
            {
                Color = OxyColors.Teal,
                LabelFormatString = "{1}",
                MarkerType = MarkerType.Diamond,
                MarkerSize = 6,
                MarkerStroke = OxyColors.White,
                MarkerFill = OxyColors.Teal,
                MarkerStrokeThickness = 1.5
            };
            s2.Points.Add(new DataPoint(0, 9));
            s2.Points.Add(new DataPoint(10, 52));
            s2.Points.Add(new DataPoint(40, 44));
            s2.Points.Add(new DataPoint(60, 39));

            model.Series.Add(s2);
            
            var s3 = new LineSeries
            {
                BrokenLineColor = OxyColors.Red,
                BrokenLineThickness = 1,
                BrokenLineStyle = LineStyle.Automatic
            };
            s3.Points.Add(new DataPoint(0, 26));
            s3.Points.Add(new DataPoint(10, 30));
            s3.Points.Add(DataPoint.Undefined);
            s3.Points.Add(new DataPoint(10, 25));
            s3.Points.Add(new DataPoint(20, 26));
            s3.Points.Add(new DataPoint(25, 36));
            s3.Points.Add(new DataPoint(30, 40));
            s3.Points.Add(DataPoint.Undefined);
            s3.Points.Add(new DataPoint(30, 20));
            s3.Points.Add(new DataPoint(40, 10));

            model.Series.Add(s3);

            ModelLinhas = model;
            plotViewLinhas.Model = model;
        }
    }
}

Após a Execução o resultado será esse:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

shares