Graphique en php.

Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015 - 25 mars 2015 à 15:48
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 28 mars 2015 à 20:52
Bonjour,
Je cherche à créer un graphique en php à l'aide de javascript.
Un ami m'a fourni un script qui semblerait être ça sauf qu'un message d'erreur apparait comme ci dessous:

Et voici le code que j'utilise:
<?php
include 'connexion.php';
if (isset($_POST['submit']))
{
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point=10;
$requete = $connection->prepare ('SELECT * FROM messcores WHERE prenom=:prenom AND score=:score');
$requete->execute(array(
':prenom' => $pseudo,
':score' => $point));
$javascript="";
do
{
$javascript .="['".$resultat['prenom']."', '".$resultat['score']."'],";
}
while($resultat=$requete->fetchALL());
}
?>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
<?php
echo $javascript;
?>
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<form method="post" action="camembert.php" >
<p>
<input type="text" name="pseudo" required />
<input type="submit" name="submit" value="Valider" />
</p>
</form>
</td>
</tr>
</table>
</body>
</html>


Ainsi pourriez vous m'indiquer si possible où se situe l'erreur pour que je puisse y remédier?
Merci.

27 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
25 mars 2015 à 16:16
Bonjour,

Le message est clair....
Il ne connait pas la variable $resultats....

<?php
include 'connexion.php';
if (isset($_POST['submit'])){
 $pseudo = htmlspecialchars(trim($_POST['pseudo']));
 $point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT * 
         FROM messcores 
         WHERE prenom=:prenom 
         AND score=:score";
$requete = $connection->prepare ($sql);
$requete->execute($params);

$resultat = $requete->fetchAll();

//A la place de ton DO ..
foreach($resultat  as $R){
$javascript .="['".$R['prenom']."', '".$R['score']."'],";

} //fin FOREACH



}//fin IF $_POST


Après.. je n'ai pas regardé le reste de ton code....
Pas sûr que ça fonctionne correctement comme ça pour ce que tu souhaites faire !

A mon avis... tu ferais mieux de passer par de l'AJAX pour alimenter ton graph javascript...
mais là .. c'est une autre question !


0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
25 mars 2015 à 16:32
Voici l'erreur que produit ce code:

<?php
include 'connexion.php';
if (isset($_POST['submit'])){
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT *
FROM messcores
WHERE prenom=:prenom
AND score=:score";
$requete = $connection->prepare ($sql);
$requete->execute($params);

$resultat = $requete->fetchAll();

//A la place de ton DO ..
foreach($resultat as $R){
$javascript .="['".$R['prenom']."', '".$R['score']."'],";
?>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],



]);

var options = {
title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
<?php
echo $javascript;
?>
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<form method="post" action="camembert.php" >
<p>
<input type="text" name="pseudo" required />
<input type="submit" name="submit" value="Valider" />
</p>
</form>
</td>
</tr>
</table>
</body>
</html>





Qu'en penses tu?

Je ne connais pas l'AJAX car je n'ai pas encore eu le temps de l'étudier.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
25 mars 2015 à 18:41
Tu peux essayer ça :

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT * 
         FROM messcores 
         WHERE prenom=:prenom 
         AND score=:score";
try{
    $requete = $connection->prepare($sql);
    $requete->execute($params);
    $resultat = $requete->fetchAll();
} catch (Exception $e) {
    echo "<br><b>Exception :<b>",  $e->getMessage(), "\n";
    echo "<br><b>Requete:</b><br>".$sql;
    echo "<br><b>params:</b><br>";
    print_r($params);
}



PS: Tu utilises bien PDO pour te connecter à ta BDD ?

0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
25 mars 2015 à 19:03
Oui bien sur.J'utilise PDO.

<?php
include 'connexion.php';
if (isset($_POST['submit'])){
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT *
FROM messcores
WHERE prenom=:prenom
AND score=:score";
try{
$requete = $connection->prepare($sql);
$requete->execute($params);
$resultat = $requete->fetchAll();
} catch (Exception $e) {
echo "<br><b>Exception :<b>", $e->getMessage(), "\n";
echo "<br><b>Requete:</b><br>".$sql;
echo "<br><b>params:</b><br>";
print_r($params);
}
//A la place de ton DO ..
foreach($resultat as $R){
$javascript .="['".$R['prenom']."', '".$R['score']."'],";
?>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],



]);

