En este ejemplo se muestra el uso de las amChart para Windows Phone 7, con un ejemplo básico de consumo de servicios web asíncronos y el uso del patrón MVVM.
Descargue las amCharts de http://www.amcharts.com/
Descripción del MVVM http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
1. Declarar el objeto en la interface gráfica usando XAML
<my:PieChart Grid.Row="1"
HorizontalAlignment="Left" Margin="12,16,0,0"
Name="pieChart2"
VerticalAlignment="Top"
Height="578"
Width="456"
DataSource="{Binding Data}"
TitleMemberPath="Title"
ValueMemberPath="Value" Foreground="Black" />
2. Declarar una clase para los valores de la gráfica
using System;
namespace BusinessEntities
{
public class ChartData
{
public string SerieID { get; set; }
public string Title { get; set; }
public double X { get; set; }
public double Y { get; set; }
public double Value { get; set; }
}
}
3. Generar una colección observable en el View Model (o página de la gráfica), se recomienda mejor dejar esto en una capa inferior como la de BusinessLogic, para poder reutilizar el consumo de datos en otras graficas o presentaciones.
using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
using BusinessEntities;
namespace BusinessLogic.ViewModels
{
public class ChartsViewModel : INotifyPropertyChanged
{
#region Properties
private bool _isDataLoaded;
public bool IsDataLoaded
{
get
{
return _isDataLoaded;
}
set
{
_isDataLoaded = value;
NotifyPropertyChanged("IsDataLoaded");
}
}
private ObservableCollection<ChartData> _data;
public ObservableCollection<ChartData> Data { get { return _data; } }
#endregion
#region Notifications
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion
…
}
4. Llenado de la colección, este puede ser desde una consulta a una BD o un consumo de un servicio web o algún otro mecanismo, para el acceso a datos.
using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
using BusinessEntities;
namespace BusinessLogic.ViewModels
{
public class ChartsViewModel : INotifyPropertyChanged
{
…
#region Methods
/// <summary>
///
/// </summary>
/// <param name="location"></param>
/// <param name="indicatorID"></param>
/// <param name="startperiod"></param>
/// <param name="endperiod"></param>
public void LoadPieChartData(string location, int indicatorID,int startperiod,int endperiod) {
try
{
BusinessLogic.IndicatorService.IndicatorValuesLoaded += new EventHandler<BusinessLogic.EventArgs.IndicatorValueEventArgs>(IndicatorService_IndicatorValuesLoaded);
BusinessLogic.IndicatorService.GetIndicatorValues(location, indicatorID,startperiod,endperiod);
}
catch (Exception ex)
{
}
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void IndicatorService_IndicatorValuesLoaded(object sender, BusinessLogic.EventArgs.IndicatorValueEventArgs e)
{
if (e.IndicatorValues != null && e.IndicatorValues.Count > 0)
{
_data = new ObservableCollection<ChartData>();
foreach (BusinessLogic.Indicators.IndicatorValue val in e.IndicatorValues)
{
_data.Add(new ChartData() { Title = val.Indicator, Value = val.Value });
}
this.IsDataLoaded = true;
}
}
#endregion
…
}
}
5. Enlazar la colección a la gráfica en la pagina
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;
using System.IO.IsolatedStorage;
using System.Text;
using System.Xml;
using System.Xml.Linq;
using BusinessEntities;
namespace Phone7Sample
{
public partial class ChartViewerPage : PhoneApplicationPage
{
private BusinessLogic.ViewModels.ChartsViewModel viewModel;
public ChartViewerPage()
{
InitializeComponent();
viewModel = new BusinessLogic.ViewModels.ChartsViewModel();
viewModel.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(viewModel_PropertyChanged);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
Dictionary<string, string> parameters = F.Phone.IO.PageParameters.GetParameters("chartviewer");
int startperiod = Convert.ToInt32(parameters["startmonth"]),
endperiod = Convert.ToInt32(parameters["endmonth"]);
PageTitle.Text = parameters["indicator"] + " (" + parameters["locationName"] + ")";
viewModel.LoadPieChartData ( parameters["location"], Convert.ToInt32(parameters["indicatorID"]), startperiod, endperiod);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void viewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == "IsDataLoaded") {
this.pieChart2.DataSource = viewModel.Data;
}
}
}
}
