Un grafico con visifire un pò più elaborato

Alberto — Sat, 09 Jan 2010 20:05:03 GMT

Oggi vi parlo di della realizzazione di un effetto alquanto carino fatto con visifire chart. L’idea è quella di mettere un pannello al lato del

grafico in modo da poter attivare/disattivare le verie serie grafiche.

Purtroppo il codice non funziona proprio correttamente a causa di alcuni bug presenti in visifire (è ancora una beta) però l’idea c’è.

Ovviamente siamo in un’ottica M-V-VM.

Nella figura vediamo il risultato che vogliamo ottenere.

Abbiamo quindi un grafico, e un pannello con una serie di checkbox ognuno dei quali identifica una serie.

La prima classe quindi che ho realizzato è la ChartBehavior ovvero l’estensione al grafico stesso.

        1: static class ChartBehavior

       2:     {

       3:  

       4: #region Line chart view

       5:         public static LineChartViewModel GetLineChartView(Visifire.Charts.Chart chart)

       6:         {

       7:             return (LineChartViewModel)chart.GetValue(LineChartViewProperty);

       8:         }

       9:         public static void SetLineChartView(Visifire.Charts.Chart chart, LineChartViewModel value)

        {

            chart.SetValue(LineChartViewProperty, value);

        }

  

        public static readonly DependencyProperty LineChartViewProperty =

            DependencyProperty.RegisterAttached(

            "LineChartView",

            typeof(LineChartViewModel),

            typeof(ChartBehavior),

            new UIPropertyMetadata(OnAutoSelectedChanged));

#endregion

  

        #region ListCategorie

        public static readonly DependencyProperty ListCategorieProperty =

            DependencyProperty.RegisterAttached(

            "ListCategorie",

            typeof(string),

            typeof(ChartBehavior),

            new UIPropertyMetadata(OnCategorieChanged));

        public static string GetListCategorie(Visifire.Charts.Chart chart)

        {

            return (string)chart.GetValue(ListCategorieProperty);

        }

        public static void SetListCategorie(Visifire.Charts.Chart chart,

            string value)

        {

            chart.SetValue(ListCategorieProperty, value);

        }

        static void OnCategorieChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

        {

            //Ottengo il sorgente

            Visifire.Charts.Chart source = (sender as Visifire.Charts.Chart);

            //Se nullo significa che la property non è attaccata al grafico

            if (source == null) return;

  

            if (source.Tag == null)

                source.Tag = new DataChart();

  

            DataChart dati = (DataChart)source.Tag;

            dati.Categorie = (string)e.NewValue;

  

            UpdateChart(source);

        }

        #endregion

  

        #region Panel CheckBox

        public static readonly DependencyProperty PanelCheckBoxProperty =

           DependencyProperty.RegisterAttached(

           "PanelCheckBox",

           typeof(FrameworkElement),

           typeof(ChartBehavior),

           new UIPropertyMetadata(OnPanelCheckBoxChanged));

  

        public static FrameworkElement GetPanelCheckBox(Visifire.Charts.Chart chart)

        {

            return (FrameworkElement)chart.GetValue(PanelCheckBoxProperty);

        }

        public static void SetPanelCheckBox(Visifire.Charts.Chart chart,

            FrameworkElement value)

        {

            chart.SetValue(PanelCheckBoxProperty, value);

        }

        static void OnPanelCheckBoxChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

        {

            Visifire.Charts.Chart source = (sender as Visifire.Charts.Chart);

            if (source == null) return;

  

            if (source.Tag == null)

                source.Tag = new DataChart();

  

            DataChart dati = (DataChart)source.Tag;

            dati.PanelCheckBox = (FrameworkElement)e.NewValue;

  

            UpdateChart(source);

        }

        #endregion

  

        static void UpdateChart(Visifire.Charts.Chart source)

        {

            if (source == null) return;

            if (source.Tag == null) return;

            

            DataChart dati = (DataChart)source.Tag;

            if (dati.View == null) return;

  

            System.Windows.Controls.Panel pnl = null;

            if (dati.PanelCheckBox != null )

            {

                pnl = (System.Windows.Controls.Panel)dati.PanelCheckBox;

                if (pnl !=null)

                    pnl.Children.Clear();

  

            }

  

            if (dati.Categorie != null)

            {

                LineChartViewModel lcvm = dati.View;

  

                lcvm.Categorie = dati.Categorie;

  

                foreach (Visifire.Charts.DataSeries ds in lcvm.ChartSeries)

                {

                    source.Series.Add(ds);

                    foreach (Visifire.Charts.DataPoint dp in ds.DataPoints)

                    {

                        dp.Chart = source;

                        dp.Bind();

                    }

                    if (pnl != null)

                    {

                        System.Windows.Controls.CheckBox cb = new System.Windows.Controls.CheckBox();

                        cb.Content = ds.LegendText;

                        ds.Tag = cb;

                        cb.Tag = ds;

                        cb.Checked += new RoutedEventHandler(cb_Checked);

                        cb.Unchecked += new RoutedEventHandler(cb_Unchecked);

                        cb.IsChecked = true;

                        pnl.Children.Add(cb);

                    }

                    

                }

            }

        }

  

  

        static void cb_Unchecked(object sender, RoutedEventArgs e)

        {

            System.Windows.Controls.CheckBox cb = (System.Windows.Controls.CheckBox)sender;

            Visifire.Charts.DataSeries ds = (Visifire.Charts.DataSeries)cb.Tag;

            ds.Visibility = Visibility.Collapsed;

  

        }

  

        static void cb_Checked(object sender, RoutedEventArgs e)

        {

            System.Windows.Controls.CheckBox cb = (System.Windows.Controls.CheckBox)sender;

            Visifire.Charts.DataSeries ds = (Visifire.Charts.DataSeries)cb.Tag;

            ds.Visibility = Visibility.Visible;

        }

  

        static void OnAutoSelectedChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

        {

            Visifire.Charts.Chart source = (sender as Visifire.Charts.Chart);

            if (source == null) return;

  

            if (source.Tag == null)

                source.Tag = new DataChart();

  

            DataChart dati = (DataChart)source.Tag;

            LineChartViewModel lcvm = (LineChartViewModel)e.NewValue;

            dati.View = lcvm;

  

            UpdateChart(source);

        }

  

       

  

        public class DataChart

        {

            public string Categorie

            {

                get;set;

            }

  

            public LineChartViewModel View

            {

                get;

                set;

            }

  

            public FrameworkElement PanelCheckBox

            {

                get;

                set;

            }

        }

    }