var options = {
title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
<?php
echo $javascript;
?>
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<form method="post" action="camembert.php" >
<p>
<input type="text" name="pseudo" required />
<input type="submit" name="submit" value="Valider" />
</p>
</form>
</td>
</tr>
</table>
</body>
</html>


Et voici le message d'erreur:
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
25 mars 2015 à 19:18
il te manque une accolade dans ton foreach je pense....

<?php
include 'connexion.php';
if (isset($_POST['submit'])){
 $pseudo = htmlspecialchars(trim($_POST['pseudo']));
 $point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT * 
         FROM messcores 
         WHERE prenom=:prenom 
         AND score=:score";
try{
    $requete = $connection->prepare($sql);
    $requete->execute($params);
    $resultat = $requete->fetchAll();
} catch (Exception $e) {
    echo "<br><b>Exception :<b>",  $e->getMessage(), "\n";
    echo "<br><b>Requete:</b><br>".$sql;
    echo "<br><b>params:</b><br>";
    print_r($params);
}
//A la place de ton DO ..
foreach($resultat  as $R){
$javascript .="['".$R['prenom']."', '".$R['score']."'],";
}
?>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 09:41
Ha oui.Excuses moi hier soir j'étais un peu fatigué de ma journée.
Cette fois ci les erreurs simples à trouver sont éliminées.
Il reste sans doute celle ci plus complexe à résoudre:

Et qui est issue de ce code:
<?php
include 'connexion.php';
if (isset($_POST['submit']))
{
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point="10";

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT *
FROM messcores
WHERE prenom=:prenom
AND score=:score";
try
{
$requete = $connection->prepare($sql);
$requete->execute($params);
$resultat = $requete->fetchAll();
} catch (Exception $e)
{
echo "<br><b>Exception :<b>", $e->getMessage(), "\n";
echo "<br><b>Requete:</b><br>".$sql;
echo "<br><b>params:</b><br>";
print_r($params);
}
//A la place de ton DO ..
foreach($resultat as $R)
{
$javascript .="['".$R['prenom']."', '".$R['score']."'],";
}
}
?>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
<?php
echo $javascript;
?>
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<form method="post" action="camembert.php" >
<p>
<input type="text" name="pseudo" required />
<input type="submit" name="submit" value="Valider" />
</p>
</form>
</td>
</tr>
</table>
</body>
</html>

En espérant trouver la solution.
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 10:11
Avec ce code:
<?php
include 'connexion.php';
if (isset($_POST['submit']))
{
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT *
FROM messcores
WHERE prenom=:prenom
AND score=:score";
try
{
$requete = $connection->prepare($sql);
$requete->execute($params);
$resultat = $requete->fetchAll();
} catch (Exception $e)
{
echo "<br><b>Exception :<b>", $e->getMessage(), "\n";
echo "<br><b>Requete:</b><br>".$sql;
echo "<br><b>params:</b><br>";
print_r($params);
}
//A la place de ton DO ..
foreach($resultat as $R)
{
$javascript .="['".$R['prenom']."', '".$R['score']."'],";
}
}
?>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
<?php
echo $javascript;
?>
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<form method="post" action="camembert.php" >
<p>
<input type="text" name="pseudo" required />
<input type="submit" name="submit" value="Valider" />
</p>
</form>
</td>
</tr>
</table>
</body>
</html>

Il n'y a plus de message d'erreur mais voici ce qu'il m'est retourné:

C'est à dire qu'après avoir validé le pseudo c'est la même page qui est présentée.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 mars 2015 à 10:58
Bonjour,

Comment se nomme cette page ? (le nom de son fichier php)

Que contient la page
page.. vers laquelle ton FORM devrait rediriger ....


Et enfin.
Qu'est sensé faire ce code ?
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
var data = google.visualization.arrayToDataTable([
['Score', 'en milliers'],]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
<?php
echo $javascript;
?>
    </script>

car je ne comprend pas à quoi sert ce echo $javascript .....
je ne pense pas que tu pourras dessiner ton graph de cette manière....
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 11:17
Le fichier s'appelle camembert.php
Le FORM (formulaire) redirige vers cette même page après avoir validé le pseudo.
Ce code est sensé présenté sous forme de graphique (ici un camembert) les résultats d'un questionnaire sous forme de jeu.
Ce n'est pas moi qui est créée le javascript.
Je suppose que "echo $javascript" doit présenter un camembert.
Lorsque ce code sera au point, je pense désormais à remplacer le camembert par des barres horizontales mieux adaptées aux résultats.
Enfin, voici l'image de ma table:

Qui s'appelle "mescores" en base de donnée "test".
Et dont voici le code du fichier connexion.php:
<?php
try {
$connection = new PDO('mysql:host=localhost;dbname=test', 'root', '',
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
} catch ( Exception $e ) {
echo "Connection à MySQL impossible : ", $e->getMessage();
die();
}
?>

Voilà je n'ai plus de secret pour toi.
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 12:44
Voici une adresse intéressante au sujet des graphiques:
https://developers.google.com/chart/
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
Modifié par jordane45 le 26/03/2015 à 13:39
Je n'ai pas testé...
mais ce code devrait mieux fonctionner que le tient :

<html>
  <head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
  <script type="text/javascript">
    
   // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});  
   // Set a callback to run when the Google Visualization API is loaded.
   //  google.setOnLoadCallback(drawChart);
   
    function drawChart() {
    var pseudo = document.getElementById('pseudo').value;
    var data={pseudo:pseudo};
     $.ajax({ 
       type: "POST",
       url:"getData.php",
       data: data,
       async: false,
       dataType: "json",
       success: function(jsonData){
        // -->> Si ça ne marche pas...
        // decommente la ligne ci-dessous pour voir:
        // alert(jsonData);
       
        var data = new google.visualization.DataTable(jsonData);
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240});
      },
       error:function(jqXHR, textStatus){
        alert('error :' + jqXHR + ' ' + textStatus);           
       },
       statusCode:{
       404: function(){alert(LANG_AJX_404);}
       }
     });  
    }
  </script>
  </head>
  <body>
 <!-- **********  DEBUT DU BODY ************* -->
 <div id="piechart" style="width: 900px; height: 500px;"></div>
  <table>
   <tr>
    <td>
     <h1>  Quel est votre pseudo ?</h1><br />
     <p>
      <input type="text" name="pseudo" id="pseudo" value="<?php echo $pseudo;?>" required />
      <input type="button" name="submit" value="Valider" onclick="drawChart();"/>
     </p>
    </td>
   </tr>
  </table>
  <!-- **********  FIN DU BODY ************* -->
 </body>
 </html>


Et la page (getData.php) qui permet de récupérer les data du graphique via AJAX:
<?php
//-----------------------------------------------------------------------//
// Page getData.php
// Permet de renvoyer en JSON les données du graphique
//-----------------------------------------------------------------------//
include 'connexion.php';
$result=array();

//définition des colonnes
$result['cols']=array("Score","en milliers");

$pseudo = isset($_POST['pseudo'])?htmlspecialchars(trim($_POST['pseudo']):'';
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT * 
         FROM messcores 
         WHERE prenom=:prenom 
         AND score=:score";
try
{
    $requete = $connection->prepare($sql);
    $requete->execute($params);
    $resultat = $requete->fetchAll();
} catch (Exception $e) 
{
    echo "<br><b>Exception :<b>",  $e->getMessage(), "\n";
    echo "<br><b>Requete:</b><br>".$sql;
    echo "<br><b>params:</b><br>";
    print_r($params);
}


// Création des data (lignes)
foreach($resultat  as $R){
 $result['rows'][] = array($R['prenom'],$R['score']);
}

print json_encode($result);
?>


Cordialement,
Jordane
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 14:17
Voici le message d'erreur transmis avec le fichier intitulé graph.php

(Notice: Undefined variable: pseudo in C:\wamp\www\messcores\graph.php on line 49).
Auquel correspond ces codes:
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.setOnLoadCallback(drawChart);

function drawChart() {
var pseudo = document.getElementById('pseudo').value;
var data={pseudo:pseudo};
$.ajax({
type: "POST",
url:"getData.php",
data: data,
async: false,
dataType: "json",
success: function(jsonData){
// -->> Si ça ne marche pas...
// decommente la ligne ci-dessous pour voir:

var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
},
error:function(jqXHR, textStatus){
alert('error :' + jqXHR + ' ' + textStatus);
},
statusCode:{
404: function(){alert(LANG_AJX_404);}
}
});
}
</script>
</head>
<body>
<!-- ********** DEBUT DU BODY ************* -->
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<p>
<input type="text" name="pseudo" id="pseudo" value="<?php echo $pseudo;?>" required />
<input type="button" name="submit" value="Valider" onclick="drawChart();"/>
</p>
</td>
</tr>
</table>
<!-- ********** FIN DU BODY ************* -->
</body>
</html>

Ce fichier ne comporte plus la ligne 26 que j'ai décommenté à ta demande du fait que le premier essai ne fonctionnait pas non plus.
Cordialement.
Appolo27.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 mars 2015 à 15:19
Pour le NOTICE...
petit oublie de ma part...
Ligne 49 à modifier
<input type="text" name="pseudo" id="pseudo" value="" required />


Ce fichier ne comporte plus la ligne 26 que j'ai décommenté à ta demande du fait que le premier essai ne fonctionnait pas non plus.

DECOMMENTER ...ne veut pas dire SUPPRIMER..... mais juste enlever les "//" devant la ligne.....
donc remet en ligne 26 :
 alert(jsonData);
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
26 mars 2015 à 15:37
Ok c'est fait comme ci dessous:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.setOnLoadCallback(drawChart);

function drawChart() {
var pseudo = document.getElementById('pseudo').value;
var data={pseudo:pseudo};
$.ajax({
type: "POST",
url:"getData.php",
data: data,
async: false,
dataType: "json",
success: function(jsonData){
// -->> Si ça ne marche pas...
// decommente la ligne ci-dessous pour voir:
alert(jsonData);
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
},
error:function(jqXHR, textStatus){
alert('error :' + jqXHR + ' ' + textStatus);
},
statusCode:{
404: function(){alert(LANG_AJX_404);}
}
});
}
</script>
</head>
<body>
<!-- ********** DEBUT DU BODY ************* -->
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<p>
<input type="text" name="pseudo" id="pseudo" value="" required />
<input type="button" name="submit" value="Valider" onclick="drawChart();"/>
</p>
</td>
</tr>
</table>
<!-- ********** FIN DU BODY ************* -->
</body>
</html>

Cependant désormais lorsque j'écris un pseudo dans le formulaire, il ne se passe rien.Le formulaire est toujours présent et il n'y a même pas de message d'erreur.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 mars 2015 à 20:09
Tu n'as même pas un POPUP qui apparait ?
Alors tu dois avoir une erreur de script JS quelque part ...

As tu regardé dans la CONSOLE de ton navigateur internet ?
Pour cela.. je t'invite à télécharger le plugin FIREBUG (pour firefox)... à le lancer .. à ouvrir ta page... et à regarder dans la console si des choses apparaissent..

Voici un tuto qui explique comment s'en servir :
http://openclassrooms.com/courses/firebug-une-merveille-de-plus-pour-firefox
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 mars 2015 à 20:24
Je pense savoir...
c'est l'ID qui n'est pas bien défini dans cette ligne
 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

A remplacer par
 var chart = new google.visualization.PieChart(document.getElementById('piechart'));
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 08:09
J'ai donc modifié la ligne 32 comme présentée ci dessous:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.setOnLoadCallback(drawChart);

function drawChart() {
var pseudo = document.getElementById('pseudo').value;
var data={pseudo:pseudo};
$.ajax({
type: "POST",
url:"getData.php",
data: data,
async: false,
dataType: "json",
success: function(jsonData){
// -->> Si ??a ne marche pas...
// decommente la ligne ci-dessous pour voir:
alert(jsonData);
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, {width: 400, height: 240});
},
error:function(jqXHR, textStatus){
alert('error :' + jqXHR + ' ' + textStatus);
},
statusCode:{
404: function(){alert(LANG_AJX_404);}
}
});
}
</script>
</head>
<body>
<!-- ********** DEBUT DU BODY ************* -->
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table>
<tr>
<td>
<h1> Quel est votre pseudo ?</h1><br />
<p>
<input type="text" name="pseudo" id="pseudo" value="" required />
<input type="button" name="submit" value="Valider" onclick="drawChart();"/>
</p>
</td>
</tr>
</table>
<!-- ********** FIN DU BODY ************* -->
</body>
</html>

Installé FIREBUG dont je te remercie au passage de me l'avoir fait découvrir.
Et voici l'image qu'indique cette console si cela peut t'aider à localiser le dysfonctionnement produit lorsque je valide la page:

Si ces informations sont insuffisantes, indiques moi avec précisions STP, la procédure pour obtenir des infos utiles car je n'ai pas encore pris le temps d'étudier complètement cette extension Firefox.
Cordialement.
Appolo27.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
27 mars 2015 à 10:31
D'après le message d'erreur (le popup qui apparait..) tu as une Erreur...

Pour en savoir plus ... dans la CONSOLE tu as plusieurs onglets au niveau de ton ajax...
Il faudrait me dire ce que tu as dans Post ainsi que dans Réponse





Mais il semble que le Pb vienne d'un oublie de fermeture d'une parenthèse ligne 12
$pseudo = isset($_POST['pseudo'])?htmlspecialchars(trim($_POST['pseudo'])):'';


0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 12:01
Effectivement il y avait aussi la parenthèse que j'ai omis.
Malgré cela même résultat que précédemment.
Aussi pourrais tu m'expliquer comment obtenir la 3ème ligne comme tu l'obtiens.Car 2 seulement se présentent comme ci dessous:
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 12:07
J'ai trouvé comment te présenter ce que tu demandes.
Alors voici la suite:
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
27 mars 2015 à 13:19
Et dans l'onglet POST tu as quoi ?
Car là .. visiblement.. il n'y a aucun résultat dans la requête ....

NB : Tu peux aussi retirer le ALERT qui se trouve dans le SUCCESS de la fonction ajax.
Et tu peux, le temps des tests uniquement mettre un
console.log(jsonData);
0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 13:55
Pendant que j'y étais je t'ai réalisé toute la série d'image que voici:




Sait on jamais?
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
27 mars 2015 à 16:28
L'ajax est ok.
Le souci... se trouve au niveau du résultat de ta requête...

Dans la page getData.php
<?php
//-----------------------------------------------------------------------//
// Page getData.php
// Permet de renvoyer en JSON les données du graphique
//-----------------------------------------------------------------------//
include 'connexion.php';
$result=array();

//définition des colonnes
$result['cols']=array("Score","en milliers");

$pseudo = isset($_POST['pseudo'])?htmlspecialchars(trim($_POST['pseudo']):'';
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT * 
		 FROM messcores 
		 WHERE prenom=:prenom 
		 AND score=:score";
try
{
    $requete = $connection->prepare($sql);
    $requete->execute($params);
    $resultat = $requete->fetchAll();
		
		//-------------------------------------------------//
		//le temps des tests !
		//-------------------------------------------------//
		$result['sql'] = $sql;
		$result['params'] = $params;
		$result['resultats'] = $resultat;
		//-------------------------------------------------//
} catch (Exception $e){
    echo "<br><b>Exception :<b>",  $e->getMessage(), "\n";
    echo "<br><b>Requete:</b><br>".$sql;
    echo "<br><b>params:</b><br>";
    print_r($params);
}


// Création des data (lignes)
foreach($resultat  as $R){
	$result['rows'][] = array($R['prenom'],$R['score']);
}



print json_encode($result);
?>



et ta page html :
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
<html>
  <head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
  <script type="text/javascript">
    
   // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});  
   // Set a callback to run when the Google Visualization API is loaded.
   //  google.setOnLoadCallback(drawChart);
   
    function drawChart() {
    var pseudo = document.getElementById('pseudo').value;
    var data={pseudo:pseudo};
     $.ajax({ 
       type: "POST",
       url:"getData.php",
       data: data,
       async: false,
       dataType: "json",
       success: function(jsonData){ 
        //--------------------------------------------//
        // le temps des tests uniquement !
        //--------------------------------------------//
           console.log("  jsonData contient : ");
           console.log(jsonData); 
        //--------------------------------------------//
        var data = new google.visualization.DataTable(jsonData);
	var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, {width: 400, height: 240});
      },
       error:function(jqXHR, textStatus){
        alert('error :' + jqXHR + ' ' + textStatus);           
       },
       statusCode:{
       404: function(){alert(LANG_AJX_404);}
       }
     });  
    }
  </script>
  </head>
  <body>
 <!-- **********  DEBUT DU BODY ************* -->
 <div id="piechart" style="width: 900px; height: 500px;"></div>
  <table>
   <tr>
    <td>
     <h1>  Quel est votre pseudo ?</h1><br />
     <p>
      <input type="text" name="pseudo" id="pseudo" value="" required />
      <input type="button" name="submit" value="Valider" onclick="drawChart();"/>
     </p>
    </td>
   </tr>
  </table>
  <!-- **********  FIN DU BODY ************* -->
 </body>
 </html>



Dans la console.. en plus de ce que tu voyais déjà ... tu devrais avoir des lignes en plus qui apparaitront..
Dis nous ce qu'elles contiennent.



0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 17:14
Pour ne rien vous cacher, voici ce que contient toutes les lignes trouvées dans la console à partir des deux derniers fichiers ci dessus fichiers:


0
Apollo27 Messages postés 22 Date d'inscription vendredi 30 janvier 2015 Statut Membre Dernière intervention 17 mai 2015
27 mars 2015 à 17:24
Avec ce fichier modifier au niveau des lignes 11,12 et 13:
<?php
//-----------------------------------------------------------------------//
// Page getData.php
// Permet de renvoyer en JSON les données du graphique
//-----------------------------------------------------------------------//
include 'connexion.php';
$result=array();

//définition des colonnes
$result['cols']=array("Score","en milliers");
if (isset($_POST['submit']))
{
$pseudo = htmlspecialchars(trim($_POST['pseudo']));
$point=10;

$params = array(':prenom' => $pseudo,':score' => $point);
$sql="SELECT *
FROM messcores
WHERE prenom=:prenom
AND score=:score";
try
{
$requete = $connection->prepare($sql);
$requete->execute($params);
$resultat = $requete->fetchAll();

//-------------------------------------------------//
//le temps des tests !
//-------------------------------------------------//
$result['sql'] = $sql;
$result['params'] = $params;
$result['resultats'] = $resultat;
//-------------------------------------------------//
} catch (Exception $e){
echo "<br><b>Exception :<b>", $e->getMessage(), "\n";
echo "<br><b>Requete:</b><br>".$sql;
echo "<br><b>params:</b><br>";
print_r($params);
}


// Création des data (lignes)
foreach($resultat as $R){
$result['rows'][] = array($R['prenom'],$R['score']);
}
}


print json_encode($result);
?>

Voici les images suivantes:
Je ne parviens pas à envoyer les images.
Je relais une tentative après l'envoi de ce message.
0
Rejoignez-nous