1- Entête :

On commence tout d'abord par écrire l'entête du fichier xml et le corps de la feuille de style. Choisissions par exemple une image de 400 pixels de largeur et 300 pixels de hauteur. On écrit simplement :

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
	<image width="400" height="300" />
</stylesheet>

Les objets que nous ajouterons par la suite seront toujours entre la balise stylesheet.

2- Ajouter un graphique :

Commencons par ajouter un objet lineplot, qui représente un graphique. On va le positionner à une distance de 50 pixels du bord gauche de l'image, et 250 pixels du bas de l'image (ce qui centrera le graphique).

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
  </lineplot>
</stylesheet>

Passons aux axes. A l'intérieur de la balise lineplot, on ajoute une balise xaxis représentant l'axe des abscisses. Pour une fois je vais mettre de la couleur à l'axe, du bleu. On passe donc la valeur de l'attribut color à FF0000FF. Pour rappel les couleurs sont codées ARGB (alpha,rouge,vert,bleu).

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
  </lineplot>
</stylesheet>

On va ajouter l'axe des ordonnées maintenant. Un bleu aussi pour que ce soit raccord. Comme on peut ajouter plusieurs axe, ceux-ci sont numérotés. Nous c'est notre premier, donc on ajoute la balise y1axis.

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF"></y1axis>
  </lineplot>
</stylesheet>

Voila ce que ca donne dans GraphWeather :



