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