Exemple : Graphiques en chandeliers
Les graphiques en chandeliers (capture d’écran ci-dessous) sont communément utilisés pour montrer les cours des stocks. Ils fournissent une information « en un coup d’œil » sur les cours d’ouverture et de fermeture, et les cours les plus élevés et les plus bas au cours d’une journée de cotation.

La capture d’écran ci-dessus, par exemple, affiche les chandeliers des cours des actions d’une entreprise fictive, MyStock, pour les journées de cotation du 11 avril 2011 au 20 avril 2011. Les points les plus élevés et les plus bas de la ligne verticale de chaque chandelier indique respectivement les cours des actions les plus élevés et les plus bas de la journée (voir la table ci-dessous pour les prix). Un corps de chandelier rempli de couleurs indique une baisse du cours au cours de la journée de cotation, depuis le cours d’ouverture au cours de fermeture, un corps non rempli indique une hausse du cours. Donc, le 11 avril, nous voyons que le cours a baissé de 210 à 203, tandis que le 12 avril, le cours a augmenté de 205 à 218.

Un deuxième type de graphique en chandeliers (capture d’écran ci-dessous) affiche trois valeurs : (i) le cours de cotation le plus élevé de la journée, (ii) le cours le plus bas et (iii) le cours de fermeture (indiqué comme ligne horizontale courte).

Fichiers d’exemples du graphique en chandelier
Les exemples de graphiques en chandeliers discutés dans cette section se trouvent sous le dossier (Mes) Documents, C:\Documents and Settings\<username>\My Documents\Altova\StyleVision2025\StyleVisionExamples\Tutorial\Charts : Le fichier SPS Candlestick.sps (voir la capture d’écran ci-dessous) utilise Candlestick.xsd et Candlestick.xml. Dans l’Aperçu Authentic (capture d’écran ci-dessous), l’utilisateur peut sélectionner ce qui doit être affiché dans le graphique en chandeliers. Les options de sélection sont : (i) l’entreprise (depuis deux entreprises) ; (ii) la période pour laquelle les prix doivent être affichés ; (iii) l’étendue de l’Axe Y ; et (iv) l’intervalle des coches de l’Axe Y. De plus, la table en dessous du graphique permet la saisie de nouvelles données commerciales pour les deux entreprises (cliquez avec la touche de droite dans une ligne et ajoutez ou insérez un élément Day).
Notez que la partie supérieure du design contient des zones de liste déroulantes et champs d’entrée dans lesquels l’utilisateur Authentic peut spécifier les paramètres du graphique qui est affiché ci-dessous. Ces spécifications d’entrée sont stockées à l’intérieur du fichier XML et sont utilisées pour calculer certains paramètres de graphique clés.
fichier XML
La structure autorisée du document XML est affichée dans la liste ci-dessous. Cet élément du document Trades contient un élément Selection et un nombre illimité d’éléments d’éléments Stock. Chaque élément Stock peut contenir un nombre illimité d’éléments Day.
<Trades xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="Candlestick.xsd">
<Selection>
<Stock>Nanonull</Stock>
<StartDate>20110103</StartDate>
<EndDate>20110112</EndDate>
<YAxisStart>80</YAxisStart>
<YAxisEnd>180</YAxisEnd>
<YAxisTickInterval>20</YAxisTickInterval>
<WeekToView>25</WeekToView>
</Selection>
<Stock name="MyStock">
<Day id="20110103" year="2011" month="Jan" week="01" date="03">
<Open>90</Open>
<High>110</High>
<Low>88</Low>
<Close>105</Close>
</Day>
<Day id="20110104" year="2011" month="Jan" week="01" date="04">
<Open>100</Open>
<High>112</High>
<Low>92</Low>
<Close>109</Close>
</Day>
...
</Stock>
<Stock/>
...
<Stock/>
</Trades>
L’élément Selection contient des informations fournies par l’utilisateur Authentic et cette information est utilisée pour sélectionner quelles données sont affichées dans le graphique. La sélection des données pour le graphique est basée pour cette raison sur l’information dans l’élément Selection. Les détails exacts sont expliqués dans la prochaine section. Les données sur les mouvements de cours de chaque stock en un jour donné sont contenues dans l’élément Stock/Day de ce stock en cette journée donnée.
Sélection des données pour le graphique en chandeliers
La sélection des données pour ce graphique est spécifiée dans le dialogue de configuration du graphique (voir la capture d’écran ci-dessous), qui est accédé en cliquant avec la touche de droite sur le graphique et en sélectionnant Éditer Paramètres du graphique. La sélection des données a été faite en utilisant la méthode Simple.

Les paramètres sont classés comme suit :
•Dans le design, le graphique est inséré à l’intérieur d’un élément Stock. Cet élément Stock a un filtre pour sélectionner l’élément Stock avec un attribut @id égal au contenu de l’élément Selection/Stock. Donc le nœud contextuel dans lequel le graphique est créé est l’élément Stock que l’utilisateur Authentic sélectionne dans la zone de liste déroulante Stock.
•L’expression XPath For-Each sélectionne tous les éléments Day qui ont un attribut @id supérieur à ou égal à StartDate que l’utilisateur Authentic spécifie et quin est inférieur à ou égal à la EndDate de l’utilisateur. Ceci assure que les données pour les dates sélectionnées par l’utilisateur Authentic seront traitées maintenant. Le nœud contextuel pour toutes les autres expressions utilisées pour la sélection des données dans ce dialogue sera donc l’élément Day (voir la structure de l’exemple ci-dessous).
<Day id="20110104" year="2011" month="Jan" week="01" date="04">
<Open>100</Open>
<High>112</High>
<Low>92</Low>
<Close>109</Close>
</Day>
•Sur l’Axe X du graphique, nous voulons afficher les dates. Donc nous utilisons l’expression XPath. concat(@date, '-' @month). Cette expression sert à recueillir des données depuis les attributs des éléments Day respectifs.
•L’Axe Y trace les cours du stock. Nous utilisons les quatre séries pour notre graphique en chandeliers : (i) les cours d’ouverture, (ii) les cours les plus élevés de la journée, (iii) le cours le plus bas de la journée et (iv) le cours de fermeture. Pour chacune de ces séries, nous identifions, respectivement, les éléments Day/Open, Day/High, Day/Low et les éléments Day/Close.
Important : L’ordre dans lequel les séries sont spécifiées est important et doit être comme suit :
•Graphiques Quatre-séries : (i) Ouvrir, (ii) Élevé, (iii) Bas, (iv) Fermer.
•Graphiques Trois-séries : (i) Élevé, (ii) Bas, (iii) Fermer.
Les nœuds qui contiennent les valeurs qui seront utilisées pour les différentes séries peuvent avoir un nom XML valide (ils ne doivent pas être appelés Ouvrir, Élevé, etc.) mais ces nœuds doivent contenir des valeurs de nombres.
Autres paramètres dans le fichier d’exemple
D’autres paramètres graphiques cruciaux étaient obtenus, tels qu’expliqués ci-dessous. Nombreux étaient obtenus de manière dynamique depuis le fichier XML et avaient besoin d’être définis en utilisant les paramètres XPath dynamiques.
•Puisque le nom du graphique a besoin des spécifications de la date de l’utilisateur Authentic, le titre du graphique est défini de manière dynamique.
•L’étendue et l’intervalle de l’Axe Y sont également déterminés par l’utilisateur et requièrent pour cette raison les paramètres XPath dynamiques.