3 - Améliorer la présentation.

On va commencer par cacher les légendes en haut du graphique, vu que nous avons déjà nommé les axes y

 <data>
        <outdoor_temperature axisbind="y1axis" legend="Temperature ext." color1="FFFF0000" thick="1.2" hidelegend="1"/>
        <relative_pressure axisbind="y2axis" legend="Pression rel." color1="FF009000" thick="1.2" hidelegend="1"/>
        <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" hidelegend="1"/>
      </data>

Ensuite on agrandit le graphique pour qu'il occupe mieux l'espace de notre feuille. On modifie les valeurs height et width du lineplot

<lineplot width="680" height="350" position-x="80" position-y="80" >

Notre zone du graphique est agrandie mais elle dépasse la feuille, nous allons la repositionner avec "position" x et y

 <lineplot width="680" height="350" position-x="20" position-y="20" >

On supprime la légende de l'axe x pour la remplacer par un texbox qui contient quelques statistiques sur la période tracée.
On supprime uniquement le texte date, on garde le reste du code pour si on veux rajouter un texte plus tard.

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

Maintenant on rajoute une boîte de texte en dessous du graphique.
La texbox a une dimension de 460x110 et elle est positionnée sur la page à 120pxs de la droite et 380pxs du haut, margin est la marge pour l'insertion du texte . La bordure est arrondie à 10pxs.
Le fond "background" est une image en png ou jpg, il faut indiquer le nom et le chemin du fichier, dans cet exemple le fichier se situe dans le répertoire Stylesheets de GraphWeather.

   <textbox width="460" height="110" shadow="1" position-x="120" position-y="380" margin="14">
        <border cornerradius="10" color="FF909090" thick="1" />
        <background texture="tex_bluegrad.png" stretch="1" />
  </textbox>

Rajoutons quelques lignes de texte à l'intérieur de la textbox avec la balise "text". \n rajoute un saut de ligne et \t une tabulation

<text alignement="left|top">
<line text="Rapport généré le $CurrentDate[%A %d %B %Y à %Hh%M]" />
<line text="\t\n\t\t\t\tMin\t\tMax\t\tMoyenne"/>
<line text="\tPression rel. :\t\t$Min[relative_pressure] $Unit[Pressure]\t$Max[relative_pressure] $Unit[Pressure]\t$Mean[relative_pressure] $Unit[Pressure]"/>
<line text="\tTempérature ext. :\t$Min[outdoor_temperature] °\t\t$Max[outdoor_temperature] °\t\t$Mean[outdoor_temperature] °"/>
<line text="\tHumidité ext. :\t\t$Min[outdoor_humidity] %\t\t$Max[outdoor_humidity] %\t\t$Mean[outdoor_humidity] %"/>
 </text>

On va encore rajouter un fond à la feuille avec la balise "background", idem que pour la textbox

<frame width="800" height="500" position-x="0" position-y="0">
    <border cornerradius="10" color="FF909090" thick="1" />
    <background texture="tex_bluegrad.png" />

Bon le résultat n'est pas très beau, nous allons arranger ça avec les balises marges "margin", il faut jouer avec les valeurs des marges et des grandeurs jusqu'au résultat voulu.

 <lineplot width="760" height="350" position-x="20" position-y="20"  margin-top="35" margin-right="130" margin-bottom="45" margin-left="50" >

Voici le code complet

 <?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 texture="tex_bluegrad.png" />
    </frame>
    <lineplot width="760" height="350" position-x="20" position-y="20"  margin-top="35" margin-right="130" margin-bottom="45" margin-left="50" >
      <background color="ffffffff" />
      <xaxis color="FF000000" grid="1" autoscale="0">
        <title text="" 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" hidelegend="1"/>
        <relative_pressure axisbind="y2axis" legend="Pression rel." color1="FF009000" thick="1.2" hidelegend="1"/>
        <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" hidelegend="1"/>
      </data>
    </lineplot>
    <!-- ================= Statistics ================= -->
  <textbox width="460" height="110" shadow="1" position-x="120" position-y="380" margin="14">
        <border cornerradius="10" color="FF909090" thick="1" />
        <background texture="tex_bluegrad.png" stretch="1" />
    <text alignement="left|top">
      <line text="Rapport généré le $CurrentDate[%A %d %B %Y à %Hh%M]" />
      <line text="\t\n\t\t\t\tMin\t\tMax\t\tMoyenne"/>
			<line text="\tPression rel. :\t\t$Min[relative_pressure] $Unit[Pressure]\t$Max[relative_pressure] $Unit[Pressure]\t$Mean[relative_pressure] $Unit[Pressure]"/>
			<line text="\tTempérature ext. :\t$Min[outdoor_temperature] °\t\t$Max[outdoor_temperature] °\t\t$Mean[outdoor_temperature] °"/>
			<line text="\tHumidité ext. :\t\t$Min[outdoor_humidity] %\t\t$Max[outdoor_humidity] %\t\t$Mean[outdoor_humidity] %"/>
    </text>
  </textbox>
  </stylesheet>

 

Voilà, vous avez créé votre premier graphique grâce à une feuille de style, il y a encore de nombreuses possibilités qu'il serait trop long à expliquer en détail, mais je vous encourage à consulter la page de Jean qui recense toutes les balises, objets et sondes de GraphWeather

Une autre petite pose et on passe à la page suivante (divers)