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

Privé

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
M. Hubert Verwilghen
Picardie WebMarketing
M. Patrick Puydebois
M. Thierry Hauuy
M. Francis Mirante


 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

 

 

Service Cron Gratuit

 

Tutoriel HighCharts

Tutoriel MySQL - Highcharts

Le graphique

On commence notre fameux graphique ?

Oui, on commence par installer l'appel des librairies, c'est du java script. Toujours dans le même fichier on ajoute.

<script type="text/javascript" src="../jquery.min.js"></script>           
<script type="text/javascript" src="../highcharts3/js/highcharts.js"></script>
<script type="text/javascript" src="../highcharts3/themes/grid.js"></script>
<script type="text/javascript" src="../highcharts3/js/modules/exporting.js"></script>

Modifiez les chemins d'accès selon la configuration de votre site et du nom que vous avez-mis pour votre dossier Highcharts
le script jquerry.min.js est obligatoire.
le script highcharts.js est obligatoire, c'est le script principal de la librairie highcharts.
Le script grid.js est falcutatif, c'est ce qui définit le graphisme général de votre graphique, il y a par défaut 5 thèmes prédéfinis. Exemple

template HighCharts

Pour changer un thème, remplacez dans la ligne le nom du fichier js
<script type="text/javascript" src="../highcharts3/themes/grid.js"></script>
<script type="text/javascript" src="../highcharts3/themes/dark-blue.js"></script>
<script type="text/javascript" src="../highcharts3/themes/dark-green.js"></script>
<script type="text/javascript" src="../highcharts3/themes/gray.js"></script>
<script type="text/javascript" src="../highcharts3/themes/skies.js"></script>
ÉVIDEMMENT IL NE FAUT METTRE QU'UN THÈME
Si vous choisissez de mettre un thème, vous pourrez quand même modifier l'aspect du graphique avec les API highcharts.

Exemple : vous mettez <script type="text/javascript" src="../highcharts3/themes/dark-blue.js"></script> et vous obtiendrez ceci
Exemple : vous mettez <script type="text/javascript" src="../highcharts3/themes/dark-green.js"></script> et vous obtiendrez ceci
Exemple : vous mettez <script type="text/javascript" src="../highcharts3/themes/gray.js"></script> et vous obtiendrez ceci
 
Le script exporting.js sert uniquement à afficher l'icône exportation en haut et à droite des graphiques
graphiques  HighCharts

On commence avec le code propre au graphique, toutes ces fonctions sont disponible dans l'aide de Highcharts (API)
http://www.highcharts.com/docs documentation générale
http://api.highcharts.com/highcharts les codes API
je vous expliquerais plus tard comment faire certaines modifications avec les API

 
Toujours dans le même fichier, à la suite, on insert le code Highcharts, étant donné que c'est du java script, on commence avec la balise js.
<script type="text/javascript"> 
Ensuite on défini la fonction (temps) pour l'axe x
<script type="text/javascript">
function comArr(unitsArray) { 
var outarr = [];
for (var i = 0; i < time.length; i++) {
outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
}
On défini les options générales et l'option de traduction
<script type="text/javascript">
function comArr(unitsArray) { 
var outarr = [];
for (var i = 0; i < time.length; i++) {
outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
} $(function () {
var chart;
$(document).ready(function() {
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
lang: {
months: ["Janvier "," Février "," Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre "," Octobre "," Novembre "," Décembre"],
weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct ', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printChart: "Imprimer le graphique",
loading: "Chargement..."
}
});

Vous pouvez modifier les textes (traduction) en vert, ne touchez pas le reste du code, ce code sera la base de tous vos graphiques.



On défini les caratéristiques générales du graphique
chart = new Highcharts.Chart({
chart: { renderTo: 'container', zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
renderTo: 'container', = c'est le nom de votre graphique, vous devez attribuer un nom unique à chaque graphique
zoomType: 'x', = indique le type de zoom que vous autorisez sur votre graphique x, y ou yx si vous ne mettez rien il ne sera pas possible de zoomer
type: 'spline', = le type du tracé Y, line, spline, column, area, pie, bar, etc...
marginRight: 10, = la marge de droite en pxs
marginBottom: 60, = la marge inférieure pxs
plotBorderColor: '#346691', = la couleur de la bordure extérieure
plotBorderWidth: 1, = la largeur de la bordure extérieure

On ajoute un titre au graphique.
On peut le positionner en x et y soit en pxs ou par exemple center, left, right, ect...

title: {
                text: 'Températures des dernières 48 heures',
                x: -20 
            },
On peut aussi rajouter un sous-titre
subtitle: {
text: 'Source: Météo Villarzel',
x: -20
},
Le credit, est le texte qui apparaît en bas à droite du graphique, par défaut c'est "highcharts.com" mais on peut le modifier
credits: {
text: '© Météo Villarzel',
href: 'http://www.boock.ch/meteo-villarzel.php'
},
Par égard au heures passées à faire ce tutoriel, merci de laisser ce code si vous utilisez ces scripts, de ne pas vous en attribuer la paternité directement (en mettant votre nom) ou indirectement (sans en indiquer la provenance).


On défini l'axe x
xAxis: {
type: 'datetime',
startOnTick: false,
},

startOnTick = false ou true



On défini l'axe y
Option : plotLines défini une ligne sur l'axe y à "value" 0°c dans cet exemple, avec un trait de 1pxs de largeur "width"et de couleur rouge
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#FF0000'
}]
},
Tutoriel HighCharts


On défini le "tooltip" c'est la légende qui s'affiche au passage de la souris sur une courbe
graphique HighCharts
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Point de rosée': ' °C',
'Température': ' °C',
'Facteur vent' : '',
'Humidex' : ''
}[this.point.series.name];
s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + ' </span> : '
+Highcharts.numberFormat(point.y,1,","," ") + unit;
});
return s;
},
},

