Développement d’objets graphiques avec le mode web

Des graphiques simples

Le nœud racine des graphiques

Le nœud racine est le nœud config.

Il contient des informations propres au xml, principalement le chemin vers le schéma des graphiques, nommé egxChartConfiguration.xsd.

Nota : ce nœud ne sera pas repris dans les exemples suivants.

<config xmlns= "http://www.ACE.fr/technicalframework/chart" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http:/ /www.ACE.fr/technicalframework/chart

D:\developpements\eclipseWorkspace\workspace\SocleCourant\doc\config\egxChartConfiguration.xsd" >

</config>

Le nœud chart est obligatoire. Deux attributs sont indispensables, il s'agit des dimensions du graphique.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
height	xs:positiveInteger	required	Hauteur de l'image du graphique en pixels.
width	xs:positiveInteger	required	Largeur de l'image du graphique en pixels.

Exemple de configuration:

</chart>

Avant de renseigner l'apparence d'un graphique, il est primordial d'en déterminer le type. Pour cela, il faut faire la distinction entre le rendu visuel attendu (affichage de ligne, de trait, de zone...) et la représentation des données.

Dans cette version, il existe deux types de graphiques :

Type de graphique	Description
PIE	Graphique de type camembert avec uniquement une seule série de valeurs.
CATEGORY	Graphique en barre ou en ligne avec des points discontinus sur l'axe secondaire. La plupart du temps, les séries sont composées de données de type différents (comparatif du chiffre d’affaires par famille de produits par exemple).

Graphique PIE (camembert)

Présentation

Exemple obtenu en utilisant le moteur graphique JfreeChart.

Vue graphique partielle du schéma concernant le graphique pie :

pie

Sont associés à ce nœud les attributs définissant les caractéristiques générales d'un graphique de type camembert.

sectionDefault

Ce nœud définit les caractéristiques des différentes portions du camembert.

sectionDetail

Surcharge sectionDefault section par section.

Un graphique simple

Seuls les nœuds pie et sectionDefaut sont obligatoires.

Il n'y a pas d'attribut obligatoire sur pie.

sectionDefaut doit indiquer au minimum les valeurs à afficher, cela grâce à une requête xPath.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
valueXpath	chart:XPath	required	Requête XPath dans le flux de présentation pour déterminer la valeur de chaque section du camembert.

Remarque importante :

La requête xPath associé à l'attribut valueXpath doit sélectionner des nœuds de type <business_data>.

La requête doit avoir le format suivant :

//chemin_dans_le_flux_de_presentation/business_data

Exemple de requête

//VueUtilisateurCourantSociete/JUt_UtiView/JUt_UtiViewRow/VueTbl/DTbl/DTblRow[1]/VueEvenement/JEveView[1]/JEveViewRow[1]/Datmod/business_data

Exemple de configuration et résultat

<pie>

<sectionDefault valueXpa th="//VueUtilisateurCourantSociete/JUt_UtiView/JUt_UtiViewRow/VueTbl/DTbl

/DTblRow[1]/VueEvenement/JEveView[1]/JEveViewRow[1]/Datmod/business_data" >

</sectionDefault>

</pie>

</chart>

Ce fichier minimaliste est suffisant pour obtenir le résultat suivant :

Particularité de l'attribut paintList

L'attribut paintList du nœud pie est une liste de couleurs dans laquelle on puisera pour afficher les différentes sections. Si elle contient moins d'éléments que le nombre de sections, on rebouclera sur la première valeur.

Ex : Couleurs d'un camembert divisé en 5 sections avec une liste contenant 3 couleurs (red, blue, green)

Section	Couleur
1	red
2	Blue
3	Green
4	Red
5	blue

Graphique CATEGORY

Présentation

Exemple obtenu en utilisant le moteur graphique JfreeChart.

Vue graphique partielle représentant le schéma de configuration concernant le graphique category :

category

Sont associés à ce nœud les attributs définissant les caractéristiques générales d'un graphique représentant l'évolution de séries de type catégorie.

dataset

Nœud représentant la feuille de valeurs.

categorySet et categoryNamed

Nœuds décrivant les catégories

serie

Nœud décrivant les séries de valeurs

categoryAxis et valueAxis

Permet de modifier l'apparence des axes.

Un graphique simple

Un graphique de type category est nativement plus complexe qu'un graphique pie car il représente plus de données. Des "series" de données sont regroupées en "catégories".

Les nœuds category et dataset sont obligatoires.

Il n'y a pas d'attribut obligatoire sur aucun des nœuds.

Exemple de configuration:

</dataset>

</category>

</chart>

Ensuite viennent les nœuds qui alimentent les category et les serie.

Choix d'alimentation des données

Il y a un choix à faire en fonction de la méthode d'alimentation des données.

Les category

On choisira le nœud categorySet si les noms des category sont donnés en une requête xPath. Dans ce cas, il y a une requête xPath donc un nœud categorySet.
On choisira le nœud categoryNamed si chaque nom de category est donné en dur dans la configuration. Dans ce cas, il y a autant de nœuds categoryNamed que de category.

Le nœud categorySet contient un attribut obligatoire :

categorySet

Définition des catégories par une requête xPath.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
nameXpath	chart:XPath	required	Requête XPath sur le flux de présentation spécifiant la liste des catégories à afficher sur le graphique.

Le nœud categoryNamed contient un attribut obligatoire :

categoryNamed

Définition d'une catégorie.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
nameValue	xs:string	required	Nom de la catégorie. Valeur en "dur".

Les series

Le fonctionnement est similaire à celui des category.

Un nœud serie est obligatoire. Il contient des attributs communs optionnels aux nœuds fils.

On choisira le nœud serieSet si les noms et les valeurs des séries sont donnés en une requête xPath.. Il y a une requête xPath pour les noms et une requête xPath pour les valeurs. Il y a un nœud serieSet à définir.
On choisira le nœud serieNamed si chaque valeur est donnée par une requête xPath. Dans ce cas, le nom de la série est spécifié directement dans la configuration. Il y a autant de nœuds serieNamed que de valeurs de séries pour l'ensemble des category. Par exemple, s'il y a 3 category et que l'on veut afficher 2 serie par category, il faut 6 nœuds serieNamed.

Le nœud serieSet contient deux attributs obligatoires :

serieSet

Définition des séries par une requête xPath pour les valeurs et une requête xPath pour les noms.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
nameXpath	chart:XPath	required	Requête XPath sur le flux de présentation spécifiant la liste des noms des séries du graphique.
valueXpath	chart:XPath	required	Requête XPath sur le flux de présentation spécifiant la liste des valeurs des séries du graphique.

Le nœud serieNamed contient deux attributs obligatoires :

serieNamed

