Finance:FusionCharts

De Ensiwiki
Aller à : navigation, rechercher
FusionCharts

Développeurs Olivier Leroy, Pierre Thomas, Florent Thuault

Windows.png  Windows 

Introduction

FusionCharts est une application qui a pour objectif de tracer un graphique en Flash à partir d'un tableau de doubles. L'application est récupérable à l'adresse indiquée dans la rubrique téléchargement


Get started

Ouvrez Visual Studio et démarrez un nouveau projet Web ASP.net. Dans la boîte à outils (affichage -> boîte à outils ou ctrl + alt + x), faîtes un clic-droit puis cliquez sur "choisir les éléments de la boîte à outils".

Wikitoolbox.jpg Wikitoolbox2.jpg


Dans le menu parcourir, ajouter le fichier .dll que vous avez récupéré dans la partie téléchargement plus bas, puis validez. Si tout s'est bien passé, un nouveau bouton appélé "FusionCharts" apparaît dans la boîte à outils.

Wikitoolbox3.jpg

De plus, il faut ajouter le fichier FCF_MSLine.swf contenu dans la partie téléchargement plus bas, dans la racine de l'explorateur de solutions (clic droit, ajout, élément déjà existant)

Swf.png

Utilisation de FusionCharts

Pour lancer une application FusionCharts, il suffit d'effectuer un drag & drop de l'icône dans la partie design de "default.aspx", comme n'importe quel autre bouton de la boîte à outils. Une image s'affiche alors et un smarttag apparaît.

FusionChart6.jpg

Son utilisation sera développée ci-après. Pour créer un FusionChart, il faut alors remplir manuellement les différents champs de l'application dans la méthode "Page_Load" du fichier "default.aspx.cs". Il faut entrer un tableau de doubles où les colonnes représentent les différents actifs ou portefeuilles et les lignes les dates dans le champ DataSource, un tableau de String correspondant aux couleurs des courbes affichée (une courbe par actif) dans DataCouleurs, un tableau de noms contenant la légende à afficher dans DataNoms et une échelle dans DataPeriode. (Voir exemple de code ci-après) Pour afficher le graphique, il faut ensuite lancer le projet. Le graphique s'affichera alors dans votre navigateur internet par défaut.

Exemple de code

   public partial class _Default : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           // On récupère le tableau de données à afficher
           double[,] pfVals = GetDonneesAleatoires(3, 100);
           // On entre ensuite les données, l'ordre n'ayant pas d'importance
           FlashControl1.DataNoms = new string[] { "First set", "Second set", "3 ème jeu" };
           FlashControl1.DataCouleurs = new string[] { "0099FF", "FF8000", "FFFFFF" };
           FlashControl1.DataPeriode = 10;
           FlashControl1.DataSource = pfVals;                         
       }
       /// <summary>
       /// Obtient un tableau de données aléatoires pour afficher un exemple de courbes
       /// </summary>
       private double[,] GetDonneesAleatoires(int NombreActifs, int NombreDates)
       {
           int nbVals = NombreDates;
           int nbPfe = NombreActifs;
           double[,] pfVals = new double[nbVals, nbPfe];
           Random rndGen = new Random();
           double[] prevValue = new double[] { 100.0, 100.0, 100.0 };
           for (int i = 0; i < nbVals; i++)
           {
               for (int j = 0; j < nbPfe; j++)
               {
                   pfVals[i, j] = prevValue[j] + 10 * rndGen.Next(-5, 5);
                   prevValue[j] = pfVals[i, j];
               }
           }
           return pfVals;
       }
   }

Le Smart tag

Le Smart tag permet de modifier les noms et les couleurs des courbes. Par défaut, si l'utilisateur ne veut pas perdre de temps à modifier ces paramètres, des valeurs sont entrées par défaut. Pour changer ces paramètres, il faut entrer le nombre de courbes à tracer. Le Smart tag est actualisé automatiquement.

