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

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

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' }] },
On défini le "tooltip" c'est la légende qui s'affiche au passage de la souris sur une courbe
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é.
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é.

 

page 01 Chargement de la base de donnée page 02 Accèder à la base de données page 03 Récupération et mise en forme des données. page 04 Highcharts, mon premier graphique. page 05 Highcharts, mon premier graphique, récapitulatif. page 06 Mon deuxième graphique, la pluviométrie. page 07 Un graphique avec plusieurs axes Y page 08 Personnalisation avec l'api Highcharts page 09 Highstock Késako ? page 10 Le forum Highcharts 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.