Définition d'une série.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
nameValue	chart:StringValueNotEmpty	required	Nom "en dur" de la série du graphique.
valueXpath	chart:XPath	required	requête xPath définissant la valeur de la série.

Remarque importante :

Tout comme pour le graphique pie, les requêtes xPath associées aux attributs valueXpath et nameXpath doivent sélectionner des nœuds de type <business_data>.

La requête doit avoir le format suivant :

//chemin_dans_le_flux_de_presentation/business_data

Exemple de requête

//VueUtilisateurCourantSociete/JUt_UtiView/JUt_UtiViewRow/VueTbl/DTbl/DTblRow[1]/VueEvenement/JEveView[1]/JEveViewRow[1]/Datmod/business_data

La configuration

</categorySet>

<serie>

</serieSet>

< /serie>

</dataset>

</category>

</chart>

Le résultat

Ce fichier minimaliste est suffisant pour obtenir le résultat suivant :

Personnaliser l'apparence du graphique

Les exemples ci dessus montre un résultat brut. L'outil génère les graphiques avec des valeurs par défaut pour les couleurs, les polices, les libellés, etc.…

Le fichier de configuration permet de modifier dans une large part ces valeurs par défaut.

La modification de ces valeurs commence par la définition d'éléments de bases représentant une couleur, une police, etc.…

Ces éléments sont sous le nœud config et utilisés par les graphiques via un nom.

Eléments de base

Ce paragraphe donne la liste des éléments de bases disponibles dans la version 500ES2. C'est une liste assez fastidieuse mais ces éléments sont indispensables pour pourvoir paramétrer l'apparence des graphiques. En effets, les graphiques font référence à ces éléments de base. Ils ne peuvent pas être définis directement dans le graphique.

Font (Police de caractère)

Description des attributs disponibles

Définition d'une police de caractères.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Libellé identifiant une police de caractère et son style dans les éléments du graphique.
Font	chart:StringValueNotEmpty	required	Référence à un élément "font".Nom de la police de caractères.
Style	chart:FontStyle	required	Style appliqué sur la police (italique, gras…).
size	xs:positiveInteger	required	Taille souhaitée de la police.

Exemple de configuration

<font_def>

<font_type name= "maFonteTitre" font= "Helvetica" style= "BOLD" size= "18" />

<font_type name= "maFonte" font= "Verdana" style= "PLAIN" size= "12" />

</font_def>

Paint (Couleur de base)

Une couleur peut être définie de trois façons distinctes :

Une couleur de base faisant partie de la liste disponible,
Une couleur simple définie par ses constantes RGB,
Un dégradé entre deux couleurs.

Le nœud paint_def est composé d'autant de paint_type qu'il y a de couleurs à définir.

Le nœud paint_type est de type Paint.

Le noeud paint

Le nœud Paint contient soit un nœud Color, soit un nœud gradientPaint.

Paint

Définition d'une couleur complexe.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Référence à un objet "paint" (Libellé identifiant une couleur).

ELEMENT	SIGNIFICATION
color	Type de base : ColorCouleur de base.

ELEMENT	SIGNIFICATION
gradientPaint	Super classe : GradientPaintDégradé.

Le nœud color

Le nœud Color contient soit une couleur de base, soit la définition RGB de la couleur. Si les deux sont renseignés, la couleur de base est prioritaire.

Color

Définition d'une couleur de base.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
basic	chart:ColorType	optional	Si renseigné, pas de détermination par les constantes RGB : on spécifie à la place un nom de couleur de base (red, blue, green…).

ELEMENT

SIGNIFICATION

RGB

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
r	chart:composanteColor	required	Composante "rouge" de la couleur.
G	chart:composanteColor	required	Composante "verte" de la couleur.
B	chart:composanteColor	required	Composante "bleue" de la couleur.

Couleurs de base.

ENUMERATION

WHITE

LIGHT_GRAY

GRAY

DARK_GRAY

BLACK

RED

PINK

ORANGE

YELLOW

GREEN

MAGENTA

CYAN

BLUE

Le nœud GradientPaint

Le nœud GradientPaint définie un dégradé entre deux couleurs. Les deux couleurs définissent les points de départ et d'arrivée du dégradé.

GradientPaint

Définition d'un dégradé de couleur.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
cyclic	xs:boolean	optional	Activer ou non la rotation cyclique pour le degrade. Valeur par defaut : NON.

ELEMENT	SIGNIFICATION
beginPoint	Type de base : GradientPaintPointDéfinition du point de départ du dégradé.

ELEMENT	SIGNIFICATION
endPoint	Type de base : GradientPaintPointDéfinition du point d'arrivé du dégradé.

Un "point" est défini par des coordonnées et une couleur. Un élément peut utiliser un autre élément. Les gradientPaintPoint en sont une illustration. Ils utilisent un pointeur vers un élément paint.

GradientPaintPoint

Element de définition d'un dégradé de couleur. Définition d'un point (départ ou arrivée)

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
x	xs:nonNegativeInteger	required	Abscisse d'un point (depart ou arrivee) du degrade associe a la couleur.
Y	xs:nonNegativeInteger	required	Ordonnee d'un point (depart ou arrivee) du degrade associe a la couleur.
Paint	chart:StringValueNotEmpty	required	Reference a un element "paint". Une des couleurs definissant le degrade.

Exemple de configuration

<paint_def>

<paint_type name= "Jaune" >

</paint_type>

<paint_type name= "maCouleur" >

<color>

</color>

</paint_type>

<paint_type name= "monDegrade" >

</gradientPaint>

</paint_type>

</paint_def>

Paint_list (liste de couleurs)

Ce critère définit une liste de couleurs.

Il est utilisé pour définir les couleurs à utiliser pour les zones représentant les valeurs.

Liste des attributs disponibles

PaintList

Définition d'une liste de couleurs. Affecté de manière cyclique sur un graphique.

ELEMENT	SIGNIFICATION
paintRef	Type de base : StringValueNotEmptyLibellé identifiant une série de couleurs utilisée pour afficher des séries ou des sections du graphique.

Exemple de configuration

<paint_list_def>

<paint_list_type name= "maListeCouleur" >

<paintRef> YELLOW </paintRef>

<paintRef> maCouleur </paintRef>

<paintRef> monDegrade </paintRef>

</paint_list_type>

</paint_list_def>

