implementer un datpiker dans les champs input

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highstock, Une question, un bug ?

Modérateurs : jturlier, Météo Villarzel

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: implementer un datpiker dans les champs input

Message par alain » 03 févr. 2015, 17:42

bonjour a tous, bonjour Jean

Parce qu je ne le savait pas , bon le mien il est d'un beau bleu :mrgreen:
mais quand même j'en......
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: implementer un datpiker dans les champs input

Message par alain » 05 févr. 2015, 21:01

bonjour
en fait, mon script adapté a partir des données de PA marche bien.
je peut choisir une date d'affichage ou une période entre deux dates.
comme je débute en PHP/MYSQL ma table comporte 3 champs: date, datetime et timestamp. Comme ça au moins je peut faire des essais.
Je voit que tout le monde travaille en timestamp, il doit y avoir des raisons, mais je ne les voie pas!
pour l’instant je trouve compliquer d'utiliser Mktime.

Ma questions est simple: pourquoi travaille t’ont majoritairement en timestamp ?

j'ai fait des test sur un champs date directement avec la fenêtre de requête: voila ce que j'ai réussit a faire afficher:

SELECT * FROM `tbteleinfo` WHERE MONTH(La_Date) = 1; me sort tout les champs du mois 1

SELECT * FROM `tbteleinfo` WHERE day(La_Date) = 18; me sort tous les jours 18

SELECT * FROM `tbteleinfo` WHERE day(La_Date) = 18 and MONTH(La_Date)= 1;AND fonctionne avec des champs différents me donne tous les champs du jour 18 du mois 1

SELECT * FROM `tbteleinfo` WHERE day(La_Date) = 18 or day(La_Date)= 19; OR fonctionne sur le meme champ me donne tous les champs du 18 et 19

SELECT * FROM `tbteleinfo` WHERE day(La_Date) IN (8, 10);sort le jour 8 ét 10 j'aurais pu faire (8,10,15,............

j'ai essayer de mettre NOT devant je me souvient plus comment j'ai fait, en fait ça sort tous les jours sauf celui choisit ça devait être un truc comme ça:

SELECT * FROM `tbteleinfo` WHERE day(La_Date) NOT IN (8, 10);sort tout les jours sauf 8 et 10
----------------------------------------------------------------------------------------------------------------------------------------------------
Bon,c'est pas tout mais maintenant que j'arrive a afficher un jour , ou une période en line ou aera je voudrais poster une demande pour faire un graph en colonne ?
ce que je cherche a faire:
extraire une période par exemple le mois (ça c’est acquis)
faire le cumul du champ par exemple total des KW HP ( pour vous ça pourrait être le cumul pluie sur la période)
faire le cumul du champ par exemple total des KW HC
et faire un graph avec l'option colonne de hicharts, mais en superposant KW HP sur KW HC et en affichant le total de chaque période .
bon deja si vous m'aiguillez pour comment grouper ces valeurs et faire une colonne, après je me débrouillerais, je pense que ça passe par group by, mais je sait pas par quel bout commencer :cry:
Bon deux questions pour un seul post, je sort :arrow:
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: implementer un datpiker dans les champs input

Message par Météo Villarzel » 05 févr. 2015, 23:24

je pense que c'est ça que tu cherches

http://jsfiddle.net/gh/get/jquery/1.9.1 ... n-stacked/

option : stacking (empilement)

A+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: implementer un datpiker dans les champs input

Message par alain » 06 févr. 2015, 00:29

bonsoir
oui, c'est ça
https://www.youtube.com/watch?v=yuvkOphFI_c
sauf que je ne sait pas trop par quel bout commencer en PHP pour préparer mes datas pour les colonnes.
en fait je cherche a faire ça, oui je sait je copie, mais bon :mrgreen:
voir la pièce jointe
sinon j'ai pas mal avancé j'ai les routines de soustractions d'index qui fonctionnent, plus précisent que PAPP envoyée par le signal teleinfo en V.A
je cherche l'avant dernière ligne des index
puis la dernière
je fais la soustraction
je trouve plus mon bout de code mais c'est quelque chose comme ça de mémoire

Code : Tout sélectionner

//Sélection  du dernier enregistrement
FROM `consommation` ORDER BY id DESC limit 1"
$row_conso1 = mysqli_fetch_assoc($conso1), $Conn)

//Sélection de l'avant dernier enregistrement
FROM `consommation` ORDER BY id DESC limit 1,1"
$row_conso2 = mysqli_fetch_assoc($conso2), $Conn)
//Calcul de la différence entre la valeur du dernier enregistrement, et la valeur' de l'avant dernier.
$diff = "".$row_conso1['champ']." - ".$row_conso2['champ']."";
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: implementer un datpiker dans les champs input

