Gráficos en Xamarin con Microcharts

Los gráficos son algo con lo que cualquier desarrollador se acaba topando en algún momento de su carrera. Mi objetivo con este post es hacer que esa experiencia no sea algo traumático y que podamos entregar un trabajo profesional sin la necesidad de sufrir un infierno por ello

Microcharts

El NuGet de Microchart nos permite hacer gráficos responsive en nuestras aplicaciones Xamarin de una forma muy cómoda y sencilla. Con declarar una simple lista de elementos y asignarlos al control nuestros problemas desaparecen como por arte de magia.

Comenzemos

Vamos a crear un nuevo proyecto de Xamarin con (en mi caso) las tres plataformas para ejecutar el proyecto (iOS, Andriod y UWP).

Agregar el NuGet

Ahora, haremos click derecho sobre la solución de nuestro proyecto para agregar los nugets que necesitamos sobre todos nuestros proyectos.

Debemos agregar 2 Nugets: Microcharts.Forms y Microcharts

Y a crear nuestros gráficos!

Sobre la MainPage.xaml de nuestro proyecto

<?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:local="clr-namespace:XamarinMicroCharts"
             xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
             x:Class="XamarinMicroCharts.MainPage">

    <StackLayout>
        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Bar Chart"/>
        <forms:ChartView x:Name="barChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Radial Gauge Chart"/>
        <forms:ChartView x:Name="pieChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Donut Chart"/>
        <forms:ChartView x:Name="donutChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Line Chart"/>
        <forms:ChartView x:Name="linesChart" HeightRequest="200" WidthRequest="100"/>
    </StackLayout>
</ContentPage>

Debemos hacer 2 cosas. La primera es añadir el espacio de nombres del Nuget para importar el control XAML.

xmlns:local="clr-namespace:XamarinMicroCharts"

Y ahora podemos empezar a poner nuestros controles, que será donde cargaremos nuestros gráficos desde el código C#.

<Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Bar Chart"/>
        <forms:ChartView x:Name="barChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Radial Gauge Chart"/>
        <forms:ChartView x:Name="pieChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Donut Chart"/>
        <forms:ChartView x:Name="donutChart" HeightRequest="200" WidthRequest="100"/>

        <Label FontSize="25" HorizontalOptions="CenterAndExpand" Text="Line Chart"/>
        <forms:ChartView x:Name="linesChart" HeightRequest="200" WidthRequest="100"/>

Con esto hemos acabado con la vista XAML, ahora vamos al código.

Nuestra clase

Será la clase MainPage.xaml.cs

using System.Collections.Generic;
using Xamarin.Forms;
//Using Microcharts
using Microcharts;
//Especificar que los entrys son los del nuget
using Entry = Microcharts.Entry;
//Using a SkiaSharp para los colores de los gráficos
using SkiaSharp;

namespace XamarinMicroCharts
{
    public partial class MainPage : ContentPage
    {
        List<Entry> entryList;
        public MainPage()
        {
            InitializeComponent();
            entryList = new List<Entry>();
            //Cargar nuesta lista de entries;
            LoadEntries();
            //Asignar los datos dentro de los entrys a los gráficos dentro de la vista XAML
            barChart.Chart = new BarChart()
            {
                Entries = entryList
            };
            pieChart.Chart = new RadialGaugeChart()
            {
                Entries = entryList
            };
            donutChart.Chart = new DonutChart()
            {
                Entries = entryList
            };
            linesChart.Chart = new LineChart()
            {
                Entries = entryList
            };
        }
        private void LoadEntries()
        {
            Entry e1 = new Entry(70)
            {
                Label = "A",
                ValueLabel = "70",
                Color = SKColor.Parse("#00bcd4")
            };
            Entry e2 = new Entry(300)
            {
                Label = "B",
                ValueLabel = "300",
                Color = SKColor.Parse("#F44336")
            };
            Entry e3 = new Entry(50)
            {
                Label = "C",
                ValueLabel = "50",
                Color = SKColor.Parse("#43A047")
            };
            Entry e4 = new Entry(500)
            {
                Label = "D",
                ValueLabel = "500",
                Color = SKColor.Parse("#F9A825")
            };
            entryList.Add(e1);
            entryList.Add(e2);
            entryList.Add(e3);
            entryList.Add(e4);
        }
    }
}

Podemos dividirla en tres partes.

Necesitamos importar unas cuantas librerias para trabajar

using System.Collections.Generic;
using Xamarin.Forms;
//Using Microcharts
using Microcharts;
//Especificar que los entrys son los del nuget
using Entry = Microcharts.Entry;
//Using a SkiaSharp para los colores de los gráficos
using SkiaSharp;

Ahora, nos declaramos una lista de Entry (clase del Nuget) como propiedad de clase para almacenar los datos de los gráficos.

List<Entry> entryList;

Haremos un método para rellenar esta lista desde el constructor con datos.

private void LoadEntries()
        {
            Entry e1 = new Entry(70)
            {
                Label = "A",
                ValueLabel = "70",
                Color = SKColor.Parse("#00bcd4")
            };
            Entry e2 = new Entry(300)
            {
                Label = "B",
                ValueLabel = "300",
                Color = SKColor.Parse("#F44336")
            };
            Entry e3 = new Entry(50)
            {
                Label = "C",
                ValueLabel = "50",
                Color = SKColor.Parse("#43A047")
            };
            Entry e4 = new Entry(500)
            {
                Label = "D",
                ValueLabel = "500",
                Color = SKColor.Parse("#F9A825")
            };
            entryList.Add(e1);
            entryList.Add(e2);
            entryList.Add(e3);
            entryList.Add(e4);
        }

«Label» es el nombre que recibira la etiqueta del gráfico, «ValueLabel» es el texto que acompañara cada parte del gráfico y «Color» es el color que tomara el gráfico. Este debe ser de la clase SKColor.

Y ahora, en el constructor, cargamos la lista de datos y emparejamos los datos con los gráficos.

public MainPage()
        {
            InitializeComponent();
            entryList = new List<Entry>();
            //Cargar nuesta lista de entries;
            LoadEntries();
            //Asignar los datos dentro de los entrys a los gráficos dentro de la vista XAML
            barChart.Chart = new BarChart()
            {
                Entries = entryList
            };
            pieChart.Chart = new RadialGaugeChart()
            {
                Entries = entryList
            };
            donutChart.Chart = new DonutChart()
            {
                Entries = entryList
            };
            linesChart.Chart = new LineChart()
            {
                Entries = entryList
            };
        }

Tras esto, solo nos queda ejecutar nuestro proyecto y observar esos maravillosos gráficos que acabamos de hacer con nuestras propias manos.

Autor: Andrés Sánchez Robleño

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2018-2019

Código: https://github.com/AndresSanRo/XamarinMicroCharts

Linkedin: https://www.linkedin.com/in/andres-sanchez-robleno/