Background (fond d'une zone)

Ce critère définit les caractéristiques d'un fond.

Liste des attributs disponibles

Caractéristiques d'un fond.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Libellé identifiant les caractéristiques du fond d'un élément.
backPaint	chart:StringValueNotEmpty	optional	Pointeur sur un element paint ou couleur de base. Couleur de remplissage de la zone. Valeur par défaut : Blanc.
borderPaint	chart:StringValueNotEmpty	optional	Pointeur sur un element paint ou couleur de base. Couleur de remplissage du bord de la zone.

Exemple de configuration :

<background_def>

<background_type name= "monFond" backPaint= "monDegrade" />

<background_type name= "monFond2" backPaint= "maCouleur" />

</background_def>

Item_label et title_appearance (libellés des ensembles de valeurs et titre)

Ce critère définit les caractéristiques d'affichage d'un libellé ou d'un titre. Depuis l’édition spécial 5.0-00 ES2, ces deux types d'éléments de base possèdent les mêmes caractéristiques.

Liste des attributs disponibles

Caractéristique d'affichage d'un libellé ou d'un titre.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Libellé identifiant un label du graphique et son apparence.
Font	chart:StringValueNotEmpty	optional	Référence à un élément "font" définissant la police d'affichage.
Paint	chart:StringValueNotEmpty	optional	Référence à un élement "paint" ou à une couleur de base. Couleur du texte affiché.

Exemple de configuration :

<item_label_def>

<item_label_type name= "monItemLabel" font= "maFonte" paint= "Noir" />

</item_label_def>

<title_appearance_def>

<title_appearance_type name= "Design titre" font= "maFonteTitre" paint= "Jaune" />

</title_appearance_def>

Legend

Ce critère permet de définir l'apparence de la légende du graphique.

L'élément légende utilise plusieurs pointeurs vers d'autres éléments de base comme un background, une fonte, etc.

Liste des attributs disponibles

Caractéristiques d'une légende.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Identifiant de la légende.
Background	chart:StringValueNotEmpty	optional	Référence à un élément "background" définissant le fond de la légende. Valeur par défaut : zone blanche encadrée de noir.
itemFont	chart:StringValueNotEmpty	optional	Référence à un élément "font" indiquant la police utilisée pour afficher le nom des séries. Valeur par défaut : Sans Serif / Noir.
itemPaint	chart:StringValueNotEmpty	optional	Référence à un élement "paint" ou à une couleur de base. Couleur utilisée pour afficher le nom des séries.
titleValue	xs:string	optional	Libellé du titre de la légende (valeur "en dur").
titleAppearance	chart:StringValueNotEmpty	optional	Référence à un objet "titleAppearance" définissant le style à appliquer au titre de la légende.

Exemple de configuration :

<legend_def>

<legend_type name= "maLegend" background= "monFond" />

</legend_def>

Pie_section_label

Cet élément de base ne concerne que les graphiques de type PIE. Il permet de définir l'apparence du libellé des portions du graphique PIE. En plus des traditionnelles polices et couleurs, il permet surtout de définir le type de contenu du libellé. Ce type est à choisir parmi une liste prédéfinie.

Liste des attributs disponibles

Définition de l'apparence des libellés des sections du graphique pie.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Libellé identifiant le formatage d'un label d'une section d'un graphique de type camembert.
type	chart:PieLabelType	optional	Type de formatage du libellé : affichage ou non du label d'une section, de sa valeur, du pourcentage qu'elle représente...
font	chart:StringValueNotEmpty	optional	Référence à un élément "font". Police utilisée pour afficher le label. Valeur par défaut : Sans Serif
paint	chart:StringValueNotEmpty	optional	Référence à un élement "paint" ou à une couleur de base. Couleur utilisée pour afficher le texte. Valeur par défaut : Noir.

Liste des types disponibles pour l'apparence du libellé des sections du graphique pie.

Liste de valeurs. Formats possibles des labels du graphique pie.

ENUMERATION

NO_LABELS

NAME_LABELS

VALUE_LABELS

PERCENT_LABELS

NAME_AND_VALUE_LABELS

NAME_AND_PERCENT_LABELS

VALUE_AND_PERCENT_LABELS

Exemple de configuration

<pie_section_label_def>

<pie_section_label_type name= "apparencelabel" font= "maFonte" type= "VALUE_AND_PERCENT_LABELS" />

</pie_section_label_def>

Graphique Pie

Comment améliorer la présentation et utiliser ces éléments de base dans un graphique de type PIE ?

Reprenons la configuration de base de notre camembert. Pour ne pas surcharger l'écriture, les requêtes xPath sont écrites sous la forme "ma_requete" :

<pie>

</sectionDefault>

</pie>

</chart>

Ajout d'une légende et d'un fond

Exemple de configuration et résultat

<pie>

</sectionDefault>

</pie>

</chart>

Cette configuration utilise les éléments de base maLegend et monFond2 vues dans les exemples précédents.

Modification des libellés des sections

Les libellés des sections ne sont pas parlants. Une requête xPath permet de les définir à partir du flux de présentation :

Exemple de configuration et résultat

<pie>

</sectionDefault>

</pie>

</chart>

Modification de la position des libellés

Les libellés sont nettement plus parlants, mais il y a un souci au niveau de leur positionnement autour du camembert. Deux solutions vous sont offertes :

agrandir la taille de l'image : il suffit de modifier les attributs concernés du nœud chart.
ajouter des offsets d'affichage : permet de positionner au pixel près les libellés des sections.

Le nœud sectionDetail

Pour modifier les offsets, il faut renseigner le nœud sectionDetail.

Un nœud pie/sectionDetail/label/offset est disponible.

La branche sectionDetail est compatible avec la branche sectionDefault. Elle vient la surcharger. Autrement dit, elle est prioritaire.

Les paramètres obligatoires de ces nœuds :

sectionDetail

Caractéristiques d'une section précise. Supplantent celles du "sectionDefault".

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
indice	xs:positiveInteger	required	Indice identifiant la section surchargée (xème élément retourné par les requêtes XPath).

ELEMENT

SIGNIFICATION

label

ELEMENT

SIGNIFICATION

offset

Définition d'un offset de position du libellé. S'ajoute à la position calculée automatiquement. Permet d'ajuster la position du libellé pour éviter les superpositions de libellé par exemple.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
x	xs:int	required	offset y. En pixel.
y	xs:int	required	offset y. en pixels.

La section d'indice 1 est celle qui commence à 12H, donc la section rouge sur notre exemple. Les libellés 2, 3 et 4 sont à déplacer.

Exemple de configuration et résultat

<pie>

</sectionDefault>

<sectionDetail indice= "2" >

<label>

<offset x= "-10" y= "0" />

</label>

</sectionDetail>

<sectionDetail indice= "3" >

<label>

<offset x= "-30" y= "0" />

</label>

</sectionDetail>

<sectionDetail indice= "4" >

<label>

<offset x= "40" y= "0" />

</label>

</sectionDetail>

</pie>

</chart>

Modifier la valeur d'un libellé

Le libellé de la section 1 nommé Proposition cdes multi-fourn n'est pas en phase avec les autres. Renommons le en Proposition commandes multi-fournisseur. Le noeud sectionDetail/label le permet. En plus de modifier le libellé, il faut aussi jouer sur l'offset afin qu'il soit visible.

En même temps, ne faisons pas apparaître le libellé de la section 2. L'attribut visible du nœud label le permet. Dans ce cas, le nœud offset n'est pas pris en compte.

Le nœud label

Le nœud label est fils du nœud sectionDetail

label

Définition du libellé de la section d'indice "indice". Prioritaire au libellé défini par la nameXPath du sectionDefault.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
nameValue	chart:StringValueNotEmpty	optional	Le libellé de la section.
visible	xs:boolean	optional	Visibilité du libellé.

Exemple de configuration et résultat

</label>

</sectionDetail>

</label>

</sectionDetail>

Ces exemples ne montrent pas l'ensemble des attributs mais permettent d'avoir une idée du paramétrage disponible.

Nous verrons plus loin les fonctions plus avancées que sont les url et les javascript. Mais avant cela, découvrons de nouveaux attributs sur le graphique category.

Graphique Category

Comment améliorer la présentation et utiliser les éléments de base dans un graphique de type category ?

Reprenons la configuration de base de notre graphique. Pour ne pas surcharger l'écriture, les requêtes xPath sont écrites sous la forme "ma_requete" :

</categorySet>

<serie>

</serieSet>

</serie>

</dataset>

</category>

</chart>

Ajout d'une légende et d'un fond

Le principe est commun au graphique pie car cette configuration se trouve sur le nœud chart.

Exemple de configuration et résultat

</categorySet>

<serie>

</serieSet>

</serie>

</dataset>

</category>

</chart>

Cette configuration utilise les éléments de base maLegend et monFond2 vues dans les exemples précédents.

Nous obtenons le graphique :

Alimentation des category par le nœud categoryNamed

L'alimentation se fait via des requêtes xPath présentes dans les nœuds categorySet et serieSet. Obtenir toutes les données avec une seule requête xPath n'est pas des plus facile. Générons le même graphique en utilisant une requête par category. Le même principe peut être appliqué pour les serie.

Exemple de configuration et résultat

<categoryNamed nameValue= "cat. 1"/ >

<categoryNamed nameValue= "cat. 3" />

<categoryNamed nameValue= "cat. 2"/ >

<categoryNamed nameValue= "cat. 4" />

<categoryNamed nameValue= "cat. 5" />

<serie>

</serieSet>

</serie>

</dataset>

</category>

</chart>

Ajout d'une annotation

Le nœud annotation permet d'ajouter un texte associé à une category

La configuration se trouve dans le paragraphe suivant

Modification de l'apparence d'une série.

Le nœud appearance permet de modifier l'apparence d'une serie.

Le noeud appearance

Appearance

Définition de l'apparence d'un element graphique.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
paint	chart:StringValueNotEmpty	optional	Référence à un élément "paint" ou à une couleur de base. Couleur utilisée pour afficher la série.
itemLabelVisible	xs:boolean	optional	Affichage ou non du label de la série sélectionnée.
itemLabelFont	chart:StringValueNotEmpty	optional	Référence à un élément "font" spécifiant la police utilisée pour afficher le label de la série sélectionnée.
itemLabelPaint	chart:StringValueNotEmpty	optional	Référence à un élément "paint" ou couleur de base. Spécifie la couleur utilisée pour afficher le label de la série sélectionnée.

Exemple de configuration et résultat

<annotation text= "annotation sur category d'indice 3" />

</categoryNamed>

<serie>

<appearance indice= "3" itemLabelVisible= "true" itemLabelFont= "maFonteTitre" itemLabelPaint= "maCouleur"/ >

</serieSet>

</serie>

</dataset>

</category>

</chart>

Modification des axes

Il est possible de modifier l'apparence des axes. Quelques possibilités :

Axe des valeurs

L'échelle des valeurs : fixons le maximum à 10000 au lieu de 7000.

Axe des category

Ajoutons des lignes horizontales de couleur noire pour mieux appréhender les valeurs des barres.

Ajoutons un titre

Il existe d'autres attributs permettant de modifier l'apparence des axes.

Exemple de configuration et résultat

</categoryNamed>

<serie>

</serieSet>

</serie>

<categoryAxis labelValue= "libellé sur categoryAxis" />

<valueAxis valueType= "NUMBER" gridlineVisible= "true" gridlinePaint= "Noir" maximum= "10000" />

</dataset>

</category>

</chart>

Modification du rendu du graphique

Une dernière modification. L'apparence des valeurs peut se faire sous forme de barres ou sous forme de lignes. La forme barre est l'apparence par défaut.

Cette apparence est pilotée par l'attribut rendererType du nœud dataset :

Le nœud dataset

dataset

Le dataset représente la zone contenant le graphique, avec les données , les axes, etc. Un graphique contenant plusieurs dataset pourra être envisagé dans l'avenir.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
rendererType	chart:CategoryRendererType	optional	Le type de rendu du dataset (barres, lignes, ...)

Exemple de configuration et résultat

Configuration du nœud dataset

Plus loin dans le paramétrage

Jusqu'à maintenant nous avons vu comment modifier l'apparence "statique" du graphique. Il est également possible de configurer :

Des éléments "dynamiques" : des url pour exécuter des cinématiques de navigation et des javascript.

Des zones de textes indépendantes du graphique, avec éventuellement une url associée.

url

Les possibilités de cinématique des graphiques sont sensiblement les mêmes que celles obtenues via les feuilles XSL.

Dans cette version, on peut intégrer des liens URLs complètement dynamiques au niveau :

des éléments graphiques représentant les séries (barre ou point) ou les sections (attribut ou noeud URL)
des "textes libres" (noeud freeAnnotation) à positionner n'importe où sur le graphique.

On peut y faire figurer des paramètres dont les valeurs sont issues du graphique ou du flux de présentation ayant servi à le générer.

L'élément url

Avant d'intégrer une url dans le paramétrage du graphique, il faut créer un élément de base url_type

Définition du type Url :

Url

Définition d'une url de navigation.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Identifiant de l'url.
prefix	xs:string	required	Partie "en dur" de l'url. "http://....ServetControl?view=.....". Tout sauf les chp:

ELEMENT

SIGNIFICATION

chp

Définition des champs au sens web.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
name	chart:StringValueNotEmpty	required	Nom du champ. Se retrouve sur l'url sous la forme chp:name
type	chart:ChpType	required	Type de la valeur du champ.
value	xs:string	optional	Valeur du champ, à renseigner selon le type du champ.

Définition du type url_type :

Au type Url s'ajoute les attributs propres à la cible de 'url : target, show et actuate. Ces deux derniers sont des attributs de la norme xLink.

Remarque technique : Le format graphique SVG annonce supporter nativement XLINK dans la définition des URLs. Cela reste cependant un principe : la norme SVG 1.0 définie par le W3C sur laquelle s'appuie les graphiques d’ACE ne supporte pas l'ensemble des attributs du XLINK.

De toute façon, les navigateurs actuels (en particulier IE 6.0) ne supporte non plus l'ensemble des attributs du XLINK.

url_def

Noeud parent des définitions des urls.

ELEMENT

SIGNIFICATION

url_type

Super classe : UrlListe des définitions des url. Ces urls permettent une navigation à partir du graphique. Elles sont soient liées à une zone du graphique représentant une valeur, soient libres (voir freeAnnotation)

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
target	chart:StringValueNotEmpty	optional	Nom de la frame cible de l'url.
show	chart:XLinkShow	optional	Attribut XLINK. Non géré.
actuate	chart:XLinkActuate	optional	Attribut XLINK. Non géré.

Une url est composée d'une partie fixe définissant les grandes lignes de la requête :

Exemple de configuration :

<url_type name= "monUrl" prefix= "http://fx-fcarton/egx/ServletControl? sourceview=maView&cinematic=forward(0)&frame=maFrame >

</url_type>

Les paramètres

Il est possible de compléter l'url par des paramètres de type chp: Ces paramètres ont un type qui détermine leur alimentation.

Les types de paramètres disponibles :

ENUMERATION	Signification
SECTION_NAME	Nom de la section (pie uniquement)
SECTION_VALUE	Valeur de la section (pie uniquement)
SECTION_INDICE	Indice de la section (pie uniquement)
CATEGORY_NAME	Nom de la catégorie (category uniquement)
CATEGORY_INDICE	Indice de la catégorie (category uniquement)
SERIE_NAME	Nom de la série (category uniquement)
SERIE_VALUE	Valeur de la série (category uniquement)
SERIE_INDICE	Indice de la série (category uniquement)
XMLPRES_VALUE	Valeur provenant du flux de présentation.
FIXED_VALUE	Valeur fixée.

Exemples de paramétrage

l'url précédente avec des chp pour un graphique de type pie.

<url_type name= "monUrl" prefix= "http://fx-fcarton/egx/ServletControl? sourceview=maView&cinematic=forward(0)&frame=maFrame" target= "bas" >

</url_type>

La même url avec des chp pour un graphique de type category :

<url_type name= "categoryUrl" prefix= "http://fx-fcarton/egx/ServletControl?sourceview=maView&cinematic=forward(0)&frame=maFrame" target= "toto" >

</url_type>

Appel d'url à partir des graphiques.

Graphique pie

Une url par défaut se positionne sur le nœud sectionDefault, attribut url

Une url par section, prioritaire sur l'url du noeud sectionDefault, se positionne sur le nœud sectionDetail, attribut url.

Exemple de configuration :

On se base sur la configuration du pie construite précédemment :

<pie>

</sectionDefault>

<label>

</label>

</sectionDetail>

<label>

</label>

</sectionDetail>

</pie>

</chart>

Graphique category

Le noeud category/dataset/url permet de définir l'url de base qui sera disponible sur chacune des serie.

Selon le type d'alimentation des séries, les nœuds serie/serieSet/url ou serie/serieNamed/url permettent de définir une url par série. Cette url est prioritaire sur l'url définie sur le nœud dataset/url

Représentation graphique des nœuds url pour le graphique category.

Remarque sur le comportement des urls.

Le comportement des urls dépend de la valeur de l'attribut "target" :

® frame existante : affiche dans la frame indiquée (même si elle se trouve dans une autre fenêtre).

® frame inexistante : ouvre un nouveau navigateur.

® Pas de valeur spécifiée : affiche dans la frame courante

Dans cette version, les URLs ne se déclenchent que via un clic souris de l'utilisateur. Néanmoins, comme pour les feuilles XSL, il est possible de provoquer l'activation d'autres frames au chargement d'une page via la programmation d'un javascript (cf. partie suivante).

Par contre, dans des cas précis, il arrive que le bouton "Page précédente" de la barre de navigation de l'explorateur ne produise pas le résultat escompté. Par exemple, quand on affiche dans la même frame un graphique puis une page texte relié par une URL, le clic sur "Page précédente" se contente de reblanchir la frame sans réafficher le graphique.

FreeAnnotation

La configuration permet de définir des annotations libres, indépendantes du graphique. Le nœud chart/freeAnnotation permet cela.

Représentation graphique du nœud freeAnnotation

Définition d'une freeAnnotation :

FreeAnnotation

Définition d'un texte non associé à un élément d'un graphique. Peut contenir une navigation.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
xPath	chart:XPath	optional	Requête xPath qui alimente le contenu de l'annotation. La requête xPath ou l'attribut text doit être renseigné. Le texte est prioritaire en cas de conflit.
text	xs:string	optional	Chaine en "dur" qui alimente le contenu de l'annotation. La requête xPath ou l'attribut text doit être renseigné. Le texte est prioritaire en cas de conflit.
paint	chart:StringValueNotEmpty	optional	Référence à un élément "paint" ou à une couleur de base. Couleur du texte affiché par l'annotation.
font	chart:StringValueNotEmpty	optional	Référence à un élément "font". Police du texte affiché par l'annotation.
url	chart:StringValueNotEmpty	optional	Référence à un élément "url". URL associée à l'annotation. Permet de déclencher une navigation indépendante des données affichées par le graphique.

ELEMENT

SIGNIFICATION

position

Position de l'annotation libre dans le graphique. Les coordonnées (0,0) référence le coin en haut à gauche.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
x	xs:positiveInteger	required	Coordonnée en y. En pixels.
y	xs:positiveInteger	required	Coordonnée en y. En pixels.

Le texte d'une freeAnnotation est alimenté soit par une requête xPath dans la configuration, soit par un texte en dur. L'attribut url fait référence à un url_type.

Le nœud position détermine la position du texte dans le graphique. Les coordonnés (0,0) correspondent au coin haut gauche du graphique.

Exemple de configuration et résultat sur le graphique category

</categoryNamed>

<serie>

</serieSet>

</serie>

</dataset>

</category>

<freeAnnotation xPath ="/ma_requete_pour_freeAnnotation" font= "maFonte" paint= "RED" url= "monUrlFreeAnnotation" >

<position x= "100" y= "50" />

</freeAnnotation>

</chart>

Javascript

Il est possible d'inclure dans le graphique des fonctions javascript et de les appeler en fonctions d'événements prédéfinis.

Un des avantages du format graphique choisi (Scalable Vector Graphic) est d'autoriser l'intégration assez simple de javascript. Ils sont utiles pour modifier dynamiquement l'apparence des graphiques (barre changeant de couleur, apparition de zone ombrée...) suivant les évènements souris engendrés par l'utilisateur. Ils apportent une touche indéniable de confort visuel au résultat affiché.

Déclaration des fonctions

Les scripts sont définies dans le paramétrage du graphique, dans l'unique nœud javascript_def. Qui est vu comme un gros bloc de données.

Pour éviter d'encombrer le paramétrage avec des lignes de scripts, il est possible de déporter les scripts dans un fichier externe.

Exemple de configuration intégrant les scripts :

<?xml version="1.0" encoding="iso-8859-15"?>

<javascript_def>

var rectElement,textElement,textNode,fontSize,currentScale,currentTranslate;

var svgDocument;

function update() {

var SVGRoot=svgDocument.getDocumentElement();

currentScale=SVGRoot.currentScale;

currentTranslate=SVGRoot.currentTranslate;

...

</javascript_def>

Exemple de configuration avec le code javascript externalisée dans un fichier nommé script.js dans le même répertoire que la configuration du graphique.

<?xml version="1.0" encoding="iso-8859-15"?>

<!DOCTYPE config [

<!ENTITY javascript SYSTEM "script.js">

<javascript_def>

&javascript;

</javascript_def>

Appel des fonctions

Définition d'un appel

Dans cette version, il n'est possible de déclencher des fonctions javascript que sur les portions graphiques (barres, point ou section) via le noeud javascript. En théorie, cela est possible sur tous les éléments composant l'image (titre, légende...). La version 500ES2 n'implémente pas ces possibilités.

Un appel de fonction se décompose en trois parties :

un évènement pour lequel il va se déclencher, choisi parmi une liste prédéterminée composée essentiellement d'évènements souris.
le nom de la fonction codée dans le bloc de données.
Les paramètres à passer à la fonction

Javascript

Définition d'un appel de fonction javascript.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
event	chart:ScriptEvent	required	Libellé identifiant l'événement auquel est associé cet appel javascript. Un appel javascript est lié à un élément du graphique.
function	chart:StringValueNotEmpty	required	Nom de la fonction javascript à appelé. Ce n'est pas un pointeur mais le nom en toute lettre de la fonction, sans ( ) et sans paramètre.

ELEMENT

SIGNIFICATION

param

Définition des paramètres à passer à la fonction javascript.

ATTRIBUT	TYPE	OPT/OBLIG	SIGNIFICATION
type	chart:ChpType	required	Le type du paramètre.
value	chart:StringValueNotEmpty	optional	La valeur du paramètre si son type requière une valeur.

Les événements disponibles sont :

Liste des énévements svg pris en compte par le graphique. Lié au javascript.

ENUMERATION

onAbort

onActivate

onBegin

onClick

onEnd

onError

onFocusIn

onFocusOut

onLoad

onMouseDown

onMouseUp

onMouseMove

onMouseOver

onMouseOut

onRepeat

onResize

onScroll

onUnload

onZoom

Les types de paramètres qui peuvent être passé à la fonction sont les mêmes que pour les url.

ENUMERATION

SECTION_NAME

SECTION_VALUE

SECTION_INDICE

CATEGORY_NAME

CATEGORY_INDICE

SERIE_NAME

SERIE_VALUE

SERIE_INDICE

XMLPRES_VALUE

FIXED_VALUE

Exemple de paramétrage d'un appel de fonction javascript.

La fonction se nomme maFonctionJavascript et prend deux paramètres, un en dur qui contient "evt" et un qui contient la valeur de la série courante.

</javascript>

Le résultat donne un appel du type :

maFonctionJavascript(evt, 2000)

Il est possible de paramétrer plusieurs appels par point d'entrée, pour un même événement ou pour plusieurs événements.

Les points d'entrées

Commun à tous les types de graphiques

Un nœud javascript est disponible sous le noeud chart.

Ce point d'entrée permet d'appeler des scripts à l'ensemble du graphique, indépendamment des sections graphiques. Par exemple lors du chargement du graphique, en associant l'appel à l'événement onLoad.

Pour les graphiques pie

Les appels déclarés sur le nœud sectionDefaut sont associés à l'ensemble des sections.

Les appels déclarés sur le nœud sectionDetail sont associés à la section concernée. Ces appels s'ajoutent aux appels déjà déclarés sur le nœud sectionDefaut.

Pour les graphiques category

Selon le type d'alimentation des séries, les appels sont à positionner sous le nœud serieSet ou serieNamed.

Les spécificités du code Javascript

Ce qu'il faut respecter

ne pas utiliser les noms de fonctions suivantes : createToolTip, activateToolTip et deactivateToolTip car elles sont déjà utilisées en interne pour générer les tooltips.
rendre au maximum le code dynamique en créant ou modifiant les objets du SVG dans le script lui même, sans chercher à faire référence à des éléments présents dans le flux de départ.

Le principe général des fonctions :

1) Récupération d'un noeud SVG

On utilise soit la fonction "getTarget" (récupération de l'objet courant), soit la fonction "getItemById" (récupération d'un noeud identifié). Pour simplifier cette étape, chaque composant graphique a été automatiquement nommé à sa génération en respectant la règle suivante :

Type de graphique	Nom	Signification
PIE	area_x avec x l'indice de la section	Zone graphique définissant une section.
PIE	outline_x avec x l'indice de la section	Bord de la zone graphique d'une section.
CATEGORY (barre ou ligne)	area_x_y avec x l'indice de la catégorie et y l'indice de la série	Zone graphique (barre ou point) définissant une valeur d'une série.
CATEGORY (barre ou ligne)	outline_x_y avec x l'indice de la catégorie et y l'indice de la série	Bord de la zone graphique définissant une valeur d'une série.

2) modification des attributs ou propriétés de cet objet

Une fois l'objet SVG sélectionné, il est possible d'en modifier toutes les caractéristiques d'apparence via les deux méthodes "setAttribute" et "setProperty".

Graphique XY

Exemple obtenu en utilisant le moteur graphique JfreeChart.

Le graphique XY n'est pas disponible dans la version 5.0-00 ES2.

Trucs et astuces

Ce paragraphe contient tout un paragraphe sur la construction des requêtes « xPath » et sur les possibilités du javascript.

Une fois un premier rendu obtenu, il est souvent nécessaire de procéder à quelques ajustements visuels, particulièrement lorsque les valeurs représentées vont varier dans le temps. Les quelques règles et astuces suivantes permettent de conserver une lisibilité correcte du graphique.

Produire au préalable la présentation HTML

Cela en réalisant la feuille de style permettant d'afficher les données sous forme de tableau.

Cette étape permet :

de générer le flux de présentation XML duquel seront extraites les données affichées sur le graphique. Souvent, la même ViewStruct définie depuis XML Dynamic Model Editor sera utilisée pour les deux modes de présentation (XSL et CHART)
de vérifier l'exactitude des données que l'on veut représenter. Sous Excel, elle s'assimilerait à la constitution du tableau des données précédant la création d'un graphique.
de passer facilement à terme dans le site d'une vue graphique (SVG ) à une vue texte (HTML ).

Conseils d'écriture du fichier de configuration

® Créer ou dupliquer les éléments de base en leur donnant les caractéristiques de la charte graphique du site (fond, couleur, police...).

® Utiliser les attributs "Visible" du fichier de paramétrage.

Par exemple : il est préférable de spécifier systématiquement un noeud LEGEND_DEF et de mettre l'attribut "legendVisible" du noeud CHART à false. Cela permet de changer ultérieurement très facilement les caractéristiques du graphique. Cela ne consomme pas plus de ressources ou de temps d'exécution puisque le noeud n'est interprété que s'il est utilisé.

® Pour écrire les requêtes XPath sélectionnant les données dans le flux de présentation, il est conseillé d'utiliser les possibilités des éditeurs de texte comme XMLSpy, Cooktop ou xPathExplorer. Ils permettent ainsi de copier une requête depuis une position dans le flux XML ou d'en évaluer facilement le résultat.

Les libellés des catégories se chevauchent.

Il est alors préférable d'utiliser un affichage horizontal du graphique (noeud CATEGORY, attribut "orientation") plutôt que de réduire la taille de la police au maximum. C'est en effet dans cette configuration que la place réservée aux libellés est la plus importante. A noter que cette dernière n'est pas paramétrable dans cette version.

La valeur affichée des séries est tronquée par le haut du graphique

Ce paramétrage est obtenu en mettant à true la valeur de l'attribut "ItemLabelVisible" du noeud APPEARANCE. La valeur de la barre la plus importante peut ne pas être lisible.

Deux solutions :

fixer un maximum à l'axe des valeurs (attribut "maximum" du noeud VALUEAXIS)... à condition de savoir en déterminer un satisfaisant dans tous les cas !
ne pas afficher les labels ("Itemlabelvisible" à false ) et préférer demander l'affichage des tooltips (noeud CHART, attribut "tooltipsVisible").

Les libellés des sections d'un graphique camembert se chevauchent.

Cela peut se produire lorsque la zone du graphique est assez limitée et que les noms des sections sont longs. La solution consiste à utiliser les différents types d'affichage des sections en les combinant à l'utilisation d'une légende.

Par exemple :

n'afficher que les pourcentages des sections en positionnant l'attribut "type" du noeud PIE_SECTION_LABEL_TYPE à PERCENT_LABELS.
rendre visible la légende en positionnant à true l'attribut "legendVisible" du noeud CHART afin d'associer le nom des sections et leur couleur.
autoriser l'affichage des tooltips en positionnant à true l'attribut "tooltipsVisible" du noeud CHART afin de connaître la valeur de chaque section.

La barre de défilement de la frame d'affichage disparaît.

Même si la frame a été configurée pour afficher des barres de scroll, ces dernières disparaîtront systématiquement à l'affichage du graphique SVG. Si on réaffiche dans la même une représentation HTML, elles réapparaîtront.

A savoir : Il est possible d'afficher un graphique avec des dimensions supérieures (attributs "height" et "width" du noeud CHART) à la place disponible dans la frame. Il sera simplement tronqué.

S'il n'est pas possible de scroller dans un graphique, on peut par contre le zoomer en utilisant le menu contextuel offert par le viewer pugglé dans le navigateur (à priori celui d'Adobe).

Comment sont gérées les couleurs des portions graphiques (barres, lignes et sections) ?

Les portions graphiques sont remplies par défaut avec une liste non paramétrable de couleur de base : rouge, vert, bleu, jaune... Si elle ne convient pas (déphasage avec la charte graphique du site par exemple), il est possible de modifier la couleur de chacune des portions.

Graphique category : Utiliser l'attribut "paint" du noeud APPEARANCE des noeuds SERIESET ou SERIENAMED pour fixer la couleur d'une des séries.

Graphique pie : Soit utiliser l'attribut "paint" du noeud SECTIONDETAIL pour fixer la couleur d'une section. Soit utiliser l'attribut "paintlist" du noeud SECTIONDEFAULT pour spécifier une liste de couleurs elle même décrite dans le noeud PAINT_LIST_TYPE.

Dans tous les cas, il faut savoir que les couleurs spécifiées ne remplacent pas la couleur de base de la liste par défaut.

Exemple :

Un camembert à 4 sections : rouge, vert, bleu, jaune.

Si on fixe une nouvelle couleur (coul1) pour la première section, l'affichage devient : coul1, rouge, vert, bleu et non pas coul1, vert, bleu, jaune.

Exemples de configuration

Pie

<?xml version="1.0" encoding="iso-8859-15"?>

<!DOCTYPE config [

<!ENTITY javascript SYSTEM "script.js">

< config xmlns =" http://www.ACE.fr/technicalframework/chart " xmlns:xsi =" http://www.w3.org/2001/XMLSchema-instance " xsi:schemaLocation =" http://www.ACE.fr/technicalframework/chart file:///D:\developpements\workspace\SocleCourant\doc\config/egxChartConfiguration.xsd ">

< javascript_def >

&javascript;

</ javascript_def >

< font_def >

< font_type name =" maFonteTitre " font =" Helvetica " style =" BOLD " size =" 18 "/>

< font_type name =" maFonte " font =" Verdana " style =" PLAIN " size =" 12 "/>

</ font_def >

< paint_def >

< paint_type name =" Jaune ">

< color basic =" YELLOW "/>

</ paint_type >

< paint_type name =" Rouge ">

< color basic =" RED "/>

</ paint_type >

< paint_type name =" Vert ">

< color basic =" GREEN "/>

</ paint_type >

< paint_type name =" Noir ">

< color basic =" BLACK "/>

</ paint_type >

< paint_type name =" monDegrade ">

< gradientPaint cyclic =" true ">

< beginPoint paint =" RED " x =" 0 " y =" 0 "/>

< endPoint x =" 50 " y =" 100 " paint =" Vert "/>

</ gradientPaint >

</ paint_type >

< paint_type name =" monDegrade2 ">

< gradientPaint cyclic =" true ">

< beginPoint paint =" Jaune " x =" 0 " y =" 0 "/>

< endPoint x =" 50 " y =" 100 " paint =" Vert "/>

</ gradientPaint >

</ paint_type >

< paint_type name =" maCouleur ">

< color >

< RGB r =" 152 " g =" 168 " b =" 174 "/>

</ color >

</ paint_type >

</ paint_def >

< paint_list_def >

< paint_list_type name =" maListeCouleur ">

< paintRef > YELLOW </ paintRef >

< paintRef > maCouleur </ paintRef >

< paintRef > monDegrade </ paintRef >

</ paint_list_type >

</ paint_list_def >

< background_def >

< background_type name =" monFond " backPaint =" monDegrade "/>

< background_type name =" monFond2 " backPaint =" monDegrade2 "/>

</ background_def >

< title_appearance_def >

< title_appearance_type name =" Design titre " font =" maFonteTitre " paint =" Jaune "/>

</ title_appearance_def >

< legend_def >

< legend_type name =" maLegend " background =" monFond "/>

</ legend_def >

< url_def >

< url_type name =" monUrl " prefix =" http://fx-fcarton/egx/ServletControl?sourceview=maView&cinematic=

forward(0)&frame=maFrame " target =" maCible ">

< chp name =" entrepot " type =" SECTION_NAME "/>

< chp name =" qte " type =" SECTION_VALUE "/>

< chp name =" typtie " type =" XMLPRES_VALUE " value =" //temporaire/param[@name='chp:Typtie']/@value' "/>

</ url_type >

</ url_def >

< pie_section_label_def >

< pie_section_label_type name =" apparencelabel " font =" maFonte " type =" VALUE_LABELS "/>

</ pie_section_label_def >

< chart height =" 500 " width =" 700 " legendVisible =" true " tooltipsVisible =" true " legend =" maLegend " background =" monFond2 "

paint =" maCouleur " titleValue =" TITRE DU GRAPHIQUE " titleAppearance =" Design titre ">

< pie paintList =" maListeCouleur " sectionLabel =" apparencelabel ">

< sectionDefault valueXpath =" //VueUtilisateurCourantSociete/JUt_UtiView/JUt_UtiViewRow/VueTbl/DTbl/DTblRow[1]

/VueEvenement/JEveView[1]/JEveViewRow[1]/Datmod/business_data " url =" monUrl ">

</ sectionDefault >

< sectionDetail indice =" 1 " paint =" Jaune ">

< label visible =" true " nameValue =" Label 1 ">

< offset x =" 30 " y =" 0 "/>

</ label >

< javascript event =" onMouseOver " function =" activateToolTipConfig ">

< param type =" FIXED_VALUE " value =" evt "/>

< param type =" SECTION_VALUE "/>

</ javascript >

< javascript event =" onMouseOut " function =" deactivateToolTipConfig ">

< param type =" FIXED_VALUE " value =" evt "/>

< param type =" SECTION_INDICE "/>

< param type =" XMLPRES_VALUE " value =" count(//VueUtilisateurCourantSociete/JUt_UtiView/JUt_UtiViewRow/VueTbl/DTbl/DTblRow[1]/VueEvenement/JEveView[1]

/JEveViewRow[1]/Datmod/business_data) "/>

</ javascript >

< javascript event =" onMouseOver " function =" set_opacity ">

< param type =" FIXED_VALUE " value =" evt "/>

< param type =" FIXED_VALUE " value =" 0.5 "/>

</ javascript >

< javascript event =" onMouseOut " function =" set_opacity ">

< param type =" FIXED_VALUE " value =" evt "/>

< param type =" FIXED_VALUE " value =" 1 "/>

</ javascript >

</ sectionDetail >

< sectionDetail indice =" 2 " paint =" Noir ">

< label nameValue =" Label 2 " visible =" true ">

< offset x =" 100 " y =" 0 "/>

</ label >

</ sectionDetail >

< sectionDetail indice =" 10 " paint =" Noir ">

< label visible =" false " nameValue =" Label 10 "/>

</ sectionDetail >

</ pie >

< javascript event =" onLoad " function =" createToolTipConfig ">

< param type =" FIXED_VALUE " value =" evt "/>

< param type =" FIXED_VALUE " value =" '#000000' "/>

< param type =" FIXED_VALUE " value =" '#99ffcc' "/>

< param type =" FIXED_VALUE " value =" 'Verdana' "/>

< param type =" FIXED_VALUE " value =" 10 "/>

< param type =" FIXED_VALUE " value =" 'normal' "/>

< param type =" FIXED_VALUE " value =" true "/>

</ javascript >

</ chart >

</ config >

Valeurs	Signification
xsl	Génération du résultat sous forme html via le parsing d'une feuille xsl.
Chart	Génération du résultat sous forme SVG via la génération d'un graphique basé sur la configuration.

Développement d’objets graphiques avec le mode web

Présentation

Pré requis

Principes

Paramétrer le mode de rendu

Choix du rendu par configuration

Choix du rendu par la requête http

Des graphiques simples

Le nœud racine des graphiques

Graphique PIE (camembert)

Présentation

Un graphique simple

Exemple de configuration et résultat

Particularité de l'attribut paintList

Graphique CATEGORY

Présentation

Un graphique simple

Choix d'alimentation des données

Les category

Les series

La configuration

Le résultat

Personnaliser l'apparence du graphique

Eléments de base

Font (Police de caractère)

Description des attributs disponibles

Exemple de configuration

Paint (Couleur de base)

Le noeud paint

Le nœud color

Le nœud GradientPaint

Exemple de configuration

Paint_list (liste de couleurs)

Liste des attributs disponibles

Exemple de configuration

Background (fond d'une zone)

Liste des attributs disponibles

Exemple de configuration :

Item_label et title_appearance (libellés des ensembles de valeurs et titre)

Liste des attributs disponibles

Exemple de configuration :

Legend

Liste des attributs disponibles

Exemple de configuration :

Pie_section_label

Liste des attributs disponibles

Exemple de configuration

Graphique Pie

Ajout d'une légende et d'un fond

Exemple de configuration et résultat

Modification des libellés des sections

Exemple de configuration et résultat

Modification de la position des libellés

Le nœud sectionDetail

Exemple de configuration et résultat

Modifier la valeur d'un libellé

Le nœud label

Exemple de configuration et résultat

Graphique Category

Ajout d'une légende et d'un fond

Exemple de configuration et résultat

Alimentation des category par le nœud categoryNamed

Exemple de configuration et résultat

Ajout d'une annotation

Modification de l'apparence d'une série.

Le noeud appearance

Exemple de configuration et résultat

Modification des axes

Exemple de configuration et résultat

Modification du rendu du graphique

Le nœud dataset

Exemple de configuration et résultat

Plus loin dans le paramétrage

url

L'élément url

Définition du type Url :

Les paramètres

Exemples de paramétrage

Appel d'url à partir des graphiques.

Graphique pie