Choix multiple de la période sur les graphiques

NoSimbio · Message par **NoSimbio** » 03 déc. 2020, 17:30

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

PascalWMR · Message par **PascalWMR** » 04 déc. 2020, 04:58

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

NoSimbio · Message par **NoSimbio** » 04 déc. 2020, 08:04

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

NoSimbio · Message par **NoSimbio** » 04 déc. 2020, 15:19

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

PascalWMR · Message par **PascalWMR** » 05 déc. 2020, 19:03

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

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>

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

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();
				}
			});
		});

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

NoSimbio · Message par **NoSimbio** » 05 déc. 2020, 20:26

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

Choix multiple de la période sur les graphiques

Choix multiple de la période sur les graphiques

Re: Choix multiple de la période sur les graphiques

Re: Choix multiple de la période sur les graphiques

Re: Choix multiple de la période sur les graphiques

Re: Choix multiple de la période sur les graphiques

Re: Choix multiple de la période sur les graphiques