WinRT. Uso de gráficas.

Introducción

En ocasiones en nuestras aplicaciones tendremos la necesidad de mostrar al usuario cierta información de la manera más directa y sencilla posible de modo que de un solo vistazo el usuario sea capaz de obtener la mayor información posible. A nivel de interfaz tenemos muchísimas opciones muy interesantes sin embargo, un excelente recurso muy utilizado para este tipo de situaciones es el uso de gráficas. Por ejemplo, estamos realizando una aplicación de compra de viviendas. Sería fantástico mostrarle al usuario la información de como ha oscilado el precio de la viviendo en el último trimestre por ejemplo. ¿Como lo hacemos?, ¿Que piensas que sería lo más acertado?. Posiblemente una gráfica de barras u otra similar te haya pasado por la mente.

En esta entrada vamos a aprender como utilizar gráficas en nuestras aplicaciones Windows Store.

Modern UI Toolkit

Si nos paramos a analizar el listado de controles disponibles para la creación de aplicaciones Windows Store (puedes consultar la lista en el siguiente enlace) observaremos que no tenemos ningún control que nos facilite la creación de gráficas.

Podemos superar el inconveniente creando nosotros mismos nuestro propio UserControl (utilizando la potencia de los DataTemplate de un ListView por ejemplo). Sin embargo, ya tenemos opciones Open Source disponibles que nos pueden ahorrar bastante tiempo permitiendonos centrarnos en otros puntos importantes de nuestra aplicación.

Mahmoud Medhat Moussa ha realizado un port de los controles para realizar gráficas disponibles en el Toolkit de Silverlight (una gran parte de ellos, no esta todo). El proyecto se llama Modern UI Toolkit y lo tenemos disponible en Codeplex:

http://modernuitoolkit.codeplex.com

Modern UI Toolkit

Si nos dirigimos a la sección de descargas podemos observar que tenemos disponibles dos opciones:

  • The First Beta Release. La librería necesaria para trabajar con los controles.
  • Testing Charts. Pequeño ejemplo que muestra el uso de cada uno de ellos.

Nos descargamos el primer fichero disponible (la librería) para poder trabajar con gráficas. Para facilitaros las cosas en la medida de lo posible es dejaré disponible la librería preparada en el siguiente enlace. Sin embargo, recomiendo encarecidamente estar atentos a Codeplex para obtener siempre las últimas versiones.

Tras obtener la librería necesaria, vamos a realizar un ejemplo lo más simple posible para trabajar con las distintas gráficas.  La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”.

Blank Application

Lo primero que necesitaremos antes de nada es una fuente de información a mostrar en formato gráfico. En el ejemplo que podéis descargar al final de la entrada vamos a mostrar en distintas gráficas las ventas anuales obtenidas mes a mes (simulación). Para definir la información primero vamos a crear el modelo de datos con los que vamos a trabajar:

    public class ChartItem
    {
        public string Name { get; set; }
        public int Value { get; set; }
    }

Simple. Contendrán un nombre (eje X) y un valor (eje Y). Tras crear el modelo, vamos a crear un view model encargado de preparar la información a la vista (las gráficas):

    public class ChartViewModel
    {
        #region Constructor

        public ChartViewModel()
        {
            var items = new List
            {
                new ChartItem { Name = "Enero", Value = 766},
                new ChartItem { Name = "Febrero", Value = 231},
                new ChartItem { Name = "Marzo", Value = 544},
                new ChartItem { Name = "Abril", Value = 11},
                new ChartItem { Name = "Mayo", Value = 112},
                new ChartItem { Name = "Junio", Value = 122},
                new ChartItem { Name = "Julio", Value = 332},
                new ChartItem { Name = "Agosto", Value = 662},
                new ChartItem { Name = "Septiembre", Value = 743},
                new ChartItem { Name = "Octubre", Value = 819},
                new ChartItem { Name = "Noviembre", Value = 923},
                new ChartItem { Name = "Diciembre", Value = 1232},
            };

            ChartItems = items;
        }

        #endregion

        #region Properties

        public List<ChartItem> ChartItems { get; set; }

        #endregion
    }

Hemos creado una propiedad pública ChartItems  que contendrá una colección de objetos ChartItem. Contendrán unas hipotéticas ventas anuales desglosadas mes a mes.

A continuación, vamos a vincular nuestra vista (MainPage) con el view model creado. Lo primero que debemos hacer es añadir la referencia al namespace donde hemos definido el view model:

using Ejemplo_Gráficas.ViewModels;

Tras añadir la referencia asignamos el DataContext de la vista al view model:

DataContext = new ChartViewModel();

Antes de continuar con la vista añadiendo las distintas gráficas, debemos añadir la referencia a la librería del Modern UI Toolkit. Para ello, clic derecho en las Referencias del proyecto y seleccionamos la opción “Agregar referencia…”:

Agregar referencia

Una ventana como la que podéis observar en la captura superior os aparecerá. Seleccionamos la opción “Examinar” y buscamos la ruta donde descargamos la librería.

Nos centramos en la parte importante, la interfaz (MainPage.xaml). Para poder trabajar con los controles de Charting debemos agregar los siguientes espacios de nombres:

xmlns:Chart="using:ModernUI.Toolkit.Data.Charting.Charts.Chart"
xmlns:Series="using:ModernUI.Toolkit.Data.Charting.Charts.Series"

