Problème PHP est chart.js
Bonjour, j'ai un problème concernant la génération d'un graphique à partir d'un datepicker. Donc voilà, j'ai une page ou l'utilisateur va choisir une date dans un datepicker et grâce à cette date je dois générer un graphique pour cette date. La date est envoyer en post à une autre page.
Celle-ci va récupérer la date, la convertir au format sql, passer une rêquète dans la base de données et encoder au format json. J'arrive à récupérer mes données grâce à la requête et j'obtiens bien mes données au format json, mais le graphique ne se génère pas. La console de debug me donne aucune erreur.
Par contre, si je crée une variable et que je rentre en "dur " une date le graphique se génère. Je ne change rien au code qui génère le graphique.
Voilà je suis un peu perdu, si vous avez quelques idées je suis preneur, merci d'avance.
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=donneesruche;charset=utf8', 'root', 'eclipse');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
if (isset($_POST['date'])){
// on affiche nos résultats
$recup = $_POST['date'];
$test = date('Y-m-d', strtotime($recup));
echo ($test);
//$recup =2017-03-08";
$reponse = $bdd->query("SELECT date, poidsMax, tempMin, hygroMax FROM donneesjournee WHERE date='".$test."'");
check($reponse);
$reponse->execute();
$result = $reponse->fetchAll(PDO::FETCH_ASSOC);
check($result);
$reponse->closeCursor();
print json_encode($result);
}
function check($variable){
echo '<pre>';
var_dump($variable);
echo '</pre>';
//die();
}Ce que j'obtiens
34 réponses
je ne pense pas que le cumul de :
echo ($test);
check($reponse);
print json_encode($result);
soit un json valide.
enlève les echo et print en dehors de print json_encode($result);
@plus
Pierre
Merci de ta réponse, j'ai utilisé les echo et les var_dump pour essayer de me debuger . Donc en enlevant tous les echo, les check et le print cela ne change rien je n'ai toujours pas d'erreur qui s'affiche dans la console
et tu as quoi dans result ?
fais un alert de tes datas dans le success de ton ajax
@plus
Pierre
Juste en affichant le print json_encode($result); j'obtiens mes données au format json
[{"date":"2017-03-08 00:00:00","poidsMax":"29.3","tempMin":"17.8","hygroMax":"64"}]
Voici mon fichier pour générer le graphique : Les alertes ne m'indique rien j'ai l'impression qu'il ne reçoit pas les données mais comme je le dit je n'ai aucune erreur dans la console, c'est bizarre.
J'ai juste ce message: Object {readyState: 4, responseText: "", status: 200, statusText: "OK"}
$(document).ready(function(){
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
success: function(result){
alert(result);
console.log(result);
var poidsMax = [];
var date = [];
var tempMin = [];
var hygroMax =[];
for(var i in result) {
poidsMax.push(result[i].poidsMax);
date.push(result[i].date);
tempMin.push(result[i].tempMin);
hygroMax.push(result[i].hygroMax);
}
alert (poidsMax);
alert (date);
alert (tempMin);
alert (hygroMax);
var chartdata = {
labels: date,
datasets : [
{
label: 'Poids en KG',
fill: false,
backgroundColor: "rgba(255, 69, 75, 1)",
borderColor: "rgba(255, 69, 75, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 69, 75, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 41, 96, 1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: poidsMax,
spanGaps: false,
},
{
label: 'Température en °C',
fill: false,
backgroundColor: "rgba(110, 200, 38, 1)",
borderColor: "rgba(110, 200, 38, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(110, 200, 38, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(110, 200, 38, 1)",
pointHoverBorderColor: "rgba(110, 200, 38, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: tempMin,
spanGaps: false,
},
{
label: 'Hygrométrie en %',
fill: false,
backgroundColor: "rgba(0, 178, 255, 1)",
borderColor: "rgba(0, 178, 255, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0, 0, 0, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: hygroMax,
spanGaps: false,
}
]
};
var ctx = $("#mycanvas4");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
legend: {
position: 'bottom'
},
scales : {
xAxes :[{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
}
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
J'ai juste ce message: Object {readyState: 4, responseText: "", status: 200, statusText: "OK"}
voilà, ta requete de retourne rien ;)
@plus
pour info :
$reponse = $bdd->query("SELECT date, poidsMax, tempMin, hygroMax FROM donneesjournee WHERE date='".$test."'");
check($reponse);
$reponse->execute();
le query lance la requete, pas besoin de faire execute
@plus
Pierre
Donc ma requête ne me retourne rien, mais comment on peut expliquer qu'elle me renvoie les bonnes données au format json. Ah moins que le json n'est pas correct mais j'ai vérifier :)
D'accord merci pour le execute c'est corrigé
j'ai trouvé ;)
if (isset($_POST['date'])){
tu ne post pas de champ date
if faut faire :
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
date : la_valeur_de_la_date_qui_va_bien,@plus
Pierre
C'est a dire la valeur de la date qui va bien ? je voit pas trop comment la récupérer
le datepcker rempli un champ ;)
donc, je resume :
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
date : $('#id_de_ton_datepicker').val(),
...............................................ça devrait marcher
@pluche.
Pierre
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
date : $('#id_de_ton_datepicker').val(),
.......................................J'ai donc mis l'id de mon datepicker mais sa ne change rien.
date : $('#date').val(),
Peut etre que j'ai fait une erreur dans le datepicker :/
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal" method="post" action="http://localhost/Test1/data_historiquepoids.php">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Date <span class="asteriskField">*</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>La tu me pose une colle, je ne voit pas ou je le fait mais vu que le bouton réagit il doit bien ce faire
bon, maintennt tu sais qu'il faut passer la date ;)
pour essayer met la date en dur dans ton code ;)
date : '2017-03-23',
@+
PierreJe viens de mettre une date en dur dans mon php et sa marche donc c'est l'envoie de la date via formulaire qui plante, mais si elle passerai pas pourquoi j'arrive quand meme à la récupérer :/
bah nan, tu la récupère pas :D
change ça
<form class="form-horizontal" method="post" action="http://localhost/Test1/data_historiquepoids.php">
par ca
<form class="form-horizontal" method="get" action="" id="un_id">
et ajoute ce js :
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
/* ici*/
$('#un_id').submit(function(){
$("#un_id").attr("action",'http://localhost/Test1/data_historiquepoids.php?date=' + $('#date').val());
}
})@plus
Pierre
a++
il fallait lire :
change ça
<form class="form-horizontal" method="post" action="http://localhost/Test1/data_historiquepoids.php">
par ca
<form class="form-horizontal" method="get" action="" id="un_id">
a+
Pierre
J'ai ajouter le js en le modifiant un peu c'est toujours pareil je ne reçoit rien c'est carrement bizzare
$('#submit').submit(function(){
var datepickedup = $("#date").val();
$("submit").attr("action","http://localhost/Test1/data_historiquepoids.php?date=" + datepickedup) ;
}) J'ai vu que tu as mis un ?date= c'est pour passer la date par l'url du coup ?
il faut aussi modifier dans le php ;)
if (isset($_POST['date'])){
// on affiche nos résultats
$recup = $_POST['date'];
$test = date('Y-m-d', strtotime($recup));il faut mettre
if (isset($_GET'date'])){
// on affiche nos résultats
$recup = $_POST['date'];
$test = date('Y-m-d', strtotime($recup));@plus
Pierre
J'ai modifier le js
$("form").submit(function() {
var pathname = window.location.href=("http://localhost/Test1/data_historiquepoids.php");
var datepickedup = $("input#date").val();
window.location.href = (pathname + "?date=" + datepickedup);
return false;
});Je reçoit bien ma date dans l'url et le json comme tout à l'heure mais toujours pas de graphe :((
Bonsoir.
Ce n'est pas :
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
date : la_valeur_de_la_date_qui_va_bien,
// ...Mais :
$.ajax({
url: "data.php",
method: "POST",
dataType:"json",
data: {
date: la_valeur_de_la_date_qui_va_bien
},
// ...nan, c'est pas ça ;)
t'as pas suivi ;)
les ... indique suite du code
et la suite c'est pas }
mais
success : funtion(data){
/ du code
..........
/
bon, j'arrête ;)
@pluche
Pierre
et pour info, la doc de $.ajax sur le site jquery :
data
Type: PlainObject or String or Array
.................................
@pluche
Pierre
@Pierrot01: Je sais parfaitement ce que je dis tout comme je n'ai pas besoin que tu m'apprennes à utiliser la fonction ajax de jQuery.
Donc au lieu de discréditer mes dires, tu ferais mieux de t'exercer à l'utiliser et à t'expérimenter avec le javascript, je n'ai pas besoin de toi pour comprendre une documentation et à l'utiliser et ce dont tu parles, c'est justement ce que je mets dans le code que je montre.
Le jour ou j'aurais besoin de toi pour m'expliquer comment utiliser la fonction ajax de jQuery, les poules auront des dents, ça ne risque donc pas d'arriver.
Bonjour, j'ai essayé avec vos proposition que ce soit en GET ou en POST, je reçoit toujours le soit disant format json mais toujours rien. :/
Je ne sais plus quoi tenter :)
@lartak , après m'être relu et t'avoir relu, tu as raison.
j'ai parlé 'écrit) un peu trop vite.
Mais je trouve que ton post est un peu violant ;)
Dis moi, il n'est pas question de rétablir la peine de mort quand même ?
peut être que la punition corporelle suffira :D
Surveille quand même le bec des poules ;)
@pluche
Pierre
Bonsoir je me permet de re-up le sujet car j'ai modifier mon code et je pense que j'y suis presque mais il doit me manquer une petite chose.
Dans le alert(result); je reçoit toutes les données grâce à la date que je rentre dans le datepicker, mais lorsque que je push les données dans les variables et que je fais un alert de celle-ci j'obtiens des ,,,,,,,
Voilà si vous avez des idées je suis preneur, merci d'avance
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#from_date").datepicker();
});
$('#filter').click(function(){
var from_date = $('#from_date').val();
if(from_date != '')
{
//alert ($('#from_date').val());
$.ajax({
url: "data.php",
method: "POST",
type: "text",
data:{
from_date:from_date
},
success: function(result){
alert(result);
console.log(result);
var poidsMax = [];
var date = [];
var tempMin = [];
var hygroMax =[];
for(var i in result) {
poidsMax.push(result[i].poidsMax);
date.push(result[i].date);
tempMin.push(result[i].tempMin);
hygroMax.push(result[i].hygroMax);
}
alert(date);
var chartdata = {
labels: date,Bonjour.
Ce serait bien que tu nous montre ce que te retourne result, d'ailleurs en général un object dans un alert n'est censé que te retourné un truc du genre [object], donc montres nous plutôt le résultat du console.log(result).
Alors result me renvoie mes données aux format json et le console.log(result) cette erreur.