2010-07-16 5 views
4

Dans le passé, je l'ai utilisé la méthode suivante pour analyser les données JSON de façon appropriée, je peux remplir une boîte de sélection:JSON javascript - graphiques google

var request = null; 

request = $.ajax({ 
type: "POST", 
url: "url goes here", 
dataType: 'text', 
success: function(returned){ 
    returned = JSON.parse(returned) 

    $.each(returned, function(selectid,item) 
    { 
     var sel = $("#"+selectid).get(0); 
     sel.options.length=0; 

     $.each(item, function(i,subitem){ 
      sel.options[i]=new Option(subitem.text, subitem.value); 
     }); 
    }); 

    request = null; 
    } 
}); 

Comment puis-je appliquer la même technique du code ci-dessous , mais sans une boîte de sélection, juste analyser le json dans la fonction drawChart?

$.ajax({ 
url: 'chart_json.aspx', 
type: 'POST', 
dataType: 'text', 
success: function(data) { 
    drawChart(data); 
} 
}); 

Répondre

4

Je pense que votre problème réside dans votre réponse ajax, je procédez comme suit:

dans votre réponse:

{ 
    graphData : [ 
    ['user1',{v:0.00, f:'0.00'}], 
    ['user2',{v:0.00, f:'0.00'}], 
    ['user3',{v:0.00, f:'0.00'}], 
    ['user4',{v:0.00, f:'0.00'}], 
    ['user5',{v:0.00, f:'0.00'}] 
    ], 
    status : "ok" 
} 

dans votre js:

$.ajax({ 
    url: 'get_json.aspx', 
    type: 'POST', 
    dataType: 'json',//this is important 
    success: function(data) { 
    //this is not vital, but it's nice to check the response 
    if(typeof data === "object" && data.status === "ok"){ 
     graphData = data.graphData; 
     drawVisualization(graphData); 
    } 
    } 
}); 

Espérons que cela aide, Sinan.

+0

Je viens d'essayer, et je reçois toujours une page blanche. J'ai mis à jour ma question pour montrer le script complet et à quoi ressemblent les données json maintenant. – oshirowanen

+1

Aller déjeuner. Retour dans un peu. – oshirowanen

+0

J'ai mis à jour la question originale. – oshirowanen

3
$.ajax({ 
    url: 'get_json.aspx', 
    type: 'POST', 
    dataType: 'json', // as noted by Sinan 
    success: function(data) { 
    drawVisualization(data); 
    } 
}); 

function drawVisualization(serverData) { 
    var chartData = []; 
    for(var i = 0; i < serverData.length; i++) { 
     chartData.push([serverData[i][0], serverData[i][1].v]); 
    } 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'WIP'); 
    data.addColumn('number', 'Percentage'); 
    data.addRows(chartData); 
    new google.visualization.PieChart(document.getElementById('visualization')).draw(data, {width: 400, height: 240, is3D:true});  
} 

Le tableau ChartData doit avoir 2 colonnes (puisque vous appelez addColumn deux fois sur le google.visualization.DataTable) avec une chaîne et un numéro dans chaque ligne.

Exemple here

+0

Salut, Merci pour la réponse. J'ai mis à jour la question ci-dessus en réponse à votre réponse. Fondamentalement, je reçois une page blanche avec une erreur et j'ai corrigé le problème de données json que vous avez souligné. – oshirowanen

+0

J'ai déplacé google.load hors de la section document.ready, et j'obtiens maintenant l'erreur suivante: L'argument donné à addRows doit être un nombre ou un tableau Line: – oshirowanen

+0

Le tableau que vous transmettez à addRows doit être organisé en fonction de comment vous avez appelé 'addColumn' sur la table de données. J'ai mis à jour ma réponse. – sje397