Podremos utilizar los siguientes tipos de gráficas:

  • Area
  • Bar
  • Bubble
  • Column
  • Line
  • Pie Scatter
  • Stacked
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Margin="116,0,0,0">
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Ejemplo Gráficas" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>
        <ScrollViewer Grid.Row="1" Style="{StaticResource HorizontalScrollViewerStyle}" Margin="116,0,40,46">
            <StackPanel Orientation="Horizontal">
                <!-- ColumnSeries -->
                <Chart:Chart x:Name="columnChart" HorizontalAlignment="Left" Title="Columnas" VerticalAlignment="Top"
                             Background="LightGray" Foreground="Black" Height="600" Width="600" Margin="25,0"
                             >
                    <Chart:Chart.Series>
                        <Series:ColumnSeries
                            Title="Ventas Anuales (Ejemplo)"
                            ItemsSource="{Binding ChartItems}"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True">
                        </Series:ColumnSeries>
                    </Chart:Chart.Series>
                </Chart:Chart>
                <!-- LineSeries -->
                <Chart:Chart x:Name="linesChart" HorizontalAlignment="Left" Title="Líneas" VerticalAlignment="Top"
                             Height="600" Width="600" Margin="25,0">
                    <Chart:Chart.Series>
                        <Series:LineSeries
                            Title="Ventas Anuales (Ejemplo)"
                            ItemsSource="{Binding ChartItems}"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="False"/>
                    </Chart:Chart.Series>
                </Chart:Chart>
                <!-- BubbleSeries -->
                <Chart:Chart x:Name="areaChart" HorizontalAlignment="Left" Title="Área" VerticalAlignment="Top"
                             Height="600" Width="600" Margin="25,0">
                    <Chart:Chart.Series>
                        <Series:AreaSeries
                            Title="Ventas Anuales (Ejemplo)"
                            ItemsSource="{Binding ChartItems}"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="False"/>
                    </Chart:Chart.Series>
                </Chart:Chart>
            </StackPanel>
        </ScrollViewer>
    </Grid>

Hemos añadido tres gráficas (de tipo Column, Line y Area respectivamente). Todas reciben la información de la colección creada en memoria en el view model y accesible por la propiedad pública ChartItems. Importante, asignamos la propiedad  IndependentValue a EjeX (nombre del mes) que significa que cada barra correspondiente a la gráfica tendra una entrada de texto con el valor asignado al EjeX junto con la propiedad DependentValuePatha EjeY (ventas del mes) que mostrará la cantidad almacenada en la propiedad EjeY asigando un ancho determinado a cada barra.

¿Fácil, verdad?

El resultado lo podéis ver a continuación:

ColumnSeries – LineSeries

LineSeries – AreaSeries

A pesar de que el estilo que nos facilita por defecto es bastante acertado (Modern UI) podemos personalizar totalmente a nuestro antojo la apariencia visual de cada gráfica:

                <Chart:Chart x:Name="columnChart" HorizontalAlignment="Left" Title="Columnas" VerticalAlignment="Top"
                             Background="LightGray" Foreground="Black" Height="600" Width="600" Margin="25,0"
                             >
                    <Chart:Chart.Series>
                        <Series:ColumnSeries
                            Title="Ventas Anuales (Ejemplo)"
                            ItemsSource="{Binding ChartItems}"
                            IndependentValueBinding="{Binding Name}"
                            DependentValueBinding="{Binding Value}"
                            IsSelectionEnabled="True">
                            <Series:ColumnSeries.DataPointStyle>
                                <Style TargetType="Control">
                                    <Setter Property="Background" Value="Red"/>
                                </Style>
                            </Series:ColumnSeries.DataPointStyle>
                        </Series:ColumnSeries>
                    </Chart:Chart.Series>
                </Chart:Chart>

El color de fondo y el de los textos es fácilmente modificable por las propiedades Background y Foreground respectivamente. El color de relleno de las gráficas (en nuestro caso las barras) lo podemos modificar alterando el color de fondo utilizando un estilo (DataPointStyle). El resultado conseguido es el siguiente:

Personalización

Puedes descargar el ejemplo realizado:

Espero que la introducción realizada en esta entrada os sea de utilidad. El Modern UI Toolkit nos proporciona un conjunto elevado de diferentes gráficas Open Source (Codeplex) y con la suficiente potente para la mayoría de situaciones. Recordar que es un port de las gráficas disponibles en el Silverlight Toolkit. Si ya habías trabajado con ellas, tienes una parte importante del camino recorrido. Sin duda, seguiremos la evolución del Toolkit profundizando más en distintas opciones que lo realizado en esta introducción (propiedades útiles, eventos como el Tapped o SelectionChanged, etc). Recordar también que cualquier tipo de duda la podéis dejar en los comentarios de la entrada.

Alternativas

Tenemos disponibles ya múltiples opciones de terceros:

  • Telerik. Atesoran una enorme experiencia a la hora de realizar controles para entornos .NET por lo tanto han logrado un conjunto cada vez más completo de controles para Windows Phone de una enorme calidad. Disponibles en HTML o XAML.
  • ComponentOne. Bastante variedad la ofrecida por ComponentOne. Lo más destacable quizás sea la facilidad con la que implementar animaciones además de soportar interacciones como hacer zoom, etc. Disponibles en HTML o XAML.
  • MindScape. Hasta 17 gráficas diferentes disponibles en su paquete Metro Elements (controles para Windows 8). A destacar su facilidad de uso junto a la belleza de su estilo por defecto.
  • Visfire. Muy completo conjunto de gráficas de diferente tipo. A destacar la interactividad que permiten por parte del usuario de manera muy sencilla de implementar junto a animaciones de bella factura.

Más información

Entradas relacionadas

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s