La representación de datos de una forma atractiva a la par que funcional, es uno de las metas que Microsoft viene logrando en los últimos años. Además de las conocidas formas de creación de graficas del paquete ofimático de Office, ofreciéndonos un plus en cuanto a interfaz se refiere en su última versión. Ahora Microsoft nos ofrece la posibilidad de crear diversas gráficas en Silverlight 3.
Para empezar debemos de descargar el Silverlight 3 Toolkit, para más tarde crear una nueva aplicación Silverlight 3. La interfaz de usuario la elaboraremos a través de Page.xaml introduciendo en siguiente código:
<UserControl
xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
xmlns:chartingToolkit=»clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit» xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
x:Class=»piechart.MainPage»
Width=»640″ Height=»480″ mc:Ignorable=»d»>
<Grid x:Name=»LayoutRoot» Background=»White»>
<Grid.RowDefinitions>
<RowDefinition Height=»50″ />
<RowDefinition Height=»*» />
</Grid.RowDefinitions>
<TextBlock Text=»Cursos Microsoft»
Margin=»20,10,0,0″
Grid.Row=»0″
FontFamily=»Georgia»
FontSize=»18″
Foreground=»Blue» />
<chartingToolkit:Chart x:Name=»ActivityChart»
Margin=»20″
Grid.Row=»1″>
<chartingToolkit:Chart.Series>
<chartingToolkit:PieSeries Title=»Primer Trimestre»
IndependentValueBinding=»{Binding Name}»
DependentValueBinding=»{Binding Value}» />
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
</Grid>
</UserControl>
Como podemos observar, he incluido un control para crear gráficos sectoriales, dentro del cual hay una serie que tiene dos propiedades una independiente y otra dependiente de los valores que se mostrarán en los diferentes sectores.
Seguidamente crearemos una nueva clase que la llamaremos Cursos en la que debemos tener en cuenta tres propiedades Name que es utilizada en el valor independiente, Value que es usada en el valor dependiente y Activities que devuelve la lista de Objetos de la clase Cursos.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
namespace piechart
{
public class cursos
{
public string Name { get; set; }
public double Value { get; set; }
// Lista de objetos de cursos
public static List<cursos> Activities
{
get
{
// se crear la lista de 5 elementos
// cada valor del elemento es un número aleatorio entre o y 1 que la suma de los 5 elementos suman 1
var percentages = FillPercentages(5);
var activitiesList = new List<cursos>()
{
new cursos() {Name = «WPF», Value = percentages[0]},
new cursos() {Name = «Silverlight 3», Value = percentages[1]},
new cursos() {Name = «SharePoint», Value = percentages[2]},
new cursos() {Name = «Windows 7», Value = percentages[3]},
new cursos() {Name = «Windows Server 2008 R2», Value = percentages[4]}
};
return activitiesList;
// devuelve la lista de objetos con sus correspondientes valores
}
}
private static List<Double> FillPercentages(int numDoubles)
{
var pctgs = new List< Double >();
var r = new Random();
double total = 0.0;
for (int i = 0; i < numDoubles-1;)
{
double val = r.NextDouble();
if ( val + total < 1.0)
{
pctgs.Add(val);
++i;
}
}
pctgs.Add( 1.0 – total ); // valor final
return pctgs;
}
}
}
Seguidamente nos situaremos en el código behind de nuestro proyecto MainPage.xaml.cs, donde debemos unir la propiedad ItemSource de nuestro objeto grafico «PieChart» con la propiedad Activities de la clase cursos. De este modo se sincronizarán los datos introducidos en la lista, con los sectores que nos mostrará la aplicación en pantalla.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Threading;
namespace piechart
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
Animate();
}
private void Animate()
{
var timer = new DispatcherTimer();
timer.Start(); // temporizador que llamará cada 4 segundos a el método FillPie
// cambiará los correspondientes valores
timer.Tick +=
( ( s, args ) => FillPie() );
timer.Interval = new TimeSpan( 0, 0, 4 ); //intervalo de 4 segundos
timer.Start();
}
private void FillPie()
{
var cs = ActivityChart.Series[0] as PieSeries;
if ( cs != null )
{
// genera los datos y los incluye en la propiedad del objeto
// utilizado para crear la gráfica sectorial
cs.ItemsSource = cursos.Activities;
}
else
{
throw new InvalidCastException( «Expected Series[0] to be a column» );
}
}
}
}
La introducción de este último código será la llave para que nuestra aplicación represente una gráfica sectorial, que cambia durante un periodo de tiempo, siendo que la lectura y compresión de los datos que queremos mostrar se haga de una forma sencilla y ágil