11515 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Ajax, Json et Google Chart Tools

Salut à tous

J'utilise Google Chart Tools pour un projet mais j' rencontre un ptit soucis sur lequel je coinces depuis un bon moment et ça commence à sévèrement me taper sur les nerfs ...

Je récupère mes infos en BDD en ajax, voilà ma petite fonction :

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
 
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(stat_homme_femme);
 
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function stat_homme_femme()
{
    var jsonData = $.ajax({
        url: "./include/traitement_stat.php",
        type: "POST",
        data: "h_f=1",
        dataType: 'json',
        async: false
    }).responseText;
     
    // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows(jsonData);
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_hf'));
      chart.draw(data, {width: 400, height: 240});
}


la requête Ajax récupère les données après passage dans un json_encode dans ma fonction PHP

$tab = array(
            array('Homme', 3),
            array('Femme', 3)
        );
         
        return json_encode($tab, JSON_NUMERIC_CHECK);
    }


ce qui me renvoi le résultat sous cette forme

[["Homme",3],["Femme", 3]]


Lorsque je recharge ma page, j'ai firebug qui hurle en me disant "Error: Argument given to addRows must be either a number or an array"

Mais si je je remplace

data.addRows(jsonData);


par 

data.addRows([["Homme",3],["Femme",3]]);


Et bien le camembert s'affiche comme il faut ...

Si quelqu'un peut me donner un ptit coup de patte ce serait vraiment cool !

Merci d'avance
Modifié par Wimble (15 May 2013 - 21:08)
Salut,
Pas vraiment compris pourquoi tu fais une requête ajax pour récupérer les données. Mais peut être que je n'est pas toutes les infos.

Concernant ton problème, regarde du côté de la doc jQuery. Je ne crois pas que la fonction ajax() retourne les données de cette façon.

var jsonData = $.ajax({
J'utilise l'ajax parce que je récupère mes les données dans ma base mais je n'ai pas jugé utile de le faire apparaître.
Ce mode de récupération des données via Ajax vient de la page de Google Chart Tools ICI donc je pense que c'est fonctionnel
Ok, c'est le async: false que je n'avais pas compris. Que donne un console.log(jsonData) après la fonction ajax.

a écrit :
J'utilise l'ajax parce que je récupère mes les données dans ma base mais je n'ai pas jugé utile de le faire apparaître.
Si tu n'as pas d’interaction entre l'utilisateur et tes données tu peux écrire directement tes données json dans ton code html via php.
Essaie de mettre ça dans ton fichier php qui gère ton json.
header('Content-Type: application/json');


Sinon je ne vois pas.
Modérateur
Nope, c'est un problème de type:

en procédant ainsi:


var jsonData = $.ajax({
        …des trucs…
        async: false
    }).responseText;


en reprenant directement responseText, on obtient une chaîne de caractères (qui contient du json).

Ce qui marche bien dans l'exemple cité, car le constructeur accepte soit une chaine contenant du json soit un objet javascript.

Or quand tu utilises cette chaîne dans data.addRows(jsonData); cela ne fonctionne pas car addRows attend soit un entier soit un tableau. Or ce que tu reçois est une chaîne, ce que tu fais est donc l'équivalent de:

data.addRows('[["Homme",3],["Femme",3]]');
// au lieu de:
data.addRows([["Homme",3],["Femme",3]]);


La solution

Laisser jQuery faire la conversion:


var jsonData = null;
 $.ajax({
        url: "./include/traitement_stat.php",
        type: "POST",
        data: "h_f=1",
        dataType: 'json',
        async: false,
        success: function(data) {
          jsonData = data;
        }
 });
Merci beaucoup de votre aide ! Je viens de trouver une solution similaire à celle de Kustolovic

Je récupérais bien une chaîne de caractère, il suffit ensuite de lui appliquer un JSON.parse() comme ça : 
var DATA = JSON.parse(jsonData);


Et ça fonctionne au poil Smiley lol

Merci encore de votre aide et bonne soirée à vous 2
Modérateur
J'ai proposé la solution de laisser jQuery le faire car même si JSON.parse est maintenant bien implanté il manque quelques compatibilités: http://caniuse.com/json

Or comme jQuery implémente un polyfill, autant le laisser faire ça bien Smiley langue
J'ai effacé mon précédent message.

Je penses qu'il parle de 
var jsonData = null;

Modifié par benj (16 May 2013 - 00:01)
Sujet clos
Aller à