Je suis en train de créé un graphique de la température moyenne journalière du mois en cours.
Pour ce faire j'ai repris la partie PHP de ce graphique https://www.meteo-jarny.com/DY-graphiqu ... e-temp.php que Pascal m'a faite suite à mon problème de toolotip et que j'ai modifié
J'ai modifié la variable $anencours= date("Y") par $moisencours= date("m") et les deux variable $xlabel_m et $tabmois
Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysqli_connect.php");
// Récupération des données
$moisencours= date("m");
$sql = "SELECT Moy_T FROM noaa_jour WHERE Mois=$moisencours;";
$query = mysqli_query($conn,$sql);
$i=0;
while ($list = mysqli_fetch_assoc($query)) {
$dTemp[$i]=round($list['Moy_T']*1,1);// on arrondi à 1 chiffre après la virgule
$i++;
}
mysqli_free_result($query);
mysqli_close($conn);
$xlabel_m = array("01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31");
$tabmois = array("01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31");
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/js/themes/gray.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.js"></script>
<script type="text/javascript">
eval(<?php echo "'var dLabelm = ".json_encode($xlabel_m)."'" ?>);
eval(<?php echo "'var dTime = ".json_encode($tabmois)."'" ?>);
eval(<?php echo "'var dTemp = ".json_encode($dTemp)."'" ?>);
eval(<?php echo "'var moisencours = ".json_encode($moisencours)."'" ?>);
</script>
<script type="text/javascript">
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < dTime.length; i++) {
outarr[i] = [dTime[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: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
shortMonths: ['Jan.', 'Fév.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc'],
exportButtonTitle: "Exporter",
printButtonTitle: "Imprimer",
rangeSelectorFrom: "Du:",
rangeSelectorTo: "A:",
rangeSelectorZoom: "Période:",
resetZoom: 'RAZ Zoom',
resetZoomTitle: 'Initialiser 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",
printChart: "Imprimer le graphique",
exportButtonTitle: "Exporter image ou document",
printButtonTitle: "Imprimer le graphique",
loading: "Chargement...",
thousandsSep: ""
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'column',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
title: {
text: 'Température moyenne année '+moisencours,
style: {
color: '#BDBDBD',
fontWeight: 'bold'}
},
subtitle: {
text: 'Source: Météo Jarny',
x: -20
},
credits: {
text: '© Météo Jarny',
href: ''
},
xAxis: {
categories: dLabelm,
labels: {
rotation: 0,
align: 'center',
style: {
fontSize: '6px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{
title: {
text: '',
},
labels: {
formatter: function() {
return this.value +' °C';
},
style: {
color: '#BDBDBD'
}
},
}
],
legend: {
enabled: false,
x: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 1,
valueSuffix: ' °C',
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
}
},
series: [{
name: 'Température moyenne',
data: comArr(dTemp),
pointPadding: -0.1,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y1: 1 },
stops: [
[0, 'rgba(80, 120, 228, .7)'],
[1, 'rgba(255, 0, 0, .8)']
]}
}]
});
});
});
</script>
</head>
<body>
<table width="600" border="0" align="center">
<tr>
<td>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto" class="style1"></div>
<div align="center"></div>
</td>
</tr>
</table>
</body>
</html>
https://www.meteo-jarny.com/DY-graphiqu ... inique.php
J'ai fais plusieurs tests en modifiant la variable $moisencours, en ajoutant une autre variable qui pour avoir l'année en cours, sans succès.
