2 - Afficher les données.

Maintenant que nous avons la base de notre graphique avec les axes x et y, nous allons rajouter une donnée à tracer.

Les données sont à mettre entre la balise "data" dans notre cas nous allons rajouter la température extérieure "outdoor_temperature" et l'associer à l'axe y1 avec une couleur rouge et une largeur de trait "thick"de 1.2

 <data>
      <outdoor_temperature axisbind="y1axis" legend="Temperature ext." color1="FFFF0000" thick="1.2"/>
 </data>

Et voici le résultat si vous avez bien configuré le plugin dans GraphWeather.

Maintenant vous que avez compris le fonctionnement des feuilles de style, nous allons rajouter la courbe de la pression sur l'axe y2 et le placer à gauche du graphique.

On va rajouter un deuxième axe Y2 comme nous l'avons déjà fait avec l' axe Y1 pour la température, la balise sera donc "y2axis" et le placer à gauche avec "titleside"

<y2axis side="right" color="FF009000" grid="0" autoscale="1" titleside="right" titlemargin="38">
   <title text="Pression ($Unit[Pressure])" alignement="vcenter|hcenter" angle="0">
      <font color="FF009000" facename="Arial" size="14" weight="400" italic="1" />
   </title>
    <labels labelinterval="1" format=".0" side="right" hide="0">
      <font color="FF009000" facename="Arial" size="14" weight="400" italic="0" />
     </labels>
     <ticks majorticks="5" minorticks="4" side="right" />
</y2axis>

Comme nous l'avons déjà fait avec la température, nous devons associer les données de la pression "relative_pressure" à l'axe y2, toujours dans la balise "data"

 <relative_pressure axisbind="y2axis" legend="Pression rel." color1="FF009000" thick="1.2"/>

Donc nous avons maintenant deux données dans la balise data et elle doit être comme ceci :

 <data>
   <outdoor_temperature axisbind="y1axis" legend="Temperature ext." color1="FFFF0000" thick="1.2"/>
   <relative_pressure axisbind="y2axis" legend="Pression rel." color1="FF009000" thick="1.2"/>
 </data>

Passons maintenant au troisième axe "y3axis", l'humidité relative extérieure "outdoor_humidity"

On rajoute l'axe à gauche avec une échelle fixe "autoscale à 0" et une graduation de 0 à 100 % avec les balises " min et max"

 <y3axis ydelta="70" side="right" color="300000FF" grid="0" autoscale="0" min="0" max="100" 
  titleside="right" titlemargin="35">
   <title text="Humidité (%)" alignement="vcenter|hcenter" >
     <font color="300000FF" facename="Arial" size="14" weight="400" italic="1" />
   </title>
    <labels labelinterval="1" format=".0" side="right" >
     <font color="300000FF" facename="Arial" size="14" weight="400" italic="0" />
    </labels>
    <ticks autoticks="0" majorticks="5" minorticks="4" side="right" />
</y3axis>

Et on rajoute les données dans la balise data

<outdoor_humidity axisbind="y3axis" legend="Humidité extérieure" color1="300000FF" thick="1.2"/>

On va rendre le résultat un petit peu plus sympathique avec un dégradé de couleur sur l'axe de l'humidité, pour cela on rajoute une ligne dans la balise data avec deux couleurs, une de début et une de fin du dégradé, on active le dégradé avec la balise "filled". Etant donné que cette ligne trace les mêmes données (outdoor_humidity) on cache la première légende avec la balise "hidelegend"

<outdoor_humidity axisbind="y3axis" legend="Humidité extérieure" color1="3000FF00" color2="300000FF" filled="1" />

Legraphique commence à être sympa, vous avez compris que si maintenant vous copiez tous ce code dans une page, que vous la nommez avec l'extension xml et que vous l'ouvrez avec GraphWeather, vous aurez ce résultat

Voici le code complet de ce que l'on a effectué depuis le début de ce tutoriel

 <?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="800" height="500" color="FFFFS0000"/>
  <background color="00000000" stretch="1" />
  <!-- ================= Frame ================= -->
    <frame width="800" height="500" position-x="0" position-y="0">
      <border cornerradius="10" color="FF909090" thick="1" />
      <background color="FFFFFFFF" />
    </frame>
    <lineplot width="600" height="250" position-x="80" position-y="80" >
      <background color="ffffffff" />
      <xaxis color="FF000000" grid="1" autoscale="0">
        <title text="date" alignement="vcenter|hcenter" angle="0">
          <font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
        </title>
        <labels labelinterval="1" angle="0" side="left" hide="0">
          <font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
        </labels>
        <ticks majorticks="7" minorticks="3" />
      </xaxis>
      <y1axis color="FFFF0000" grid="1" autoscale="1" titlemargin="-35">
        <labels labelinterval="1" format=".0" side="left" >
          <font color="FFFF0000" facename="Arial" size="12" weight="400" italic="1" />
        </labels>
        <ticks majorticks="4" minorticks="4" side="left" />
        <title text="Température ($Unit[Temperature])" alignement="vcenter|hcenter" angle="0">
          <font color="FFFF0000" facename="Arial" size="14" weight="400" italic="1" />
        </title>
      </y1axis>
      <y2axis side="right" color="FF009000" grid="0" autoscale="1" titleside="right" titlemargin="38">
        <title text="Pression ($Unit[Pressure])" alignement="vcenter|hcenter" angle="0">
          <font color="FF009000" facename="Arial" size="14" weight="400" italic="1" />
        </title>
        <labels labelinterval="1" format=".0" side="right" hide="0">
          <font color="FF009000" facename="Arial" size="14" weight="400" italic="0" />
        </labels>
        <ticks majorticks="5" minorticks="4" side="right" />
      </y2axis>
      <y3axis ydelta="70" side="right" color="FF0066FF" grid="0" autoscale="0" min="0" max="100" titleside="right" titlemargin="35">
        <title text="Humidité (%)" alignement="vcenter|hcenter" >
          <font color="FF0066FF" facename="Arial" size="14" weight="400" italic="1" />
        </title>
        <labels labelinterval="1" format=".0" side="right" >
          <font color="FF0066FF" facename="Arial" size="14" weight="400" italic="0" />
        </labels>
        <ticks autoticks="0" majorticks="5" minorticks="4" side="right" />
      </y3axis>
      <data>
        <outdoor_temperature axisbind="y1axis" legend="Temperature ext." color1="FFFF0000" thick="1.2"/>
        <relative_pressure axisbind="y2axis" legend="Pression rel." color1="FF009000" thick="1.2"/>
        <outdoor_humidity axisbind="y3axis" legend="Humidité extérieure" color1="3000FF00" thick="1.2" hidelegend="1"/>
        <outdoor_humidity axisbind="y3axis" legend="Humidité extérieure" color1="3000FF00" color2="300000FF" filled="1" />
      </data>
    </lineplot>
  </stylesheet>

Une autre petite pose et on passe à la page suivante