Smartdefaut.jpg Smartperiode12.jpg

Pour changer une couleur, il suffit de cliquer dans la champ : une palette de couleur est ouverte. On a alors le choix entre des couleurs prédéfinies et personnaliser ses couleurs.

Colopicker1.jpg
Colopicker2.jpg

Bugs et suggestions d'améliorations

  • Attention: Fusion Charts n'est pas compatible avec Internet Explorer. Pensez à lancer votre projet sous Firefox.
  • Attention: La valeur par défaut du paramètre "Factor" est 1. C'est pour cette raison que le graphe n'est pas visible si on ne modifie pas cet élément au moment de la création du graphe
  • Si l'utilisateur veut afficher plus de 5 courbes, il est obligé de rentrer les couleurs et les noms des courbes à la main : le Smart tag ne peut pas prendre en compte plus de 5 courbes.
  • Mis à part certaines couleur de base (rouge,bleu, vert, jaune, ...) lorsque l'on choisit une couleur, elle affiche sa valeur de la forme d'un triplet de nombres.
  • Dédoublement des courbes si on insère plusieurs FusionCharts dans la page. En effet, le code de la Dll est conçu pour inscrire des balises Script dans le code html. Si on insère deux contrôles, il y aura donc deux fois le même script qui va être appelé et donc il y aura 4 graphes au lieu de 2.



Au cours de ce projet, nous avons eu différentes idées que nous n'avons pas eu le temps de développer :

  • Permettre à l'utilisateur de rentrer autant de courbes qu'il veut grâce au Smart tag, mais déterminer une nombre maximum de couleurs qui bouclerait sur le nombre de courbes.
  • Résoudre le problème d'affichage du nom des couleurs.
  • Mettre des noms de paramètres plus cohérents.
  • Insérer la source de données dans le Smart tag. Dans l'idéal, l'utilisateur n'aurait aucune ligne de code à taper, l'insertion d'un tableau permettrait automatiquement de définir le nombre de couleurs à utiliser et le nombre de légendes à insérer.
  • Développer d'autre types de tracés de courbes.
  • Il est possible de choisir d'autres représentations des données en changeant un simple attribut dans la méthode d'affichage. Pour implémenter de façon robuste cette fonctionnalité, il faudrait auparavant vérifier que les données sont bien compatibles avec le mode d'affichage.
  • Améliorer la vue du Smart tag dans Visual Studio : Rendre l'icône du contrôleur dynamique (l'image change en fonction du type de graphe comme le contrôleur Chart).

Si vous trouvez des bugs ou avez d'autres idées, n'hésitez pas à modifier cette page.

Développeurs

Pour ceux qui voudraient compléter notre outil, il faut demander les sources à Mnacho Echenim.

Une documentation est automatiquement générée au format xml à la génération si on le demande (clic-droit dans l'explorateur de solutions sur le projet, propriétés, onglet générer).

Le projet est constitué de trois fichiers :

  • Le fichier FlashControl.cs qui gère le code de toutes les actions effectuées par le contrôle. C'est la classe qui contient tous les champs et les méthodes qui sont présentes dans le contrôle (Datasource,Datacouleurs,Dataperiode, Titre, NomX, NomY, Nombrecourbes).
  • Le fichier FlashDesigner.cs contient le code de toute l'IHM du contrôle. C'est ici qu'on pourrait générer l'affichage dynamique de l'icône.
  • Le fichier FlashDesignerActionList.cs contient la classe qui gère les actions effectuées grâce au smart tag. C'est dans cette partie qu'il faudrait résoudre le problème des couleurs (autrement qu'en augmentant le nombre de couleurs par défaut) et qu'on pourrait insérer directement le tableau de données.

Quelques liens utiles :

tuto pour la création d'un contrôle ASP.net

tuto pour la création d'un Smarttag

Téléchargement

Lien vers le contrôleur Flashcontrol

Lien vers FCF_MSLine.swf (clique droit -> Enregistrer sous)