Le "crosshairs" est une ligne qui montre la position xy de la souris sur le graphique.
[true], = Uniquement sur l'axe x
[true, true], = sur l'axe x et y
[false], = pas de ligne

borderColor: '#4b85b7', = la couleur de la bordure du tooltip

shared: true, = tooltip visible
shared: false, = tooltip invisible

backgroundColor: '#edf1c8', = la couleur du fond du tooltip

Highcharts.dateFormat('%e %B à %H:%M', this.x) = le format de la date (axe x)

var unit = {
'Point de rosée': ' °C',
'Température': ' °C',
'Facteur vent' : '',
'Humidex' : ''

Var unit permet d'avoir des unités différentes pour chaque courbes (axe y) le nom doit être identique que le nom de la série.


On supprime les marqueurs sur les courbes, car il y en a trop et ça nuit à la visibilité.

Tutoriel HighCharts

plotOptions: {
series: {
marker: {
enabled: false
}
}
},
Voilà on touche au but, il reste à définir les données "data" de l'axe y
series: [ 
{
name: 'Température',
zIndex: 1,
color: '#ff0000',
data: comArr(outdoortemperature)
},
{
name: 'Point de rosée',
color: '#3399FF',
data: comArr(dewpoint)
},
{
name: 'Facteur vent',
color: '#40e0d0',
dashStyle: 'LongDash',
data: comArr(windchill),
},
{
name: 'Humidex',
color: '#bd005c',
dashStyle: 'ShortDash',
data: comArr(outdoorheatindex),
}
]

name: 'Température', = c'est le nom que vous voulez indiquer pour votre courbe
zIndex: 1, = ici j'ai mis un zIndex pour indiquer que cette courbe est en premier plan
color: '#ff0000', = la couleur de votre courbe
data: comArr(outdoortemperature) = et enfin le nom des données à tracer

On fait la même chose pour les 3 autres données.

Il ne reste plus qu'à fermer les accolades et les parenthèses. On ferme la balise script et head
 
        });
});
});
</script>
</head>
Maitenant il ne reste plus qu'à afficher le graphique dans le corps "body" de la page et on ferme la balise html
<body>
<div id="container" style="width: 550px; height: 300px; margin: 0 auto"></div>
</body>
</html>
id="container" = C'est le nom que vous avez défini au début dans "renderTo: 'container', "
style="width: 550px; height: 300px; = la largeur et la hauteur que vous voulez donner à votre graphique.
Votre graphique est terminé.

 

Untitled Document


Este tutorial también está disponible en español
This tutorial is also available in in English
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.
Stations amies

 

MySQL - Highcharts  page n°4
Highcharts, mon premier graphique.