OUTILS - Représentation graphique de données Notes

L'une des principales demande de mes utilisateurs est la mise à disposition de graphiques à partir des données contenues dans une base Lotus Notes.

Il existe aujourd'hui de multiples méthodes permettant de faire celà à 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 je trouve qu'aucune de ces solutions ne répondent à 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 graphique avec de multiples graphiques de toute sorte que je trouve agréable. Ces graphiques sont générés grace à du Adobe Flash. Après de multiples recherches je pense avoir enfin trouvé LE 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 graphiques sont aramétrables à travers le fichier XML et le rendu est non seulement très propre mais en plus rapide.


Comment intégrer 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 mon exemple je 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>

Ma 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 contenucomme du code HTML" depuis l'avent dernier onglet des propriétés de la vue.


Etape 3 : Le masque de vue
C'est dans le masque associé à la vue que nous allons pouvoir définir toutes les options de représentation du graphique. Pour connaitre toutes ces options je ne peux que recommander de consulter l'aide très complète disponible sur le site. Je ne donnerai ici qu'une configuration mimale pour afficher un graphique.

1. Création d'un masque nommé : $$ViewTemplate for nom_de_ma_vue_précédemment_créée


2. Indiquer : <chart>


3. Ajouter : <chart_type>type de graphique souhaité</CHART_TYPE>


4. Ajouter comme vue intégrée votre vue précédemment créée


5. Ajouter à la fin : </chart>


6. 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>

Conclusions
Vous pouvez voir un exemple en ligne ainsi que télécharger une base Notes contenant un exemple un peu plus complet (Pour Lotus Notes 7+ pour le moment)

Il est aussi à noter que le site offre deux autres packages qui semblent interressants ou du moins amusants :

• XML/SWF Gauge : pour créer des compteur graphiques


• XML/SWF Slideshow : pour créer des animations réactives

Je n'ai pas encore eut le temps de tester ces deux applications.