Maintenant il nous faut ajouter des données à tracer. On se lance avec une température extérieure. Les données sont encapsulées dans une balise data. On ajoute donc une balise data et à l'intérieur, on place notre sonde outdoor_temperature. On veut que les données appartiennent à l'axe des ordonnées numéro 1 (le seul pour l'instant) donc on met l'attribut axisbind à y1axis.

On peut ajouter d'autres données sur le même axe. Biensure, il faut que ce soit des données du même ordre de grandeur, et si possible de même unité pour y comprendre quelquechose...
Ajoutons le point de rosée, qui est la sonde dew_point. Au final on obtient ceci :

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF"></y1axis>
    <data>
      <outdoor_temperature axisbind="y1axis" />
      <dew_point axisbind="y1axis" />
    </data>
  </lineplot>
</stylesheet>

Voila ce que ca donne dans GraphWeather :



On ne differencie pas les courbes...elles sont de même couleurs. Changeons donc les couleurs. Nous allons mettre un rouge sur la température extérieure, puis pourquoi pas un gradient sur le point de rosée. On pourra facilement repérer si il y a du brouillard comme cela (si la courbe de température entre dans l'aire de la courbe du point de rosée).
On ajoute donc un attribut color1 à la balise outdoor_température, et on le met à FFFF0000. Le gradient pour le point de rosée est obtenu avec deux couleurs, color1 à 40FF0000 (un rouge un peu transparent) color2 à 400000FF (un bleu transparent comme le rouge), puis on ajoute un attribut filled="1" pour indiquer qu'il faut remplir sous la courbe.

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF"></y1axis>
    <data>
      <outdoor_temperature axisbind="y1axis" color1="FFFF0000"/>
      <dew_point axisbind="y1axis"color1="40FF0000" color2="200000FF" 
filled="1"/>
    </data>
  </lineplot>
</stylesheet>

Voila ce que ca donne dans GraphWeather (c'est déjà plus sympa) :



Pour bien comprendre le principe des axes, nous allons ajouter un autre axe sur la droite pour tracer la pression. C'est le second axe, il s'appelle donc y2axis. Comme on le veut sur la droite, on lui met un attribut side à 8 (8=droit). On ajoute une sonde de pression absolue dans les données, avec couleur verte. La pression appartient à l'axe y2axis donc on met l'attribut axisbind à y2axis. Au final on obtient :

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF"></y1axis>
    <y2axis color="FF0000FF" side="8"></y2axis>
    <data>
      <outdoor_temperature axisbind="y1axis" color1="FFFF0000"/>
      <dew_point axisbind="y1axis"color1="40FF0000" color2="200000FF" 
filled="1"/>
      <absolute_pressure axisbind="y2axis" color1="FF00FF00"/>	
    </data>
  </lineplot>
</stylesheet>

Voila ce que ca donne dans GraphWeather :



C'est pas mal, mais certaines choses ne vont pas :

Les ticks sont à droite sur y1axis, ils seraient mieux à gauche.

Les labels sont à gauche sur y2axis, ils seraient mieux à droite.

Les ticks font partis de l'axe y1axis, donc on va ajouter une balise dans y1axis qui se nomme ticks. On ajoute l'attribut side et on met sa valeur à 2 (2=gauche).

C'est la même chose pour les labels, avec un side à 8 (8=droit).

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF" titleside="2">
      <ticks side="2"/>
    </y1axis>
    <y2axis color="FF0000FF" side="8" titleside="8">
      <labels side="8"/>
    </y2axis>
    <data>
      <outdoor_temperature axisbind="y1axis" color1="FFFF0000"/>
      <dew_point axisbind="y1axis"color1="40FF0000" color2="200000FF" 
filled="1"/>
      <absolute_pressure axisbind="y2axis" color1="FF00FF00"/>	
    </data>
  </lineplot>
</stylesheet>

Voila le problème résolu :



Dernière chose les titres. C'est toujours pareil...les titres appartiennent aux axes, donc il faut ajouter une balise title, dans l'axe concerné avec son attribut text, et son attribut alignement. Il faut voir le titre se balladant dans une boite qui est d'un coté ou l'autre de l'axe. L'alignement permet de coler le texte ou l'on veut. Ici l'alginement est à 20 c'est à dire centré (4=centré horizontalement+16=centré verticalement).
Maintenant la boite titre est à placer d'un coté ou de l'autre de l'axe, et c'est l'axe qui le décide, donc c'est un de ses attributs que l'on nomme titleside. On veut le titre à gauche pour y1axis donc titleside="2" et a droite pour y2axis donc titleside="8".
Au final,on obtient :

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="300" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF" titleside="2">
      <ticks side="2"/>
      <title text="Température (C°)" alignement="20" />
    </y1axis>
    <y2axis color="FF0000FF" side="8" titleside="8">
      <labels side="8"/>
      <title text="Pression (hPa)" alignement="20" />
    </y2axis>
    <data>
      <outdoor_temperature axisbind="y1axis" color1="FFFF0000"/>
      <dew_point axisbind="y1axis"color1="40FF0000" color2="200000FF" 
filled="1"/>
      <absolute_pressure axisbind="y2axis" color1="FF00FF00"/>	
    </data>
  </lineplot>
</stylesheet>

Ce qui donne :


La on s'apercoit que l'on n'a pas été assez généreux sur les dimensions de l'image. Pas touche à l'image, nous voulons du 400x300, on s'y tient.

La solution est simple pour le titre des températures car, un attribut sert à régler l'éloignement de la boite titre par rapport à l'axe, titlemargin. Le titlemargin doi être par defaut à 50 pixels. On le met donc à 40 pour approcher le titre de l'axe.

La solution pour le titre des pressions, c'est de réduire la taille du graphique, car quoique qu'on fasse les labels sont trop longs, et il manque de la place. On reduit donc l'attribut width de lineplot à 280.

 
<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="400" height="300" />
  <lineplot width="280" height="200" position-x="50" position-y="250">
    <xaxis color="FF0000FF"></xaxis>
    <y1axis color="FF0000FF" titleside="2" titlemargin="40">
      <ticks side="2"/>
      <title text="Température (C°)" alignement="20" />
    </y1axis>
    <y2axis color="FF0000FF" side="8" titleside="8">
      <labels side="8"/>
      <title text="Pression (hPa)" alignement="20" />
    </y2axis>
    <data>
      <outdoor_temperature axisbind="y1axis" color1="FFFF0000"/>
      <dew_point axisbind="y1axis"color1="40FF0000" color2="200000FF" 
filled="1"/>
      <absolute_pressure axisbind="y2axis" color1="FF00FF00"/>	
    </data>
  </lineplot>
</stylesheet>

Et voila au final, un petit graphique sympa :



Je termine ce premier tutorial ici, car il commence à être long. Je reprendrais cette feuille de style dans un autre tutorial...pour ajouter titres, textures, et expliquer quelques astuces sur les ticks, labels et legendes.