Choix multiple de la période sur les graphiques
Modérateurs : jturlier, Météo Villarzel
Choix multiple de la période sur les graphiques
Bonjour,
Je commence à utiliser highchart.
Est-il possible, avec des boutons radios ou par sélection de date de début et de fin, de modifier à la volée la période d'affichage d'un graphe highchart dans une page PHP ?
Je n'ai pas trouver comment faire.
Merci pour votre aide.
Michel
Je commence à utiliser highchart.
Est-il possible, avec des boutons radios ou par sélection de date de début et de fin, de modifier à la volée la période d'affichage d'un graphe highchart dans une page PHP ?
Je n'ai pas trouver comment faire.
Merci pour votre aide.
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
- PascalWMR
- Messages : 323
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Choix multiple de la période sur les graphiques
Bonjour
Oui c'est possible.
2 solutions.
Soit on utilise HighStock au lieu de HighCharts (dans le cas ou il n' a pas trop de données à afficher)
Soit on utilise AJAX pour recharger un lot de données.
Cette page qui affiche 6 mois de donnés utilise HighStock
https://www.meteoconflans2.monsite-mete ... lative.php
Cette page qui utilise HighMap au lieu de HighChart et un plus grand nombre de données différentes, les extraits via AJAX
https://www.meteoconflans2.monsite-mete ... rature.php
Je t'en explique plus quand je serai rentré
A+
Pascal
Oui c'est possible.
2 solutions.
Soit on utilise HighStock au lieu de HighCharts (dans le cas ou il n' a pas trop de données à afficher)
Soit on utilise AJAX pour recharger un lot de données.
Cette page qui affiche 6 mois de donnés utilise HighStock
https://www.meteoconflans2.monsite-mete ... lative.php
Cette page qui utilise HighMap au lieu de HighChart et un plus grand nombre de données différentes, les extraits via AJAX
https://www.meteoconflans2.monsite-mete ... rature.php
Je t'en explique plus quand je serai rentré
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
![Image](https://monsite-meteo.eu/Images/BandeauMeteoConflansEnJarnisy468x60.png)
Météo Conflans-en-Jarnisy
![Image](https://monsite-meteo.eu/Images/BandeauMeteoConflansEnJarnisy468x60.png)
Re: Choix multiple de la période sur les graphiques
Bonjour Pascal,
Merci pour cette réponse très matinale !....
La page utilisant highstock correspond tout à fait à ce que je cherche. Dans mes essais je m'était inspiré de l'exemple fourni par P.A.Aubert sur ce site, mais sans succès.
Tes explications seront les bienvenues.
Cordialement,
Michel
Merci pour cette réponse très matinale !....
La page utilisant highstock correspond tout à fait à ce que je cherche. Dans mes essais je m'était inspiré de l'exemple fourni par P.A.Aubert sur ce site, mais sans succès.
Tes explications seront les bienvenues.
Cordialement,
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
Re: Choix multiple de la période sur les graphiques
Re-bonjour Pascal
J'ai un peu progressé depuis tout-à-l'heure en utilisant comme suggéré Hcharts-stock et en configurant le rangeselector et en prenant les données dans la table sql data.
Il me reste à trouver comment utiliser datepicker(js) car la simple zone de saisie des dates est peu pratique.
Pour l'instant j'ai téléchargé jquery-ui.min.js et ajouté dans le php, mais ensuite?
A+
Michel
J'ai un peu progressé depuis tout-à-l'heure en utilisant comme suggéré Hcharts-stock et en configurant le rangeselector et en prenant les données dans la table sql data.
Il me reste à trouver comment utiliser datepicker(js) car la simple zone de saisie des dates est peu pratique.
Pour l'instant j'ai téléchargé jquery-ui.min.js et ajouté dans le php, mais ensuite?
A+
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
- PascalWMR
- Messages : 323
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Choix multiple de la période sur les graphiques
Bonjour Michel, bonjour à tous
Pour utiliser le Datepicker de JQuery.ui, c'est vrai que ça n'est pas facile. J'ai moi-même galéré avec ça.
Pour se faire, il faut 2 fichiers de code JavaScript et 2 fichiers de Feuille de Style en Cascade CSS
jquery-ui.js
jquery.ui.datepicker-fr.js
jquery-ui.css
datepicker.css
Le fichier jquery.ui.datepicker-fr.js permet d'avoir le datepicker en français.
Avec Firefox, pour ne citer que lui,
Cliquez gauche sur les liens ci-dessus et les ouvrir dans un nouvel onglet
Faire un clic gauche au milieu du nouvel onglet qui s'est ouvert et cliquez sur Enregistrer sous
Enregistrez le fichier dans le répertoire de votre choix avec le nom qui s'affiche dans la boite de dialogue "Enregistrer sous"
soit jquery-ui.css, datepicker.css, jquery-ui.js et jquery.ui.datepicker-fr.js
Ensuite, entre les balises <head> et </head> il faut charger ces fichiers comme ceci
Attention, les chemins relatifs ci-dessus sont les miens. Pensez à les modifier si vous n'avez pas les même répertoires que moi.
Maintenant, juste avant l'accolade et la parenthèse de fin de scripts Highstock })</script>, il faut rajouter ces 2 fonctions
Il faut enfin régler minDate. Il doit être précédé du signe moins (-) suivit d'un nombre qui correspond au nombre de jours total que vous voulez afficher.
Pour ce qui me concernent, j'affiche 6 mois de données, donc -180 jours
maxDate lui doit rester à zéro (0). Ca correspond au dernier jours extrait.
Thats all folks
A+
Pascal
Pour utiliser le Datepicker de JQuery.ui, c'est vrai que ça n'est pas facile. J'ai moi-même galéré avec ça.
Pour se faire, il faut 2 fichiers de code JavaScript et 2 fichiers de Feuille de Style en Cascade CSS
jquery-ui.js
jquery.ui.datepicker-fr.js
jquery-ui.css
datepicker.css
Le fichier jquery.ui.datepicker-fr.js permet d'avoir le datepicker en français.
Avec Firefox, pour ne citer que lui,
Cliquez gauche sur les liens ci-dessus et les ouvrir dans un nouvel onglet
Faire un clic gauche au milieu du nouvel onglet qui s'est ouvert et cliquez sur Enregistrer sous
Enregistrez le fichier dans le répertoire de votre choix avec le nom qui s'affiche dans la boite de dialogue "Enregistrer sous"
soit jquery-ui.css, datepicker.css, jquery-ui.js et jquery.ui.datepicker-fr.js
Ensuite, entre les balises <head> et </head> il faut charger ces fichiers comme ceci
Code : Tout sélectionner
<link rel="stylesheet" href="../Scripts/JS/jquery-ui/themes/start/jquery-ui.css">
<link rel="stylesheet" href="../Scripts/JS/jquery-ui/datepicker.css">
<script type="text/javascript" src="../Scripts/JS/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="../Scripts/JS/jquery-ui/jquery.ui.datepicker-fr.js"></script>
Maintenant, juste avant l'accolade et la parenthèse de fin de scripts Highstock })</script>, il faut rajouter ces 2 fonctions
Code : Tout sélectionner
function(chart) { // on complete
// appliquer les sélecteurs de dates
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker({minDate:-180, maxDate:0,})
},0)
// Définir le format de date des datepickers
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: false,
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
});
Pour ce qui me concernent, j'affiche 6 mois de données, donc -180 jours
maxDate lui doit rester à zéro (0). Ca correspond au dernier jours extrait.
Thats all folks
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
![Image](https://monsite-meteo.eu/Images/BandeauMeteoConflansEnJarnisy468x60.png)
Météo Conflans-en-Jarnisy
![Image](https://monsite-meteo.eu/Images/BandeauMeteoConflansEnJarnisy468x60.png)
Re: Choix multiple de la période sur les graphiques
Bonjour Pascal,
Voilà une réponse extra, claire, précise,..... en plus avec les fichiers qui vont bien.
Un grand merci car tu as dû y passer du temps.
J'ai parcouru ton site météo. C'est impressionnant avec une personnalisation agréable. Je vois que tu maitrise PHP et javascript.
Cordialement,
Michel
Voilà une réponse extra, claire, précise,..... en plus avec les fichiers qui vont bien.
Un grand merci car tu as dû y passer du temps.
J'ai parcouru ton site météo. C'est impressionnant avec une personnalisation agréable. Je vois que tu maitrise PHP et javascript.
Cordialement,
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)