Marqueurs main/max chaque jour
Modérateurs : jturlier, Météo Villarzel
Marqueurs main/max chaque jour
Bonjour,
J'ai un graphique Highcharts avec Datetime en X et des températures en Y.
Je souhaite mettre des marqueurs sur les valeurs min et max pour chaque jour.
Comme ceci :
Un essai en ligne : http://www.egloff.eu/apaguard_mini/apaguard_graph.php
Est-ce que Highcharts sait faire ça ou dois-je m'y prendre autrement ?
Merci,
J'ai un graphique Highcharts avec Datetime en X et des températures en Y.
Je souhaite mettre des marqueurs sur les valeurs min et max pour chaque jour.
Comme ceci :
Un essai en ligne : http://www.egloff.eu/apaguard_mini/apaguard_graph.php
Est-ce que Highcharts sait faire ça ou dois-je m'y prendre autrement ?
Merci,
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Marqueurs main/max chaque jour
Bonsoir
il y a une fonction pour récupérer les valeurs max et min, mais uniquement sur la plage totale affichée du graphique
extremes.dataMax
extremes.dataMin
il faut regarder dans les API
https://api.highcharts.com/class-refere ... l#Extremes
Je ne pense pas que c'est possible directement avec Highcharts, mais il faut récupérer ces données en php et ensuite les afficher sur une nouvelle courbe transparente avec uniquement l'affichage des valeurs
par ex:
http://jsfiddle.net/paaubert/Lzbt5gw0/1/
A+
il y a une fonction pour récupérer les valeurs max et min, mais uniquement sur la plage totale affichée du graphique
extremes.dataMax
extremes.dataMin
il faut regarder dans les API
https://api.highcharts.com/class-refere ... l#Extremes
Je ne pense pas que c'est possible directement avec Highcharts, mais il faut récupérer ces données en php et ensuite les afficher sur une nouvelle courbe transparente avec uniquement l'affichage des valeurs
par ex:
http://jsfiddle.net/paaubert/Lzbt5gw0/1/
A+
Re: Marqueurs main/max chaque jour
Merci pour la réponse,
J'en étais arrivé à cette conclusion...
Il ne me reste plus qu'à trouver la bonne requête SQL !
J'ai fait quelques essais, mais je tourne en rond..
Merci,
J'en étais arrivé à cette conclusion...
Il ne me reste plus qu'à trouver la bonne requête SQL !
J'ai fait quelques essais, mais je tourne en rond..
Merci,
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Marqueurs main/max chaque jour
Bonjour à tous
Serait-ce cela que tu cherche tk5ep (ton prénom serait mieux)
https://www.monsite-meteo.eu/Page/essai ... r jour.php.
Il faut passer par 2 requêtes SQL qui n'ont pas le même nombre de données
Il faut alors les traiter en PHP pour avoir le même nombre d'enregistrements en donnant la valeur null aux enregistrements manquants pour qu'il ne s'affichent pas sur le graphique.
Je ne sait pas si tu utilise le même type de données que nous auquel cas il faudra adapter le code.
Si tel est le cas, voici le code
Sympa le Pascal
Bonne journée
A+
Pascal
Serait-ce cela que tu cherche tk5ep (ton prénom serait mieux)
https://www.monsite-meteo.eu/Page/essai ... r jour.php.
Il faut passer par 2 requêtes SQL qui n'ont pas le même nombre de données
Il faut alors les traiter en PHP pour avoir le même nombre d'enregistrements en donnant la valeur null aux enregistrements manquants pour qu'il ne s'affichent pas sur le graphique.
Je ne sait pas si tu utilise le même type de données que nous auquel cas il faudra adapter le code.
Si tel est le cas, voici le code
Code : Tout sélectionner
<?php
// appel du script de connexion
require("../Scripts/mysqli_connect.php");
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query = mysqli_query($conn,$sql);
$list=mysqli_fetch_array($query);
// On détermine le stop et le start de façon à récupérer dans la prochaine requête que les données des dernières xx heures
$stop=$list[0];
$start=$stop-(86400*7);
// Récupération des données 7 derniers jours avec un tri ascendant sur le timestamp
$j=0;
$sql2="SELECT tstamp,TStamp_t_out_mini,t_out_mini, TStamp_t_out_maxi,t_out_maxi FROM MiniMaxidata WHERE tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query = mysqli_query($conn,$sql2);
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0) {
$DHTMin[$j]=($list['TStamp_t_out_mini']+3600)*1000;
$DHTMax[$j]=($list['TStamp_t_out_maxi']+3600)*1000;
}
else {
$DHTMin[$j]=($list['TStamp_t_out_mini']+7200)*1000;
$DHTMax[$j]=($list['TStamp_t_out_maxi']+7200)*1000;
}
$TminTemp[$j] = $list['t_out_mini']*1;
$TmaxTemp[$j] = $list['t_out_maxi']*1;
$j++;
};
$sql1 = "SELECT tstamp, outdoortemperature FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query = mysqli_query($conn,$sql1);
$i=0;
$k=0;
$l=0;
$j=$j-1;
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0) {
$DHT[$i]=($list['tstamp']+3600)*1000;
}
else {
$DHT[$i]=($list['tstamp']+7200)*1000;
}
$outdoortemperature[$i] = $list['outdoortemperature']*1;
$TMin[$i]=null;
$TMax[$i]=null;
if($DHTMin[$k] == $DHT[$i]){
$TMin[$i] = $TminTemp[$k];
$k++;
if($k > $j){$k=$j;}
}
if($DHTMax[$l] == $DHT[$i]){
$TMax[$i] = $TmaxTemp[$l];
$l++;
if($l > $j){$l=$j;}
}
$i++;
}
$FermerConnexion= mysqli_close($conn);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La température des dernières 48 heures à Conflans en Jarnisy</title>
<meta name="description" content="Graphique dynamique des températures (température, humidex, windchill, point de rosée) relevées par la station Davis Instrument Vantage PRO2 Plus de Météo Conflans en Jarnisy ces dernières 48 heures">
<meta name="robots" content="index,follow">
<meta name="category" content="education, information, weather, météo">
<meta http-equiv="Content-Language" content="fr" />
<link href="../css/Styles commun.css" rel="stylesheet" type="text/css" hreflang="fr" charset="UTF-8">
<script type="text/javascript">
eval(<?php echo "'var DHT = ".json_encode($DHT)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var TMin = ".json_encode($TMin)."'" ?>);
eval(<?php echo "'var TMax = ".json_encode($TMax)."'" ?>);
</script>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/highcharts-more.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/themes/grid.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="../Scripts/overlib.js"></script>
<script type="text/javascript" src="../Scripts/overlib_fade.js"></script>
<script type="text/javascript" src="../Scripts/formatNombre.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < DHT.length; i++) {
outarr[i] = [DHT[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: 'Réinitialiser le zoom',
resetZoomTitle: 'Réinitialiser le 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',
printButtonTitle: 'Imprimer le graphique',
printChart: 'Imprimer le graphique',
loading: 'Chargement en cours...'
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
panning: true,
panKey: 'shift',
type: 'spline',
alignTicks: false,
spacingLeft: 1,
spacingRight: 5,
marginTop: 70,
//marginLeft: 95,
//marginRight: 30,
marginBottom: 75,
borderRadius: 10,
backgroundColor: {
linearGradient: [0, 0, 0, 570],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
plotBorderColor: '#000000',
plotBorderWidth: 1,
plotBackgroundColor: '#F5F5F5',
plotShadow: true,
},
title: {
text: 'Température avec mini et maxi journalier sur 7 jours',
align: 'center',
style: {
font: 'italic bold 18px "Comic Sans MS", Verdana, sans-serif',
color: '#0000A0',
},
x: 0 //center
},
subtitle: {
text: 'Source : Météo Conflans en Jarnisy',
align: 'center',
x: 0
},
credits: {
text: '© Météo Conflans en Jarnisy 2017',
href: ''
},
legend: {
align: 'center',
verticalAlign: 'center',
x: 0,
y: 515,
borderColor: 'royalblue',
borderWidth: 1,
borderRadius: 5,
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
layout: 'horizontal',
shadow: true,
},
tooltip: {
crosshairs: true,
borderColor: 'royalblue',
shared: true,
backgroundColor: {
linearGradient: [0, 0, 0, 100],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
borderRadius: 5,
useHTML: true,
formatter: function() {
var s = '<span style="color:#FF0000; text-shadow:#900; font-size:14px"><b>' + Highcharts.dateFormat('%a %e %B à %H h %M mn', this.x) + '</b></span><table width="220px" style="border-top:ridge; font-size:12px">';
$.each(this.points, function(i, point) {
var unit = {
'Température': ' °C',
'Température Maxi': ' °C',
'Température Mini': ' °C',
}[this.point.series.name];
s = s + '<tr><td style="color:'+ point.series.color + '">' + point.series.name + '</td><td style="text-align: center"><b>:</td>'
s = s + '<td style="text-align: right"><b>' + Highcharts.numberFormat(point.y,1,","," ") + '</b></td><td style="text-align : left; color:'+ point.series.color + '">'+ unit +'</td></tr>'
});
s = s +'</table>'
return s;
},
},
xAxis: {
type: 'datetime',
alternateGridColor:'#FBD6FE',
tickInterval: 24 * 3600 * 1000,
gridLineColor:'#000000',
gridLineDashStyle:'ShortDashDotDot',
gridLineWidth: 1,
startOnTick: false,
},
yAxis: [{
gridLineWidth: 0,
lineColor: '#B70000',
lineWidth: 2,
tickColor: '#B70000',
tickWidth: 2,
tickInterval: 2,
minorTickInterval: 1,
startOnTick: true,
labels: {
y: 3,
formatter: function() {
return this.value +' °C';
},
style: {
color: '#B70000'
}
},
title: {
text: 'Température en °C',
style: {
color: '#B70000'
}
},
}],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Température',
data: comArr(outdoortemperature),
},
{
name: 'Température Mini',
data: comArr(TMin),
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'center',
verticalAlign:'top',
format:'{y} °C'
},
},
{
name: 'Température Maxi',
data: comArr(TMax),
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'center',
verticalAlign:'bottom',
format:'{y} °C'
},
},
]
},
function(chart) { // on complete
chart.renderer.image('http://www.monsite-meteo.eu/Images/BlasonConflansEnJarnisy1953.png', 10, 10, 45, 50)
.add()
chart.renderer.image('http://www.monsite-meteo.eu/Images/BlasonMeurthe-et-Moselle.png', 1011, 10, 39, 50)
.add();
});
});
});
/**
* @license
* Highcharts compatibilty pack for bringing the 2.x look for the print/export buttons back in Highcharts 3.
* License: MIT
* Author: Torstein Honsi
*/
(function (Highcharts) {
var defaultOptions = Highcharts.getOptions(),
symbols = Highcharts.Renderer.prototype.symbols,
extend = Highcharts.extend,
merge = Highcharts.merge;
// Add language keys
extend(defaultOptions.lang, {
exportButtonTitle: 'Export to raster or vector image',
printButtonTitle: 'Print the chart'
});
// The old button look
defaultOptions.navigation.buttonOptions = merge(defaultOptions.navigation.buttonOptions, {
borderColor: '#B0B0B0',
height: 20,
theme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#DDD']
]
},
stroke: '#BBB'
},
symbolSize: 12,
symbolStroke: '#A0A0A0',
symbolStrokeWidth: 1
});
// Add the buttons to default options
extend(defaultOptions.exporting.buttons, {
exportButton: {
//enabled: true,
symbol: 'exportIcon',
x: -60,
symbolFill: '#A8BF77',
_id: 'exportButton',
_titleKey: 'exportButtonTitle',
menuItems: defaultOptions.exporting.buttons.contextButton.menuItems.splice(2, 4)
},
printButton: {
//enabled: true,
symbol: 'printIcon',
x: -86,
symbolFill: '#B5C9DF',
_id: 'printButton',
_titleKey: 'printButtonTitle',
onclick: function () {
this.print();
}
}
});
delete defaultOptions.exporting.buttons.contextButton;
/**
* Crisp for 1px stroke width, which is default. In the future, consider a smarter,
* global function.
*/
function crisp(arr) {
var i = arr.length;
while (i--) {
if (typeof arr[i] === 'number') {
arr[i] = Math.round(arr[i]) - 0.5;
}
}
return arr;
}
// Create the export icon
symbols.exportIcon = function (x, y, width, height) {
return crisp([
'M', // the disk
x, y + width,
'L',
x + width, y + height,
x + width, y + height * 0.8,
x, y + height * 0.8,
'Z',
'M', // the arrow
x + width * 0.5, y + height * 0.8,
'L',
x + width * 0.8, y + height * 0.4,
x + width * 0.4, y + height * 0.4,
x + width * 0.4, y,
x + width * 0.6, y,
x + width * 0.6, y + height * 0.4,
x + width * 0.2, y + height * 0.4,
'Z'
]);
};
// Create the print icon
symbols.printIcon = function (x, y, width, height) {
return crisp([
'M', // the printer
x, y + height * 0.7,
'L',
x + width, y + height * 0.7,
x + width, y + height * 0.4,
x, y + height * 0.4,
'Z',
'M', // the upper sheet
x + width * 0.2, y + height * 0.4,
'L',
x + width * 0.2, y,
x + width * 0.8, y,
x + width * 0.8, y + height * 0.4,
'Z',
'M', // the lower sheet
x + width * 0.2, y + height * 0.7,
'L',
x, y + height,
x + width, y + height,
x + width * 0.8, y + height * 0.7,
'Z'
]);
};
}(Highcharts));
</script>
</head>
<body background="../Images/PapierGris.jpg">
<table width="1060" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="820" align="center" valign="top">
<div align="center">
<span class="TitreDePage">La température extérieure</span>
</div>
<div align="right">
<a style="align: right" href="" onMouseOver="return overlib('<ul><li>Vous pouvez zoomer sur une zone spécifique d'un graphique en maintenant le bouton de la souris et en faisant glisser le curseur à l'intérieur du graphique.<li>En mode zoom, cliquez et en même temps, maintenez la touche Maj (Shift) du clavier enfoncée pour déplacer le graphique vers la droite ou la gauche.<li>Vous pouvez changer la façon dont les mesures sont affichées dans un graphique en cliquant dans la légende sur le nom de la donnée dont vous voulez modifier l'affichage.<li> Les graphiques sont automatiquement mis à jour toutes les 5 minutes</ul>',OPACITY, 90, LEFT, FGCOLOR, '#b5cee1', BGCOLOR, '#4682b4', BORDER, 2, WIDTH, 250, TEXTSIZE, 2, CAPTION, 'Informations' ,CAPTIONSIZE,'3');" onMouseOut="return nd();"><img src="../Images/info.png" width="40" height="40" border="0" align="absmiddle"></a>
<a href="javascript:void(0);" onMouseOver="return overlib('Actualiser le graphique', OPACITY, 90, LEFT, FGCOLOR, '#b5cee1', TEXTSIZE,'2', WIDTH, 160 );" onMouseOut="return nd();"><img src="../Images/refresh.png" width="42" height="43" align="absmiddle" onClick="javascript:location.reload();"></a>
</div>
<div id="container" style="width: 1060px; height: 570px; margin: 0"></div><br>
</td>
</tr>
</table>
</body>
</html>
Bonne journée
A+
Pascal
Modifié en dernier par PascalWMR le 10 mars 2019, 10:35, modifié 1 fois.
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Météo Conflans-en-Jarnisy
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Marqueurs main/max chaque jour
Salut Pascal,
Good job, tu maîtrises comme un chef
Il commence à faire plutôt frais dans nos contrées, tu as de la neige par chez toi ?
Ici il y a déjà neigé presque 15cm.
Bonne soirée
A+
Good job, tu maîtrises comme un chef
Il commence à faire plutôt frais dans nos contrées, tu as de la neige par chez toi ?
Ici il y a déjà neigé presque 15cm.
Bonne soirée
A+
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Marqueurs main/max chaque jour
Salut Pierre-André
Oui oui on a un peu de neige.
On a eu un peu de pluie verglaçante hier.
Ce qui ne m’enchante pas c'est que ce matin je vais à Pontarlier par les petites routes du Valdhaon.
Alors à 44 T c'est moins rigolo.
Bonne journée
A+
Pascal
Oui oui on a un peu de neige.
On a eu un peu de pluie verglaçante hier.
Ce qui ne m’enchante pas c'est que ce matin je vais à Pontarlier par les petites routes du Valdhaon.
Alors à 44 T c'est moins rigolo.
Bonne journée
A+
Pascal
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Météo Conflans-en-Jarnisy
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Marqueurs main/max chaque jour
Salut Pascal,
cool ton graphique, je l'ai adopté aussi sec
http://www.boock.ch/meteo/graphiques_dy ... re_48h.php
Encore merci
A+
cool ton graphique, je l'ai adopté aussi sec
http://www.boock.ch/meteo/graphiques_dy ... re_48h.php
Encore merci
A+
Re: Marqueurs main/max chaque jour
Moi aussi:http://www.lafrancaise-meteo.fr/graph_t ... i_maxi.php
Merci Pascal
Merci Pascal
Jean-Yves
Davis Vantage Pro 2 sans fil
VirtualVP+ Cumulus+ Graphweather v3+ Cumulus2Sql +Wampserver (en local)
Windows 10 64bits - hébergé par Hostpapa
Membre de Blitzortung
https://www.lafrancaise-meteo.fr
Davis Vantage Pro 2 sans fil
VirtualVP+ Cumulus+ Graphweather v3+ Cumulus2Sql +Wampserver (en local)
Windows 10 64bits - hébergé par Hostpapa
Membre de Blitzortung
https://www.lafrancaise-meteo.fr
Re: Marqueurs main/max chaque jour
Bonjour à tous ceux qui sont en ligne!
J'ai un souci avec mon graphique température mini maxi avec marqueurs. En effet depuis plusieurs jours les marqueurs ne s'affichent plus. Sachant que je n'ai effectué aucune modification, d'où cela peut-il provenir?http://www.lafrancaise-meteo.fr/graph_t ... i_maxi.php]
Merci de vos suggestions
J'ai un souci avec mon graphique température mini maxi avec marqueurs. En effet depuis plusieurs jours les marqueurs ne s'affichent plus. Sachant que je n'ai effectué aucune modification, d'où cela peut-il provenir?http://www.lafrancaise-meteo.fr/graph_t ... i_maxi.php]
Merci de vos suggestions
Jean-Yves
Davis Vantage Pro 2 sans fil
VirtualVP+ Cumulus+ Graphweather v3+ Cumulus2Sql +Wampserver (en local)
Windows 10 64bits - hébergé par Hostpapa
Membre de Blitzortung
https://www.lafrancaise-meteo.fr
Davis Vantage Pro 2 sans fil
VirtualVP+ Cumulus+ Graphweather v3+ Cumulus2Sql +Wampserver (en local)
Windows 10 64bits - hébergé par Hostpapa
Membre de Blitzortung
https://www.lafrancaise-meteo.fr
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Marqueurs main/max chaque jour
Salut
Le problème vient de la table minmax qui pour je ne sais quelles raisons ne remplit pas correctement les min et max uniquement certains jours
regarde ton code source
eval('var DHT = [1520256180000,1520256480000,1520256780000,1....
eval('var outdoortemperature = [11.9,11.8,11.8,11.9,11.9,11.8,11.8....
eval('var TMin = [null,null,null,null,null,null,null,null,....
eval('var TMax = [null,null,null,null,null,null,.....
On voit bien aussi le problème sur ce graphique
http://www.boock.ch/meteo/graphiques_dy ... minmax.php
De temps en temps j'ai une amplitude a 0 ou 0.1°C sur la journée, ce qui n'est pas correct.
A+
Le problème vient de la table minmax qui pour je ne sais quelles raisons ne remplit pas correctement les min et max uniquement certains jours
regarde ton code source
eval('var DHT = [1520256180000,1520256480000,1520256780000,1....
eval('var outdoortemperature = [11.9,11.8,11.8,11.9,11.9,11.8,11.8....
eval('var TMin = [null,null,null,null,null,null,null,null,....
eval('var TMax = [null,null,null,null,null,null,.....
On voit bien aussi le problème sur ce graphique
http://www.boock.ch/meteo/graphiques_dy ... minmax.php
De temps en temps j'ai une amplitude a 0 ou 0.1°C sur la journée, ce qui n'est pas correct.
A+