viernes, 10 de febrero de 2017

Oxyplot: Una solución gratuita y open-source para crear gráficas en .NET y Xamarin

¡Hola! En esta entrada te mostraré lo fácil que es agregar gráficas en un proyecto de Xamarin.Forms utilizando Oxyplot, la cual es una librería multiplataforma para agregar charts en soluciones basadas en .NET Framework, tales como WPF, Windows Forms, Windows, Windows Phone, Silverlight, y por supuesto, Xamarin (Forms, Android, iOS, etc).

Existen 4 pasos básicos a seguir:
  1. Agregar el paquete Oxyplot a tu proyecto mediante el Nuget Package Manager.
  2. Agregar un control PlotView en tu interfaz de usuario
  3. Crear un objeto PlotModel.
  4. Asociar (mediante Binding, por ejemplo) el PlotModel a la propiedad Model del PlotView.

Ahora vamos a ver cómo se hace paso a paso en un proyecto de Xamarin.Forms.

Paso 1. Crea un proyecto de tipo Xamarin.Forms Portable. Para este caso, he puesto el nombre GraficasOxyplot.


Paso 2. Da clic derecho en la solución y elige Administrar Paquetes Nuget para la Solución.




Paso 3. Busca el paquete Oxyplot.Xamarin.Forms y agrégalo a todos los proyectos de tu solución que vayas a manejar.


Paso 4. Debes inicializar el renderer de plataforma específica en cada proyecto donde hayas agregado el paquete. Siempre será después del Init de Xamarin.Forms y la instrucción a colocar es OxyPlot.Xamarin.Forms.Platform.Plataforma.PlotViewRenderer.Init(); donde Plataforma es reemplazado por Android, iOS, UWP y WP8, según el caso.

Por ejemplo, para Android debes agregar dicha instrucción en el MainActivity; en el caso de iOS, es en AppDelegate:


Para UWP y los proyectos de Windows, busca el archivo App.xaml.cs de cada plataforma específica y agrega la instrucción mencionada para inicializar los renderers:


Paso 5. Ahora crea una carpeta llamada ViewModels. En ella, agrega una clase llamada PastelViewModel con el código siguiente, en el cual creamos un objeto PlotModel y le agregamos series de datos mediante la colección Series. En este caso usamos un PieSeries lleno de PieSlices porque vamos a mostrar una gráfica de pay:


using OxyPlot;
using OxyPlot.Series;

namespace GraficasOxyplot.ViewModels
{
    public class PastelViewModel
    {
        public PlotModel Modelo { get; set; }

        public PastelViewModel()
        {
            PieSeries serie = new PieSeries();
            serie.Slices.Add(new PieSlice("Hielo", 40) { IsExploded = true, Fill = OxyColors.SkyBlue });
            serie.Slices.Add(new PieSlice("Fuego", 67) { IsExploded = false, Fill = OxyColors.Red });
            serie.Slices.Add(new PieSlice("Normal", 109) { IsExploded = false, Fill = OxyColors.LightGray });
            serie.Slices.Add(new PieSlice("Dragón", 48) { IsExploded = true, Fill = OxyColors.Orange });
            serie.Slices.Add(new PieSlice("Agua", 133) { IsExploded = true, Fill = OxyColors.Blue });
            serie.Slices.Add(new PieSlice("Eléctrico", 51) { IsExploded = false, Fill = OxyColors.Yellow });

            Modelo = new PlotModel() { PlotMargins = new OxyThickness(50) };
            Modelo.Series.Add(serie);
        }
    }
}

Paso 6. En el proyecto de Xamarin.Forms, crea una carpeta llamada Views, donde agregaremos todas las vistas (páginas). En dicha carpeta, agrega un Forms Xaml Page. En este caso, le he puesto el nombre PastelView.


Paso 7. Como mencionamos anteriormente, se agregará un objeto PlotView en la interfaz de usuario. Para que sea reconocido en nuestro XAML, debemos agregar una referencia a la librería en la parte de espacios de nombre (lo puedes observar a continuación en el código xmlns:oxy). Ahora sí, agregamos el control PlotView con las propiedades Model, BackgroundColor, VerticalOptions, HorizontalOptions y HeightRequest establecidas. Model tiene la referencia al modelo creado en el paso 5 (Modelo).

Así pues, el código XAML de esta vista es el siguiente:

<?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="GraficasOxyplot.Views.PastelView"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms">
  <ContentPage.Content>
    <StackLayout BackgroundColor="White">
      <Label HorizontalTextAlignment="Center" Text="Pokémon por Tipo" 
             FontAttributes="Bold" TextColor="Blue" />
      <oxy:PlotView Model="{Binding Modelo}" BackgroundColor="White"
                    VerticalOptions="Fill" HorizontalOptions="Fill" HeightRequest="400"/>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

El code-behind, es decir, el código C# de la vista es simplemente un enlace de la View al ViewModel (mediante BindingContext) PastelViewModel que creamos en el paso 5 y que contiene la propiedad Modelo.

using Xamarin.Forms;
using GraficasOxyplot.ViewModels;

namespace GraficasOxyplot.Views
{
    public partial class PastelView : ContentPage
    {
        public PastelViewModel vm { get; set; }

        public PastelView()
        {
            InitializeComponent();

            vm = new PastelViewModel();
            BindingContext = vm;
        }
    }
}

Paso 8. ¡Listo! Ya solo tienes que indicar en tu archivo App.cs del proyecto de Xamarin.Forms que inicie la vista PastelView para mostrar la página que contiene la gráfica mediante el código siguiente:

public App()
{
     MainPage = new NavigationPage(new Views.PastelView());
}

¿Cómo se ve la gráfica generada? A continuación te muestro el resultado en Android:

 

¿Y cómo se ven en Windows 10? Pues así:

(Luego les muestro cómo se ve en un iPhone =) )

Fácil, ¿no? En mi GitHub puedes encontrar el código fuente de este proyecto. Observa que he agregado 4 Views y 4 ViewModels más, además de que el App.cs es diferente porque muestro también cómo crear una gráfica de barras, áreas y XY. Algo como esto:




Espero que esta entrada haya sido de tu interés. Compártela con tus amigos si así fue, y espero te sea útil en tus desarrollos.

¡Saludos!

6 comentarios:

  1. Excelente artículo, muchas gracias por el aporte!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario y qué bueno que haya sido de tu interés :)

      Eliminar
  2. Se lo agradezco, és lo que andaba buscando. :)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por leer mi blog :) espero te haya sido de utilidad en tus aplicaciones. ¡Saludos!

      Eliminar
  3. Excelente articulo, fue justo lo que necesitaba. De casualidad no tienes uno para conectar Xamarin con MySql?

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario y qué bueno que te sirvió :) Al respecto de MySQL mi recomendación es que generes un servicio web (en C#, PHP o lo que gustes) al cual se conecte tu base de datos (en SQL, MySQL o cualquier motor), es decir que ahi expondras metodos. En Xamarin es muy sencillo conectarse a un servicio web. De esa manera, la seguridad en tu sistema de información se verá beneficiada.

      Eliminar