Il PanelCheckBoxProperty è il pannello dove il verranno messi i checkbox.

La routine UpdateChart invece si occupa di attivare/disattivare le varie serie sul grafico. In effetti il problema del codice sta proprio in questo punto, infatti attaccando/staccando le varie series il grafico non si aggiorna. L’unica soluzione è quella di ricreare la serie e di riaggiungere i vari datapoint. Attualmente questa ipotesi l’ho scartata, e attendo fiducioso la soluzione del problema.

La routine OnAutoSelectedChanged serve invece quando viene cambiato il viewmodel del grafico e qui entra in gioco la LineChartViewProperty. Questa proprietà infatti serve ad identificare il viewmodel corretto di visualizzazione del grafico. Infatti potremmo volerci attaccare differenti tipi di grafi, magari selezionati da un combobox (e in effetti questa era la mia esigenza iniziale).

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Text;

       5: using System.Collections;

       6: using Visifire.Charts;

       7:  

       8: using Repository;

       9: using Model;

using System.Reflection;

using System.ComponentModel;

  

namespace ViewModel

{

    public abstract class LineChartViewModel : ApplicationViewModel, INotifyPropertyChanged 

    {

        protected object objToChart;

  

        /// <summary>

        /// 

        /// </summary>

        /// <param name="elementToChart">ad esempio pilota</param>

        public LineChartViewModel(object elementToChart)

        {

            this.objToChart = elementToChart;

        }

  