Message par Météo Villarzel » 06 févr. 2015, 09:08

Salut,
Je n'ai pas essayé, mais en regardant l'exemple, tu dois reprendre simplement tes deux valeurs

series: [{
name: 'HP',
data: comArr(HP)
}, {
name: 'HC',
data: comArr(HC)
}]

Ensuite c'est juste cette option qui va empiler les colonnes

plotOptions: {
column: {
stacking: 'normal',
}
},

A+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: implementer un datpiker dans les champs input

Message par alain » 06 févr. 2015, 15:30

bonjour
merci de prendre sur ton temps.
C'est vrai que débute en PHP et je m’égare souvent dans des manips pas possibles.
Je pense que je suis mal partie des le départ avec ma BDD.
Puisque c'est moi qui écrit le prg d'interface compteur vers Mysql j’aurais du mieux réfléchir avant comment j’allais gérer mes données en PHP.
Pour l'instant je transmet chaque minute a ma BDD: temps, indexHC, indexHP, et puissance apparent en VA.
Les graphes journaliers sont fait avec la colonne VA, ou le calcul d'index qui lui me donne la vrai consommation ( je ne vais pas m’étaler sur le (Cos φ). ça c'est bon, je navigue sans soucis dans ma BDD.
par contre pour les historiques cout/consommation il m'aurais été plus simple d'avoir une colonne supplémentaire ou chaque soir a 23H58 je transmettrais a ma BDD le total de la consommation journalière. Cela aurais simplifié mon code PHP et alléger mes requêtes.
Le soucis avec un débutant comme moi c'est le manque de réflexion des le départ.
MAIS, tout n'est pas perdu je vais reprendre l'exemple que tu m'a donnée pour créer une vue, et essayer d'ajouter cette colonne et y placer mon calcul, ensuite je sauverais cette vue en SQL pour la réimporter comme base principale
pour mon historique cumul semaine/mois/année. ce sera plus simple
1 jour = 1ligne sur ma BDD. La, comme je suis partie:
1 jour = 60 lignes par heures X par 24H.
sinon compris ce que tu me dit au dessus :D


pour qui passe la:
une tite série de quelques vidéo d'une dizaine de minutes pour appréhender les bases.
on y voit notamment par exemple dans le cas des série comment rapidement passer de colonne a empilement.
Je me demande si on pourrais pas dans certain graph par exemple certaines vues en colonnes, donner le choix au visiteur en mettant un bouton (flip flop) qui permettrais a ce visiteur de choisir comment il veut voir sa colonne.
dans ce cas au lieu d’écrire en dur
stacking
peut être higcharts accepterais:
$choixUtilisateur
mais bon c'est pas pour moi, juste une réflexion, je pense que certains ce sont posé la question: comment je présente mon graph

la playlists des 7 vidéos
https://www.youtube.com/playlist?list=P ... oeh0Zk0ctN
bonne journée a tous
Alain

EDIT
les codes sources sont chargeable sur son blog
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: implementer un datpiker dans les champs input

Message par alain » 07 févr. 2015, 22:57

bonsoir
je me suis un peu égaré, le sujet initial était comment implémenter un datepicker.
c'est terminé, Merci a tous ceux qui m’ont aidé.
Par contre pour ceux qui sont comme moi novice je vous joint quelques truc que j'ai mis en place.
Mes méthodes ne sont surement pas conventionnelle, mais au moins on a une base de départ, je suis débutant
-1) truc simples
-déterminer la date de départ (griser les dates en deçà des données de la BDD)
-Déterminer la date max a afficher
-implémenter un bouton jour en cours
-faire apparaitre les jours du mois suivant (31,01,02)
très pratique car après le 31 on sélectionne le 01, ce qui fait passer le calendrier au mois suivant automatiquement
-1) truc plus compliquer
-Trouver une solution pour que lorsque l'on navigue de jour en jours, cela désactive la fonction d'origine qui fait que le calendrier par défaut se cale sur le jour courant
-Puis trouver une fonction qui simule l’appuie sur le bouton envoyer, tout en gardant ce bouton SUBMIT( je pense a IE).

-déterminer la date de départ (griser les dates en deçà des données de la BDD)

soit on la code en dur
minDate:'18/12/2014',
soit on la calcule en allant extraire la première de sa BDD

Code : Tout sélectionner

minDate: <?php echo$dateMini; ?> ,
attention en initialisant sa variable $dateMini il faut bien la construire
var1 contenant un simple quote concaténé a sa variable et concaténé var2 contenant le simple quote et la virgule
En décomposant ça donne quelque chose comme cela:

