Mto Villarzel Suisse

Impacts de foudre
Ephéméride - PDA Prévisions Alertes - Dangers Température Pression - Humidité Solaire et UV Rayonnement solaire Pluviométrie Vent Agriculture Chauffage Danger feux de forêt Rapports annuels - Journal Info station Activité sismique Astronomie Divers / Liens / Explications Créations / GW / Tutoriels Evénement météo

Hors météo Broye Mon étang Consommation électrique Pompe àchaleur Panneaux solaire Serre

Livre d'Or

Forum Highcharts

Version pour mobile




Merci à nos donateurs:
M. Blanc
M. JavierMartinez
M. Viktor
M. Emanuel Roggen
M. Raphaël Chochon
M. José Luis Sanchez
M. Daniel Stuyck
M. Jean-Pierre Tonnele
M. Benoist Lerouge
M. Pierre Sabatier

M. Patrick Ollivier
M. Michel Le Viol
M. César López
M. Didier Mestric
M. Francesco Paolo Trapani
M. Charles Durand
M. Philippe Blanchard
M. Benjamin Leblic
Philippe Dupertuys
M. Jaume Mas Ferrer
M. Daniel Lavocat
M. Jean-Pierre Bernard
M.Gérard Egger
M. Jean-Claude Birade
M. Dominique Herraire
M. Eric Lemoine
M. Jean Gabriel Boulet
M. Olivier Bovel
M. Arnaud Rahier
M. Bruno Goyac
M. Jean Michel Vouillot
M. Sarah Cordeau
M. Jean-Pierre Grieu
M. Loic Roulin
M. Michel Beel
M. Dominique Gautheron


 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

France : 35
Suisse : 7
Belgique : 6
Canada : 1
Maroc : 1
Polynésie française : 1
États-Unis : 1

 

Service Cron Gratuit

 

Tutoriel feuille de style pour GraphWeather <stylesheet>

Mon premier graphique.

- But, créer un graphique avec la température, l'humidité extérieure, la pression relative et un cadre de statistiques.
A la fin votre graphique resemblera à ça cliquez sur la loupe tout au long du tutoriel pour voir le résultat

 

Pour créer ou éditer une feuille de style xml, utilisez de préférence Notepad++ ou PSpad car avec la colorisation syntaxique c'est plus facile de se retrouver dans les lignes de codes.


1 - Les bases du graphique

 

Ouvrez un fichier vide avec votre éditeur de texte préféré et enregistrez-le ou vous voulez avec l'extension xml (par exemple mongraphique.xml)

Pour commencer, on va indiquer la déclaration du fichier avec l'encodage des caractères et placer les balises "stylesheet". Tout le code que nous allons créer devra être placé entre ces deux balises.

 

 <?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet> </stylesheet>
 

Ensuite nous allons définir la grandeur de notre image en pixels ( largeur et hauteur). C'est la feuille sur laquelle nous allons dessiner notre graphique.

 
 <image width="800" height="500" />
 

Maintenant nous allons ajouter le cadre avec la balise "frame" qui va servir d'arrière plan aux graphes qu'on lui superpose, lui indiquer la largeur et la hauteur ainsi que sa position dans la feuille avec les coordonnées x et y

 
 <frame width="800" height="500" position-x="0" position-y="0">
</frame>
 

Nous allons encore rajouter un cadre avec un arrondi "border cornerradius" de 10pxs une couleur noir et une épaisseur de trait "thick" de 1 px

 
 <border cornerradius="10" color="FF909090" thick="1" />
 

ainsi qu'une couleur de fond

 
 <background color="0000000" />
 

Maintenant votre résultat doit être:

 
 <?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
<image width="800" height="500" color="FFFFS0000"/>
<background color="00000000" stretch="1" />
<!-- ================= Cadre ================= -->
<frame width="800" height="500" position-x="0" position-y="0">
<border cornerradius="10" color="FF909090" thick="1" />
<background color="0000000" />
</frame>
</stylesheet>

