La représentation graphique de données Notes

Il existe aujourd'hui de multiples méthodes permettant la mise à disposition de graphiques à partir des données contenues dans une base Lotus Notes à travers une applet ou une servlet Java, de feuilles de style CSS, en utilisant des API ou tout simplement en exportant les données vers un tableur comme OpenOffice Calc ou Microsoft Excel (voire Lotus 123 pour les nostalgique). Cependant, ces méthodes ne répondent pas à tous les besoins, à savoir : simplicité, rapidité, maintenabilité, personnalisation.

L'interface de Google Analytics (outil de suivi de statistique d'accès Web) présente une interface avec des graphiques de toute sorte. Ces graphiques sont générés grace à du Adobe Flash.

Mais il existe un bon package Flash gratuit de gestion des graphiques : XML/SWF Chart. Le graphique est généré à partir de données fournies au format XML et les possibilités de personnalisation sont infinies. 20 type de graphiques sont disponibles, du simple graphique à barre aux graphiques mixtes en passant par les camemberts 3D. L'ensemble des éléments du graphique sont paramétrables à travers le fichier XML et le rendu est non seulement très propre mais en plus rapide.

On va voir comment intégrer cet outil XML/SWF Chart dans une application Lotus Domino.

Etape 1 : Intégration du package

Le package comprend plusieurs fichiers SWF.

» Télécharger le package sur le site Web
» Décompresser le package
» Ajouter les fichiers dans les ressources de votre base Notes.
» Faire attention de reproduire l'arborescence des fichiers en intégrant le nom du répertoire (exemple, depuis les ressources Notes, renommer arno.swf en charts_library/arno.swf)

Etape 2 : Préparation de la vue pour afficher les données à représenter

Dans un exemple on considère que les données peuvent être représentées à travers une vue Notes. On pourra aussi se baser sur des champs calculés si la méthode décrite ne peut répondre aux besoins. Les données doivent être présentées sous le format XML suivant :

<row>
  <string>Intitulé de ma colonne</string>
    <number>Valeur 1<number>
    ...
    <number>Valeur n<number>
</row>

	graphique XML/SWF chart

La vue pourra donc avoir la forme suivante :

» 1ère colonne - Intitulé : <row>, Valeur : "<row>"
» 2nde colonne - Intitulé : <null/>, Valeur : "<string>" + champ_titre + "</string>"
» 3ème colonne - Intilué : <string>Titre Valeur 1</string>, Valeur : "<number>" + @text(champ_valeur1) + "</number>"

» Dernière colonne - Intitulé : </row>, Valeur : "</row>"

Les données de la vue ne doivent pas être interprétées par le moteur Domino. Il faut donc absolument cocher l'option "Traiter contenu comme du code HTML" depuis l'avant dernier onglet des propriétés de la vue.

Etape 3 : Le masque de vue

C'est dans le masque associé à la vue qu'il est possible de définir toutes les options de représentation du graphique. Pour connaître toutes ces options il est recommandé de consulter l'aide très complète disponible sur le site. Seule une configuration minimale pour afficher un graphique est présentée ici.

» Création d'un masque nommé : $$ViewTemplate for nom_de_ma_vue_précédemment_créée
» Indiquer : <chart>
» Ajouter : <chart_type>type de graphique souhaité</CHART_TYPE>
» Ajouter comme vue intégrée votre vue précédemment créée
» Ajouter à la fin : </chart>

» Depuis le second onglet des propriétés du masque, indiquer Accès Web\Type de contenu\Autre : text/xml

Etape 4 : Intégration du graphique dans une page Web

Pour ajouter le graphique dans une page, indiquez le code suivant :

<OBJECT 
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave
    /cabs/flash/swflash.cab#version=6,0,0,0" 
  WIDTH="400" 
  HEIGHT="270" 
  id="charts" 
  ALIGN="">
<PARAM 
  NAME=movie 
  VALUE="charts.swf?openfileresource&
    library_path=charts_library&xml_source=nom_de_ma_vue">
<PARAM
  NAME=quality 
  VALUE=high>
<PARAM NAME=bgcolor VALUE=#eeeeee>
<EMBED 
  src="charts.swf?openfileresource&
    library_path=charts_library&
    xml_source=nom_de_ma_vue?openview"
  quality=high       
  bgcolor=#eeeeee       
  WIDTH="400"       
  HEIGHT="270"       
  NAME="charts"       
  ALIGN=""       
  swLiveConnect="true"       
  TYPE="application/x-shockwave-flash"       
  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>