Code : Tout sélectionner

  $varA; 
   $varA = '\''; 
   $varB; 
   $varB = '\,'';
   global $dateMini
le \ sert juste a échapper le ' ;)

Code : Tout sélectionner

$dateMini = $varA.$varBDD.$varB;


Déterminer la date max a afficher

la impossible de la mettre en dur, moi j'ai choisit de mettre la date du jour dans une variable
même méthode que ci dessus

Code : Tout sélectionner

 maxDate: datemaxi,
construit comme cela:

Code : Tout sélectionner

     var date = new Date();
     var month = date.getMonth()+1;
     var day = new Date().getDate();
     var year = date.getFullYear();
     var datemaxi = (day + '/' + month + '/' + year); 

-implémenter un bouton jour en cours

Code : Tout sélectionner

showButtonPanel: true,
-faire apparaitre les jours du mois suivant (31,01,02)
se fait en deux temps:

Code : Tout sélectionner

showOtherMonths: true,
selectOtherMonths: true,
-Trouver une solution pour que lorsque l'on navigue de jour en jours, cela désactive la fonction d'origine qui fait que le calendrier par défaut se cale sur le jour courant

Code : Tout sélectionner

defaultDate: <?php echo$datePostDefaut; ?> ,
même principe que dessus
La concaténation je l'ai fait dans une condition IF, ainsi si l'on appuis sur envoyer sans avoir choisit de date, par défaut cela affiche les 24 dernières heures, ou ce que vous voulez. il ne faut jamais avoir ses variables vides sinon cela fait une erreur d'initialisation du calendrier
on peut décomposer la démarche comme cela:

Code : Tout sélectionner

 
   $varA; 
   $varA = '\''; 
   $varB; 
   $varB = '\,'';
   global $datePostDefaut; 
   
   
  if(!empty($_POST['depart'])) {
        $datePostDefaut = $varA .($_POST['depart']) .$varB;
	}
    else{
		$datePostDefaut = $varA.date('d/m/Y').$varB;
		}
voila ça donne ça

Code : Tout sélectionner

// inilisation du calendrier	
$(function() {
$.datepicker.setDefaults( $.datepicker.regional['fr']);
$( "#datepicker" ).datepicker({
showButtonPanel: true,// affiche des boutons sous le calendrier
showOtherMonths: true, // affiche les autres mois
selectOtherMonths: true, // possibilités de sélectionner les jours des autres mois
dateFormat : 'dd/mm/yy',// affiche par defaut la date en francais
minDate: <?php echo$dateMini; ?> , // empeche d'afficher une date inferieure a ma BDD
maxDate: datemaxi,    // empeche d'afficher une date superieur au jour construit
defaultDate: <?php echo$datePostDefaut; ?> ,date par défaut sélectionnée dans le calendrier
changeMonth: true,    // listes déroulantes pour les mois
changeYear: true,    // listes déroulantes pour les années
showOn: "button", // affiche le calendrier via un bouton image
buttonImage: "10-calendar-icon.png", 
		                             });
                   });
		

Maintenant la fonction qui simule l'apuie sur le bouton envoyer ( SBMIT)
elle n'est pas de moi, je l'ai trouvé en fouillant les forums, je la donne brute de fonderie

Code : Tout sélectionner

 <script type="text/javascript">
//fonction javascript simulant l'appui sur un bouton: 
//le formulaire DOIT avoir pour id "formulaire" et le bouton avoir pour id "suivre"
function suite ()
{
//simulation du clic sur l'objet d'id 'suivre'
formulaire.suivre.click();
}
</script>
<form method="post" id = "formulaire" action=""class="ui-widget">
<!-- onchange= 'suite()'! quand la valeur change, la fonction suite est-->
<!-- appelée auto. onblur ='suite()': quand le focus quitte ce champ-->
<label style="color: #000000">Choisir la date du graphique</label>
<input style="width: 75px" type="hidden" name="depart" Id="datepicker" size="10" onchange="suite()" / >
<input type="submit" id ="suivre" value="Envoyer">
</form>
Voila, a votre dispositions si besoin d'informations complémentaires
je vérifierais demain si je n'ai pas fait d'erreur dans mes copier coller car j'ai remis pas mal en forme pour qu ça tienne sur une lignes
Alain

EDIT

je viens de placer mon script en ligne, mais alimenté par DB4FREE, j'ai un temps de chargement très long. de ce fait la simulation d’appuis sur le bouton SUBMIT ne saute pas au yeux, en local, des la date choisie le graph se construit et s'affiche. Donc inutile d'appuyer sur envoie.
http://mapetitemeteo.esy.es/48h_teleinfo.php
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Répondre