        public string Categorie { get; set; }

  

        public string[] GetArrayOfCategorie()

        {

            return this.Categorie.Split(',');

        }

  

        public abstract DataSeries[] ChartSeries { get; }

  

        public abstract DataPoint[] GetDatas(string cat);

  

        public override abstract string ToString();

        

        public event PropertyChangedEventHandler PropertyChanged;

  

        public void NotifyPropertyChanged(String info)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(info));

            }

        }

    }

}

La classe LineChartViewModel è il gestore del grafico stesso. Come potete notare è una classe astratta. Notate la property Categorie, che dovrà essere definita a designtime con una stringa separata da virgola per indicare ogni categoria. Il nome sui checkbox sarà determinato appunto da questa stringa.

Andiamo a vedere quindi l’implementazione della classe LineChartViewModel :

       1: namespace ViewModel.Scuderia

       2: {

       3:     public class LineChartViewModelPilota : LineChartViewModel

       4:     {

       5:         public LineChartViewModelPilota():this(null)

       6:         {

       7:  

       8:         }

       9:         public LineChartViewModelPilota(Pilota obj) : base(obj)

        {

        }

  

        public override DataPoint[] GetDatas(string cat)

        {

            if (this.objToChart.GetType() == typeof(Pilota))

            {

                Pilota pil = (Pilota)this.objToChart;

                PilotaRepository pr = new PilotaRepository();

                var _ps = UnitOfWork.F1Organizer.Pilota.Where<Pilota>(p => p.DriverId == pil.DriverId);

  

                List<Pilota> lst = _ps.ToList<Pilota>();

  

                DataPoint[] values = new DataPoint[lst.Count];

  

                PropertyInfo pi = this.objToChart.GetType().GetProperty("Driver" + cat.Trim());

                for (int i = 0; i < values.Count(); i++)

                {

                    DataPoint dp = new DataPoint();

                    try

                    {

                        dp.YValue = Double.Parse((string)pi.GetValue(lst[i], null));

                        dp.XValue = lst[i].Fetchdate;

                    }

                    catch (Exception e)

                    {

                        dp.YValue = 0;

                    }

  

                    values[i] = dp;

                }

                return values;

            }

            else throw new ArgumentException("Attenzioe, l'elemento non è di tipo pilota");

        }

  

        public override string ToString()

        {

            return "LineChartViewModelPilota " + this.objToChart == null ? "null" : ((Pilota)this.objToChart).DriverName;

        }

  

        public override Visifire.Charts.DataSeries[] ChartSeries

        {

            get

            {

                string[] categorie = this.GetArrayOfCategorie();

  

                DataSeries[] series = new DataSeries[categorie.Length];

                for (int i = 0; i < categorie.Length; i++)

                {

                    string cat = categorie[i];

                    Visifire.Charts.DataSeries ds = new Visifire.Charts.DataSeries();

                    ds.LineStyle = LineStyles.Solid;

                    ds.RenderAs = RenderAs.Line;

                    ds.LabelText = cat;

                    ds.LegendText = cat;

  

                    foreach (DataPoint dp in this.GetDatas(cat))

                    {

  

                        ds.DataPoints.Add(dp);

                    }

                    series[i] = ds;

                }

                return series;

            }

        }

    }

}

Come potete notare da soli, la funzione GetDatas restituisce un’array di Datapoint, costruiti sfruttando la reflection.

Infatti nel model abbiamo, per quanto riguarda la classe Pilota, la property DriverExperience o DriverForm o DriverBraking. Ovviamente le categorie si dovranno chiamare Experience, Form o Braking.

Questo è comunque un codice d’esempio…

La funzione ChartSeries si occupa invece di ritornare la lista delle serie, determinati appunto dalla lista delle categorie.

Spero vi sia piaciuto l’esempio e l’idea anche se attualmente non completamente funzionante.

Codice.NET

PartialView vs RenderPartialView

E.F. Code First – le migrations

Aprire un childwindow in silverlight che riempia abbastanza il browser

Un grafico con visifire un pò più elaborato