En el último artículo de la serie, Jeff explica cómo usar un componente del juego de herramientas estándar para Silverlight 3. De esta manera demuestra no sólo la utilización de gráficas, sino también cómo todos los otros controles de ese conjunto están disponibles para ser usados en nuestras aplicaciones en el teléfono.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #31: Charting Data por Jeff Blankenburg publicado el 31 de octubre del 2010

 

Hoy es el Día #31 y final de una serie llamada los 31 días de Windows Phone. ¿No les parece increíble que ya se terminó?

Ayer discutimos el tema de gestos del usuario y cómo capturarlos fácilmente. Hoy, en el último artículo de la serie vamos a cubrir gráficas tal como prometí hace un tiempo. Les voy a mostrar lo simple que es añadir gráficas circulares, de barras y otros tipos a nuestras aplicaciones.

 

Obtengan el juego de herramientas de Silverlight

Tal vez recuerden que en el día #21 hablé sobre el Juego de herramientas de Silverlight para Windows Phone. En ese artículo también mencioné que hay otro conjunto enorme de controles disponibles llamado el Juego de herramientas de Silverlight 3. Este otro juego de herramientas es el que necesitan descargar e instalar. Lo pueden conseguir en el Codeplex. No obstante, a menos que quieran sufrir un dolor de cabeza como el que yo tuve esta noche, lo que les recomiendo es descargar el ejemplo abajo y simplemente usar los ensamblajes incluidos. Aunque si instalan el juego de herramientas van a tener una amplia gama de controles adicionales disponibles. Nosotros vamos a ver sólo el PieSeries y el BarSeries.

 

Usando el control PieSeries

Asegúrense de añadir los ensamblajes System.Windows.Controls y System.Windows.Controls.DataVisualization.Toolkit al proyecto (de nuevo, les recomiendo usar los que vienen incluidos en el ejemplo para evitar confusiones).

También necesitamos agregar los espacios de nombres a nuestra página. En mi ejemplo voy a crea una página separada para cada tipo de gráfica, pero no es requerido. Añadan esta declaración al inicio del archivo XAML:

 

xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
    assembly=System.Windows.Controls.DataVisualization.Toolkit"

 

Ya con esto podemos insertar gráficas en la página. Incluyamos ahora una que incluya el control PieSeries:

 

<chart:Chart>
  <chart:PieSeries />
</chart:Chart>

 

Más simple no puede haber, y eso que no hemos hecho ABSOLUTAMENTE nada con él. En el ejemplo voy a enlazar la gráfica con datos en el código subyacente y hasta voy a cambiar un poco el aspecto de la gráfica circular.

Para enlazar datos al control hago lo mismo que en el día #25 donde obtuvimos datos de Twitter. Ta sólo hay que asignarlos a la propiedad ItemsSource del PieSeries. Este es el archivo completo de código subyacente para la gráfica circular, PieSeriesControl.xaml.cs:

 

using System.Windows.Controls.DataVisualization.Charting;
using Microsoft.Phone.Controls;

namespace Dia31_Graficacion
{
  public class VideoGameCharacter
  {
    public string Label { get; set; }
    public int Value { get; set; }

    public VideoGameCharacter(string label, int value)
    {
      Label = label;
      Value = value;
    }
  }

  public partial class GráficaCircular : PhoneApplicationPage
  {
    VideoGameCharacter[] pacman = new VideoGameCharacter[2]
                      {
                         new VideoGameCharacter("Parecida", 8),
                         new VideoGameCharacter("No parecida", 2)
                      };

    public GráficaCircular()
    {
      InitializeComponent();
      PieSeries pieSeries = PieChart.Series[0] as PieSeries;
      pieSeries.ItemsSource = pacman;
    }
  }
}

 

Como notarán, no hago referencia al control PieSeries directamente, sino a la serie cero de su contenedor, el control Chart. La verdad es que no estoy muy claro en cómo es que referirse al control PieSeries no funciona, mientras que este otro modo sí. No obstante, esa es la manera en que lo he visto implementado en todo lado por lo que voy a seguir ese modelo.

Adicionalmente necesitamos especificar el enlace en el XAML. En su forma más básica hay que especificar el DependentValueBinding y el IndependentValueBiding. Como seguro adivinarán, el DependentValueBinding contiene los valores graficados y el IndependentValueBinding contiene los valores que sirven de “etiquetas” en la gráfica.

 

<chart:Chart x:Name="PieChart">
	<chart:PieSeries
		IndependentValueBinding="{Binding Label}"
		DependentValueBinding="{Binding Value}"/>
</chart:Chart>

 

 

Gráfica circular. 

 

Si investigan el código de ejemplo verán cómo he cambiado la plantilla del PieSeries para girarlo de manera que la broma implícita en los datos sea más reconocible. Lo mejor del ejemplo de arriba es que todos los otros tipos de gráfica funcionan de manera casi idéntica. Veamos las similitudes con el control BarSeries.

 

Usando el control BarSeries

El control BarSeries se usa de forma casi igual, creando el control y enlazando los datos. Sin embargo, en este ejemplo quiero mostrar cómo asignar datos específicos a los ejes de la gráfica. Voy a crear el mismo contenedor de tipo Chart y agregarle un BarSeries. Este es el XAML resultante:

 

<chart:Chart x:Name="BarChart"
         Foreground="Gray"
         Title="Población de ciudades hacia el centro de EEUU">
  <chart:BarSeries Title="Población"
               IndependentValueBinding="{Binding Name}"
               DependentValueBinding="{Binding Population}" />
  <chart:Chart.Axes>
    <chart:CategoryAxis Title="Ciudad"
                        Orientation="Y"
                        FontStyle="Italic" />
    <chart:LinearAxis Title="Población"
                      Orientation="X"
                      Minimum="0"
                      Maximum="2500000"
                      Interval="500000"
                      ShowGridLines="True"
                      FontStyle="Italic" />
  </chart:Chart.Axes>
</chart:Chart>

 

Observen cómo puedo asignar a los ejes (CategoryAxis y LinearAxis) el título, orientación, y hasta valores mínimo y máximo si lo deseo. Esto nos da gran flexibilidad en controlar etiquetas que de otra forma serían generadas automáticamente.

Cito abajo el archivo completo BarSeriesControl.xaml.cs para que puedan ver que el enlace de datos funciona de manera idéntica (aunque usé datos diferentes):

 

using System.Collections.Generic;
using System.Windows.Controls.DataVisualization.Charting;
using Microsoft.Phone.Controls;

namespace Dia31_Graficacion
{
  public partial class GráficaDeBarras : PhoneApplicationPage
  {
    List<City> cities = new List<City>
        {
          new City { Name = "CLE", Population = 2250871 },
          new City { Name = "CMH", Population = 1773120 },
          new City { Name = "CVG", Population = 2155137 },
          new City { Name = "DET", Population = 4425110 }
        };

    public GráficaDeBarras()
    {
      InitializeComponent();

      BarSeries bs = BarChart.Series[0] as BarSeries;
      bs.ItemsSource = cities;
    }
  }
}

 

 Gráfica de barras.

 

¡Y eso es todo! Por supuesto, pueden ver el juego completo de herramientas en Codeplex. Construyan una simple aplicación de gráficas y muéstrenla a sus gerente, a ver si el Windows Phone no se convierte su tema favorito para hablar con otros ejecutivos. :) Se trata de satisfacer la necesidades de la empresa, ¿no es cierto?

 

Descargando el código

El código descargable contiene ejemplos para los controles PieSeries, BarSeries y ColumnSeries. Pueden usarlo en cualquiera se sus proyectos.

 

Jeff Blankenburg