11486 sujets

JavaScript, DOM et API Web HTML5

Ajax petit coquin!

Bonjour à tous,

Il y a quelques heures que je m'évertue à trouver une solution pour intégrer un graphique sur une page html.

Sans ajax, les choses seraient bien plus simple.

Voici comment je pratique:

Je propose des choix avec une liste pour afficher des informations météo. Lors du choix, j'envoie ces information via:
$( "#liste_city,#seleted_time" ).change(function() {
      
       var IDlieux = $( "#liste_city" ).val();       
       var elem_position = code_lieux.lastIndexOf( IDlieux );
       var seleted_time = $( "#seleted_time" ).val();       
    
       $.get("meteo_plus.php",{        
        IDlieux:IDlieux,
        lieu:lieux[elem_position],
        seleted_time:seleted_time
       },
       function(data,status){
        //alert('status: '+status+ ' Data: '+data);
         $("#prevision_meteo").html(data);
       });
            
     });


Puis le php fait sont travail et renvoie tout... YES!

Et c'est la que ça se corse, je souhaite intégrer un graphique qui donne les températures sur quelques jours.

Le graphique est du côté HTML et les variables sont du côté php!

C'est la que je sèche! Comment passer des valeurs en tableaux pour renseigner les variables qui génère le graphique.

Voici ou ce passe tout ce trafique: http://www.slorimier.ch/meteo/meteo_plus.html

Un grand merci pour vos précieux conseilles...

Stéphane
Modifié par nabucco (22 Dec 2014 - 22:27)
Merci fielset,
En effet c'est plus commode de passer les variables avec json.

Par contre, je n'arrive pas à les insérer dans les data du graphique. Je n'y comprends vraiment pas grand chose.... aie!

J'ai repris tous à zéro et créé deux fichiers simples pour passer ces satanées variables dans le graphique! Mais que pouic Smiley fache

http://slorimier.ch/meteo/json.html

Voici le contenu du fichier php:

<?PHP
$return['t06h']="3.6,-0.4,-1.9,0.6,-4.5,-5.9";
$return['t12h']="4.7,0.7,3.7,0.7,-1.7,-3.1";
$return['labels']="jeudi 25 décembre 2014 ,vendredi 26 décembre 2014 ,samedi 27 décembre 2014 ,dimanche 28 décembre 2014 ,lundi 29 décembre 2014 ";
echo json_encode($return);
?>

Et le contenu du fichier html

<!DOCTYPE HTML>
<!doctype html> 
<html lang="fr"> 
<head> 
  <meta charset="utf-8"/> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Stéphane Lorimier</title> 
  <link href="http://lib.lorimier.com/css/grid.css" rel="stylesheet" type="text/css" /> 
  <link href="base.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<div id="wrapper">
     
  <button id="envoie">Envoie</button>
  <div class="graph_line rad4px ombre_graph_line">
  	<div>
  		<canvas id="canvas" height="450" width="600"></canvas>
  	</div>
  </div>
    
</div>
</body>
<script src="http://lib.lorimier.com/js/jquery.min.js"></script>
<script src="../js/Chart.min.js"></script>
<script>
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var lineChartData = {
			labels : ["mardi 23 décembre 2014 ","mercredi 24 décembre 2014 ","jeudi 25 décembre 2014 ","vendredi 26 décembre 2014 ","samedi 27 décembre 2014 ","dimanche 28 décembre 2014"],
			datasets : [
				{
					label: "Températures 6h",
					fillColor : "rgba(65, 102, 145,0.2)",
					strokeColor : "rgba(65, 102, 145,1)",
					pointColor : "rgba(65, 102, 145,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(65, 102, 145,1)",
					data : [3.6,-0.4,-1.9,0.6,-4.5,-5.9]
				},
				{
					label: "Températures 12h",
					fillColor : "rgba(145, 134, 239,0.2)",
					strokeColor : "rgba(145, 134, 239,1)",
					pointColor : "rgba(145, 134, 239,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(145, 134, 239,1)",
					data : [7.1, 4.7, 0.4, 1.3, 0.6, -1.4]
				}
			]

		}
    
    	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	}
	</script>
<script type="text/javascript">
$("document").ready(function(){
  
  $('.graph_line').hide();
  
  $("#envoie").click(function(){
    
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "json_repond.php",
    data: data,
    success: function(data) {
     var t06h = data["t06h"];
     var t12h = data["t12h"];
     var labels = data["labels"];
      alert('T06h: '+t06h+' \n T12h: '+t12h+' \n Labels: '+labels);    
    }
    });
    return false;
  });
});
</script>
</html>


