Graphique en php.

Signaler
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015
-
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
-
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

Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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 !


Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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 ?

Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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:
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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']."'],";
}
?>
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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....
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

Voici une adresse intéressante au sujet des graphiques:
https://developers.google.com/chart/
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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);
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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'));
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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'])):'';


Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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:
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

J'ai trouvé comment te présenter ce que tu demandes.
Alors voici la suite:
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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);
Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

Pendant que j'y étais je t'ai réalisé toute la série d'image que voici:




Sait on jamais?
Messages postés
33509
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2021
351
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.



Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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:


Messages postés
22
Date d'inscription
vendredi 30 janvier 2015
Statut
Membre
Dernière intervention
17 mai 2015

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.