Vous avez remarqué cette ligne <!-- ================= Cadre ================= --> c'est un commentaire, ce n'est pas obligatoire, mais cela permet de bien différentier les éléments de la feuille de style, vous pouvez mettre vos propres annotations.
Notez que tout le code se situe entre les balises <stylesheet>.

 

A ce stade, votre page doit être visible dans GraphWeather, je vous conseille de garder votre fichier ouvert dans votre éditeur de texte et dans GraphWeather, ainsi avec le bouton "Recharger" vous pouvez voir le résultat sur votre graphique à chaque changement de la feuille de style.

 
 

Maintenant que nous avons notre feuille de dessin avec notre cadre, nous allons pouvoir créer un graphique dans ce cadre.

 


Nous allons créer un graphique avec la balise "lineplot", le graphique aura une dimension de 800pxs par 250 pxs et positionné à 80 pxs du haut et du bord gauche, nous pourrons adapter ces valeurs par la suite.

 
<lineplot width="600" height="250" 
            position-x="80" position-y="80">
</lineplot>

Vous remarquerez que l'axe x a été créé, maintenant nous allons le mettre en forme avec la balise "xaxis"

 

Nous allons lui indiquer une couleur, une grille et une mise à l'échelle automatique ainsi qu'un titre "title"

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

Nous allons aussi mettre en forme les étiquettes de données "labels"

 
<labels labelinterval="1" angle="0" side="left" hide="0">
<font color="FF000000" facename="Arial" size="12" weight="400" italic="1" />
</labels>
 

Il ne nous reste plus qu'à indiquer la densité des valeurs et de la grille de l'axe x "ticks"

 
<ticks majorticks="7" minorticks="3"  />
 

Maintenant votre résultat doit être:

 
<?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="80CCFFFF" />
</frame>
<lineplot width="600" height="250" position-x="80" position-y="80">
<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>
</lineplot>
</stylesheet>

Nous allons procéder de la même mannière pour l'axe Y "y1axis" celui qui affichera les valeurs de la température extérieure, nous allons le tracer avec une couleur rouge

 
 <y1axis color="FFFF0000" grid="1" autoscale="1">
<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" />
</y1axis>

Vous remarquerez qu'avec l'échelle "autoscale" à 1 c'est à dire une échelle automatique, les balises "ticks" ne sont pas prises en compte, nous allons les laisser afin de pouvoir facilement modifier ce paramètre si nécessaire.

 
Pour terminer l'axe y1, nous allons lui rajouter un titre "title", dans notre exemple la température extérieure
 
<title text="Température ($Unit[Temperature])" alignement="vcenter|hcenter" angle="0">
<font color="FFFF0000" facename="Arial" size="14" weight="400" italic="1" />
</title>
Bon ce n'est pas très réussi le titre est dans le graphique, pas de panique nous allons le déplacer avec la balise "titlemargin"
 
<y1axis color="FFFF0000" grid="1" autoscale="1" titlemargin="-35">
 

Pour finir nous allons encore mettre une couleur sur le fond du graphique avec la balise "background"

 <background color="ffffffff" />

Le résultat est déjà plus sympathique.

 

 

Voici le résultat du code avec nos deux axes x et y

 
 <?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="80CCFFFF" />
</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>

</lineplot>
</stylesheet>
 
   

Bon c'est bien joli, mais vous allez me dire qu'il n'y a toujours pas de courbes affichées !!!

 

On y vient, un petit pour se reposer les méninges et on passe à la page suivante

 
 

 
Untitled Document

Vous avez aimé ce tutoriel, il vous a rendu service,
alors dites-le-moi.
Ou aidez-moi à maintenir ce site en fonction.
     
  Untitled Document
Station Davis Vantage Pro 2 + station agricole - Weatherlink 6.0.0 - GraphWeather 3.0.15
© 2010-2013, Météo Villarzel - Webmaster Aubert Pierre-André

Attention, les données météo publiées sur ce site sont issues d'une station météo personnelle et ne sont données qu'à titre indicatif,
elles ne peuvent en aucun cas être utilisées pour garantir la protection des personnes ou de biens quelconques.
Merci au webmaster de ces sites pour leur aide à la conception du site météo Villarzel
Merci à Javier pour son soutien