Si quelqu'un pourrait se pencher sur mon soucis, j'en serais très reconnaissance.
Ou est-ce qu'il existe des tutos qui pourrait m'expliquer mon cas!!!
Regarde dans la console de ton navigateur. Tu as une erreur js.

Pourquoi as tu toujours les données dans ton code html si tu va les chercher en ajax ?
Je n'ai aucune erreur de javascript.
Je me suis peut être mal exprimé, comment mettre ces valeurs dans le data de datasets.

J'ai essayer de mettre la variable t06h dans le datasets, mais rien n'y fait! Voici ci-dessous:


datasets : [
				{
					label: "Températures 6h",
					fillColor : "rgba(65, 102, 145,0.2)",
					strokeColor : "rgba(65, 102, 145,1)",
					pointColor : "rgba(65, 102, 145,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(65, 102, 145,1)",
					data : t06h
				},
Oui tu as bien une erreur js quand tu clic sur le bouton. Ta requête ajax ne se fait jamais.
Regarde les requêtes via l’outil de dév de ton navigateur. Tu ne verra s rien passer.

Pour recharger ton graphe il faut le détruire et le recharger ensuite via javascript. Tu as aussi je crois la possibilité d'utiliser la méthode update( ) de char.js (doc lu en diagonale).


Les données datasets récupéré via ajax doivent être bien évidement sous le même format demandé par ton plugin de graph.
Oups...
Quel outils employez-vous pour détecter ces erreurs? En effet, vous aviez raison!
J'emploie l'inspecteur Firefox et j'ai aussi Firebug, que je ne connais pas bien.

J'ai tout supprimé, repris tranquillement pas à pas vos conseils et cette fois ça marche.
Mes variables s'affichent bien dans 
<p id="variable_php"></p>
et maintenant, comment les passer le code javascript?

Sur ce lien: http://slorimier.ch/meteo/meteo_plus.html tout fonctionne à merveille... excepté les valeurs dans le graphique.

Voici ce que j'ai essayé et qui ne fonctionne pas!!! Regardez vers data : t06h . J'espère que l'erreur ce situe à niveau.

labels : ["mardi 23 décembre 2014 ","mercredi 24 décembre 2014 ","jeudi 25 décembre 2014 ","vendredi 26 décembre 2014 ","samedi 27 décembre 2014 ","dimanche 28 décembre 2014"],
  			datasets : [
  				{
  					label: "Températures 6h",
  					fillColor : "rgba(65, 102, 145,0.2)",
  					strokeColor : "rgba(65, 102, 145,1)",
  					pointColor : "rgba(65, 102, 145,1)",
  					pointStrokeColor : "#fff",
  					pointHighlightFill : "#fff",
  					pointHighlightStroke : "rgba(65, 102, 145,1)",
  					data : t06h
  					//data : [0.7, 3.2, -1, 0.3, -3.6, -4.2]
  				},
  				{
  					label: "Températures 12h",
  					fillColor : "rgba(145, 134, 239,0.2)",
  					strokeColor : "rgba(145, 134, 239,1)",
  					pointColor : "rgba(145, 134, 239,1)",
  					pointStrokeColor : "#fff",
  					pointHighlightFill : "#fff",
  					pointHighlightStroke : "rgba(145, 134, 239,1)",
  					data : [7.1, 4.7, 0.4, 1.3, 0.6, -1.4]
  				}
  			]
  
  		}


Je serais heureux de recevoir un dernier coup de main... ce serait un magnifique cadeau de Noël!

Sur ce, je vous souhaite à tous de belle fêtes de fin d'année.

Stéphane
nabucco a écrit :
Quel outils employez-vous pour détecter ces erreurs? En effet, vous aviez raison!
J'emploie l'inspecteur Firefox et j'ai aussi Firebug, que je ne connais pas bien.
L’outil de dév de Firefox est parfait pour cela. Plus besoin de Firebug.
Il y a l'onglet console pour voir les erreurs js ou les logs que tu test via console.log(variable); . Il faut vérifier que tu as activé les erreurs js mais ne pas mettre les avertissements.
Pour voir les requêtes, regarde l'onglet réseau. Tu en verras un nouvelle requête a chaque fois que tu change ton select. Cela te permet de visualiser la réponse retourné.

Comme indiqué plus tôt, une fois que tu as récupéré ton json et que celui ci est bien formaté, il faut que tu recré ton char. Une piste ici http://www.chartjs.org/docs/#line-chart-prototype-methods et ici http://www.chartjs.org/docs/#advanced-usage-prototype-methods
Merci de ta précieuse aide,
Je doit franchement que là, mes compétences sont mise à mal. Je pense m'être embarqué dans quelques chose de trop compliqué.

