Mise en forme de graphique Google

J'ai le script suivant que j'ai besoin de modifier un peu. Voici le JSON:Mise en forme de graphique Google

[ 
    {"User1":{"v": 50.00,"f": "£100"}}, 
    {"User2":{"v": 10.00,"f": "£20"}}, 
    {"User3":{"v": 10.00,"f": "£20"}}, 
    {"User4":{"v": 10.00,"f": "£20"}}, 
    {"User5":{"v": 20.00,"f": "£40"}} 
]

et voici le script:

<html> 
<head> 
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChartAjax); 

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

    function drawChart(json) { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'User'); 
     data.addColumn('number', 'v'); 
     data.addRows(json.length); 
     for(var j in json) { 
      for(var k in json[j]) { 
       data.setValue(parseInt(j), 0, k); 
       data.setValue(parseInt(j), 1, json[j][k].v); 
      } 
     } 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Work In Progress'}); 
    } 
</script> 
</head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

Cela fonctionne en me donnant une belle piechart, Comment puis-je obtenir la valeur « f » dans le tableau aussi de la JSON Les données?

Source

2010-07-16 oshirowanen

Ajouter une colonne f:

data.addColumn('number', 'v'); 
data.addColumn('number', 'f'); // <- new line

Et, ajoutez les données aux lignes:

for(var k in json[j]) { 
    data.setValue(parseInt(j), 0, k); 
    data.setValue(parseInt(j), 1, json[j][k].v); 
    data.setValue(parseInt(j), 2, parseInt(json[j][k].f.substring(1))); // <- new line 
}

Mais, je ne sais pas comment un diagramme circulaire qui gère.

Source

2010-07-16 16:02:34 sje397

Je reçois une erreur de type incompatibilité. – oshirowanen

Ah - parce que les données ne sont pas numériques (à cause du symbole dièse). Vous pouvez soit le rendre numérique (côté serveur ou client), soit changer le type de données pour la colonne f de 'nombre' à 'chaîne'. – sje397

J'ai mis à jour ma réponse pour montrer comment insérer ces données en gardant le type de données 'nombre'. Il coupe juste le premier caractère (le symbole de la livre) et ensuite analyse la chaîne à un int. – sje397

Mise en forme de graphique Google

Répondre

Questions connexes