ben voila, je me résout a nouveau a faire appel a vous.
mon soucis:je n'arrive pas implémenter convenablement un datepiker directement sur la page graphique
-A l'aide du tuto hihcharts/highstock j'ai bien réussit a faire un graphe des xxx dernières heures.
-j'ai ajouté (dans le cas hicharts) un champs input, je récupère convenablement la valeur entrée grâce a la méthode POST, ensuite il ne me reste plus qu'a actualiser la variable du tuto start et stop.
a la main comme cela je peut choisir le jour et l'intervalle de temps affiché.(c'est pour test, il n'y a pas de contrôle et je rentre le timstamp directement dans le champs.)
-Je précise que je travaille directement sur ma page de graphique et non pas par l’intermédiaire d'un formulaire.
- toujours dans hicharts, mais highstock a déjà les input j'ai ajouté deux champs: appelé date debut et date de fin et ça va a pêut pres.
-donc j'ai une fonction qui marche: avancer ou reculer d'un jour.
par contre quand je veut mettre un datepicker je n'ai plus de graph, je pense a un conflit dans mes appels aux librairies JS car le datepiker marche convenablement seul, le graph aussi, mais une fois sur la même page, ça marche plus.
[u]pour test[/u] sur mes input je fait comme cela: ce code part du bas, de la fin du tuto, j'ai nommée cette page:48h_teleinfo.php
Code : Tout sélectionner
<!-- Maitenant il ne reste plus qu'à afficher le graphique dans le corps "body" de la page et on ferme la balise html
id="container" = C'est le nom que vous avez défini au début dans "renderTo: 'container', "
style="width: 550px; height: 300px; = la largeur et la hauteur que vous voulez donner à votre graphique.
Votre graphique est terminé.-->
</head>
<body>
<!-- on créé le formulaire php , passage de paramètres par la méthode post-->
<form action="48h_teleinfo.php" method="post">
<!-- on déclare un champs select, pour affichier la liste de choix -->
<select name="jours">
<option value=""> ----- jours ----- </option>
<option value="01"> 01 </option>
<option value="02"> 02 </option>
<option value="03"> 03 </option>
<option value="04"> 04 </option>
</select>
<select name="mois">
<option value=""> ----- jours ----- </option>
<option value="01"> 01 </option>
<option value="02"> 02 </option>
<option value="03"> 03 </option>
<option value="04"> 04 </option>
</select>
<!-- un bouton pour valider -->
<input type="submit" value="valider" name="OK">
</form>
</center>
<div id="container" style="width: 1280px; height: 500px; margin: 0 auto"></div>
</body>
</html>
Code : Tout sélectionner
<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<!-- receupere les langues pour la traduction du calendrier -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
-le datepiker simple
- le datepiker aller et retour qui surveille que l'on ne peut pas choisir des dates (DU) (AU) de façon coherente, je n'utilise pas la source ajax
Code : Tout sélectionner
/**
* Création d'un calendrier
* @return {[type]} [description]
*/
$(function()
{
// définit les options par défaut de tous les calendriers
$.datepicker.setDefaults($.datepicker.regional["fr"]); // affiche le calendrier en fr
// définit les options par défaut du calendrier
$.datepicker.setDefaults({
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
showOn: "button", // affiche le calendrier via un bouton image
buttonImage: "10-calendar-icon.png",
buttonImageOnly: true,
changeMonth: true, // listes déroulantes pour les mois et les années
changeYear: true,
yearRange: "-1:+3",// le nombre d'année disponible dans la liste déroulante
//defaultDate: "16-05-2014",// la date par défaut sélectionnée dans le calendrier
firstDay: 1, // premier jour le lundi
//beforeShowDay: $.datepicker.noWeekends, // masque les week end
showWeek: true, // affiche les semaines
duration: "fast", // ajoute une animation sur le calendrier
showAnim: "slide",
showOptions: {direction: "left"}
/*minDate: "+3", // les dates sélectionnables (minimum et maximum)
maxDate: "+13" */
});
//$("#calendar").datepicker();
/**
* Gestion d'une date de départ et d'une date de retour
* @param
* @return {[type]} [description]
*/
$("#calendar_from").datepicker({
onClose: function(date) {
$("#calendar_to").datepicker("option", "minDate", date);
}
});
$("#calendar_to").datepicker();
/**
* Communication avec PHP via AJAX lors de la sélection de la date
* @param
* @return {[type]} [description]
*/
$("#calendar").datepicker ({
onSelect : function (dateTexte){
var data = {date : dateTexte};
$.ajax ({ // appel du script php
url : "10-ajax.php",
data : data,
complete : function (xhr, result){
// si il y a une erreur
if (result != "success")
{
$("#confirmation").html ("<b>Erreur durant votre résevertion, veuillez recommencer plus tard.</b>") ; // ajout de la reponse php sous forme HTML
return;
}
var retour = xhr.responseText;
$("#confirmation").html (retour) ; // ajout de la reponse php sous forme HTML
}
});
}
});
});
http://www.boock.ch/meteo/graphiques_dy ... e_jour.php
Quelques fonctions si cela peut etre utile a quit lit ce message, testée, ellent fonctionne toutes
Calendar 4 renvoie la date en tstamp
Code : Tout sélectionner
/**
* Affiche les différents formats des dates
* @return {[type]} [description]
*/
$(function() {
$("#calendar1").datepicker({dateFormat: "mm-dd-yy", appendText: " mm-dd-yy - défaut ango-saxon"});
});
$(function() {
$.datepicker.setDefaults($.datepicker.regional["fr"]);
$("#calendar2").datepicker({dateFormat: "dd-mm-yy", appendText: " dd-mm-yy - défaut français"});
});
$(function() {
$("#calendar3").datepicker({dateFormat: "yy-mm-dd", appendText: " yy-mm-dd"});
});
$(function() {
$("#calendar4").datepicker({dateFormat: "@"});
});
$(function() {
$("#calendar5").datepicker({dateFormat: "!", appendText: " ticks Windows"});
});
$(function() {
$("#calendar6").datepicker({dateFormat: $.datepicker.COOKIE, appendText: " COOKIE"});
});
$(function() {
$("#calendar7").datepicker({dateFormat: "'Le' d 'du mois de' MM yy", appendText: " avec du texte"});
});
en fait j'ai mis un relais en parallèle de mes pompes et une sonde de température, le signal de la sonde est coupé quand le relais tire si qui me donne une valeur "NULL" dans ma BDD, j'utilise cette valeur pour indiquer que la pompe est enclenchée.