J'ai cru comprendre qu'il fallait faire un update lors du retour des variables reçues par php, donc voici ce que j'ai écrit:

lineChartData.datasets[0].data[0].value = t06h;
lineChartData.update(); 

// ou 
lineChartData.addData( t06h, data[0] );


Mais j'ai aucune idée si c'est correcte... de tout façon ça ne marche pas.
Je ne sais pas ou placer ces lignes.
Ton objet char ne s’appelle pas lineChartData mais myLine.
C'est a insérer au moment ou tu fait tes test $( "#prevision_meteo" ).html.... ligne 141
Fais un log pour voir que contient ta variable. Par exemple :

console.log(myLine.datasets[0]);

Modifié par benj (24 Dec 2014 - 16:52)
benj a écrit :
Fais un log pour voir que contient ta variable. Par exemple :

console.log(myLine.datasets[0]);


Purée...ou faut mettre ce code? Suis vraiment une prune!!!!
tu mets tes log ou tu veux et tu test ce que tu veux Smiley murf
Tu a pu voir ce que contient ton objet myLine ? par exemple à la ligne 189
console.log(myLine);

Il faut bien entendu regarder le résultat dans la console du navigateur.
Désolé benj,

Je suis reconnaissant que tu as pris du temps pour m'aider, mais là, c'est au-delà de mes compétences. Je vais laisser tombé et le programmer directe en php.

Dans la log: la var myLine était undefined

Je l'ai déclarée plus haut et à présent, la console sur JS est vide!

Je te souhaite une excellente fin de soirée et un joyeux noël.
        var lineChartData = {
            labels : ["mardi 23 décembre 2014 ","mercredi 24 décembre 2014 ","jeudi 25 décembre 2014 ","vendredi 26 décembre 2014 ","samedi 27 décembre 2014 ","dimanche 28 décembre 2014"],
            datasets : [
                {
                    label: "Températures 6h",
                    fillColor : "rgba(65, 102, 145,0.2)",
                    strokeColor : "rgba(65, 102, 145,1)",
                    pointColor : "rgba(65, 102, 145,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(65, 102, 145,1)",
                    data : [0.7, 3.2, -1, 0.3, -3.6, -4.2]
                }
            ]

        }

        var lineChartData2 = {
            labels : ["mardi 23 décembre 2014 ","mercredi 24 décembre 2014 ","jeudi 25 décembre 2014 ","vendredi 26 décembre 2014 ","samedi 27 décembre 2014 ","dimanche 28 décembre 2014"],
            datasets : [
                {
                    label: "Températures 6h",
                    fillColor : "rgba(65, 102, 145,0.2)",
                    strokeColor : "rgba(65, 102, 145,1)",
                    pointColor : "rgba(65, 102, 145,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(65, 102, 145,1)",
                    data : [1, 2, 3, 0.3, -3.6, -4.2]
                }
            ]

        }

        var ctx = document.getElementById("canvas").getContext("2d");
        myLine = new Chart(ctx).Line(lineChartData);
        //console.log(myLine);

        // setTimeout pour visualiser le changement
        window.setTimeout(function() {
            myLine.destroy();
            myLine = new Chart(ctx).Line(lineChartData2);
        }, 1500);


Voici un bout de code fonctionnel qui devrait t'aider. Ne perd pas courage.

Et bon noël à toi aussi.
Modifié par benj (24 Dec 2014 - 18:16)
Salut Benjamin,

Je te souhaite une excellente année 2015.

Je reviens au job avec cette affaire de graphique.

J'ai bien employé ce morceau de code qui est fonctionnel pour toi. J'ai à nouveau passé 3 heures là-dessus et rien de fonctionne.

Je suis vraiment paumé. J'ai épuré mon fichier pour éviter d'autres erreur, mais rien n'y fait.
Le voici
http://slorimier.ch/meteo/meteo_plus_benj.html

Encore merci pour tes encouragement, mais là j’abdique.
Salut

En effet, une erreur dans le js est toujours présente : " Uncaught TypeError: Cannot read property 'lineChartData' of undefined".

Quand on regarde où elle se trouve on voit que cette ligne est concernée :

myLine.lineChartData.datasets[0].data[0].value = [28, -7, 0.4, 1, 0.6, -1];


On voit donc qu'il ne peut pas accéder à lineChartData puisque myLine n'est pas défini et c'est vrai puisque tu fais juste 
var t06h, myLine;
.

Il font donc déclarer myLine = quelque chose

Bon courage Smiley smile
Modifié par John Wayne (03 Jan 2015 - 17:52)
Sujet clos
Aller à