Mini graphique

But : créer un minigraphique comme ceux qui s'affichent au passage de la souris sur les jauges de ma page d'accueil.

Pour commencer, vous devez enregister cette image dans le même dossier que votre feuille de style et la nommer mini.png (clique droit sur l'image et enregistrer l'image sous... Ne pas changer le nom

Vous trouverez d'autre images du même style ici
Un tutoriel pour afficher ces minigraphiques au passage de la souris est disponible ici

Prêt, on commence notre feuille de style, ouvrez un nouveau fichier vide avec votre éditeur de texte et enregistrez-le dans le même dossier que l'image ci-dessus.

Comme pour notre premier graphique, on commence par créer une image et un cadre qui contiendra notre image de base.
toujours entre les balises <stylesheet>, nous ajoutons la balise "stretch" pour adapter la grandeur de l'image à la grandeur du cadre.

 <?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
<image width="450" height="250"/>
<frame width="450" height="250" >
<background texture="mini.png"  stretch="1" />
</frame>
</stylesheet>

Ouvrez votre feuille de style avec GraphWeather, vous devez avoir ce résultat.

On commence par définir la grandeur de notre zone de graphique "lineplot" et de le positionner en x-y et de lui indiquer les marges, pui ontrace l'axe x "xaxis", on défini les "labels" avec les propriétés de la police de caractère.

<lineplot width="395" height="145" position-x="35" position-y="45" margin-top="10" margin-right="10" margin-bottom="10" margin-left="10" >
 <xaxis color="FF000000" grid="1" autoscale="0">
  <labels labelinterval="1" side="left">
  <font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
  </labels>
  <ticks majorticks="7" minorticks="5" side="bottom" />
 </xaxis>
</lineplot>

De la même manière, on rajoute l'axe y "yaxis" vous remarquerez la balise "format", elle indique ici que les valeurs de l'axe y aurons 1 chiffre après la virgule.
Avec "majorticks" et "minorticks" on défini le nombre de graduations principales et secondaires la balise "side" permet de placer les graduations à gauche ou a droite de l'axe.

<y1axis color="FF000000" grid="1" autoscale="1" >
  <labels labelinterval=".2" angle="0" format=".1" side="left" >
  <font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
  </labels>
  <ticks majorticks="4" minorticks="4" side="left" />
</y1axis>

Nous avons nos deux axes, nous allons encore rajouter les données qu'il faut tracer, dans notre exemple, la pluviomètrie. On rajoute donc dans la balise "data"

<data>
  <relative_rainfall axisbind="y1axis"  color1="660000FF" antialiasing="1" hidelegend="1" thick="1.2" />
</data>

Comme pour l'humidité dans notre graphique précédent, nous allons mettre un remplissage avec un dégradé ainsi qu'une légende, pour ce faire un rajoute une ligne dans la balise "data"

<relative_rainfall axisbind="y1axis" legend="Précipitations" color1="660000FF" color2="330000FF" antialiasing="1" filled="1" />

Il nous reste à mettre la légende à la bonne place avec la balise "legend" et à définir le style de la police de caratère.

<legend orientation="0" margin="5" width="250" position-x="40" position-y="20">
  <font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</legend>

Voilà, notre graphique est terminé, on peut encore rajouter une petite statistique, pour cela on crée une boîte de texte avec la balise "textbox"

<textbox width="380" height="20" shadow="0" position-x="40" position-y="210" margin="0" >
   <text alignement="center">
     <line text="Précipitations 1h maximales : $Max[rainfall_1h] $Unit[Rainfall] à $MaxDate[rainfall_1h,%Hh%M]\t Total : $Cumul[relative_rainfall] $Unit[Rainfall]"/
    <font color="FF000000" size="15" weight="80" italic="0" />
   </text>
</textbox>

Pour peaufiner, on va rajouter deux "textbox", une pour le titre et une pour le copyright

 <textbox width="400" height="20" position-x="60" position-y="-1" margin="0" >
  <text alignement="left">
    <line text="Graphique des 24 dernières heures"/>
    <font color="FFFFFFFF" size="14" weight="600" italic="0" />
  </text>
</textbox>

<textbox width="150" height="20" position-x="300" position-y="235" margin="0" >
  <text alignement="left">
    <line text="Š Météo Villarzel"/>
    <font color="FFFFFFFF" size="14" weight="80" italic="0" />
  </text>
</textbox>

Pour plus de clarté, on ajoute encore un fond en couleur à la zone du graphique, on met deux couleurs color1 en bleu et color2 en blanc avec un dégradé grâce à la balise "gradient" et une direction du dégradé avec la balise "gradient-direction"

<graphbackground color1="FFCCCCFF" color2="FFFFFFFF" gradient="1" gradient-direction="90" />

Le code complet

 <?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
<image width="450" height="250"/>
<frame width="450" height="250" >
<background texture="mini.png"  stretch="1" />
</frame>
<lineplot width="395" height="145" position-x="35" position-y="45" margin-top="10" margin-right="10" margin-bottom="10" margin-left="10" >
<xaxis color="FF000000" grid="1" autoscale="0">
<labels labelinterval="1" side="left">
<font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
</labels>
<ticks majorticks="7" minorticks="5" side="bottom" />
</xaxis>
<y1axis color="FF000000" grid="1" autoscale="1" >
<labels labelinterval=".2" angle="0" format=".1" side="left" >
<font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
</labels>
<ticks majorticks="4" minorticks="4" side="left" />
</y1axis>
<data>
<relative_rainfall axisbind="y1axis" color1="660000FF" antialiasing="1" hidelegend="1" thick="1.2" />
<relative_rainfall axisbind="y1axis" legend="Précipitations" color1="660000FF" color2="330000FF" antialiasing="1" filled="1" />
</data>
<legend orientation="0" margin="5" width="250" position-x="40" position-y="20">
<font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</legend>
</lineplot>
<!-- =================Statistiques================= -->
<textbox width="380" height="20" shadow="0" position-x="40" position-y="210" margin="0" >
<text alignement="center">
<line text="Précipitations 1h maximales : $Max[rainfall_1h] $Unit[Rainfall] à $MaxDate[rainfall_1h,%Hh%M]\t Total : $Cumul[relative_rainfall] $Unit[Rainfall]"/>
<font color="FF000000" size="15" weight="80" italic="0" />
</text>
</textbox>
<!-- =================Texte haut================= -->
<textbox width="400" height="20" position-x="60" position-y="-1" margin="0" >
<text alignement="left">
<line text="Graphique des 24 dernières heures"/>
<font color="FFFFFFFF" size="14" weight="600" italic="0" />
</text>
</textbox>
  <!-- =================Texte copyright================= -->
<textbox width="150" height="20" position-x="300" position-y="235" margin="0" >
<text alignement="left">
<line text="Š Météo Villarzel"/>
<font color="FFFFFFFF" size="14" weight="80" italic="0" />
</text>
</textbox>
</stylesheet>

 

Il ne vous reste plus qu'à faire de même avec les autres sondes, température, pression, humidité, etc.

 

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