La construction de tableau et mise en forme de JSON pour Google API de Cartographie
Je suis en train de travailler sur un projet où je suis de faire usage de Google Cartographie de l'API et je veux remplir le tableau en utilisant json pour construire la table de données.
Comme un test, je suis en train de construire un tableau simple avant j'ai essayer de le faire avec des données dynamiques à partir d'une base de données, mais je vais avoir un problème pour faire le json dans le format correct.
Dans google documents, il dit que le contenu json doit être le suivant:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
Je suis l'appel d'une fonction qui retourne le code json.
Ci-dessous est la façon dont la fonction est appelée
print json_encode(test());
et la fonction de test est
function test()
{
$array = array();
$array['cols'][] = "20-01-13";
$array['cols'][] = "21-01-13";
$array['cols'][] = "22-01-13";
$array['rows'][] = 22;
$array['rows'][] = 26;
$array['rows'][] = 12;
return $array;
}
Le javascript qui génère le tableau se présente comme suit
<script>
google.load('visualization', '1', {'packages':['corechart']});
//Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "loadGraph.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
//Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('lineGraph'));
chart.draw(data, {width: 400, height: 240});
}
</script>
Quand je reprends le json, il est retourné dans le format suivant
{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}
et si j'essaie de l'utiliser pour la datasetfor le google chart j'obtiens le message suivant
Cannot read property of '1' of undefined
Je ne suis que la construction d'une ligne simple graphique qui ne contiendront qu'un jour le long de l'axe des x et un compte de combien de fois il est arrivé quelque chose à cette date, le long de l'axe.
Comment puis-je née pour construire la matrice de l'obtenir dans le format correct pour l'api google chart.
Merci pour toute aide que vous pouvez fournir.
j'ai ajouté plus d'informations
Le json renvoyé par votre code php n'est évidemment pas la même chose que ce que vous vous attendez à la sortie, et en ce que le graphique s'attend à ce que des données. Donc, c'est un problème de php la fonction test() qui génère la mauvaise structure de départ. L'erreur de google charts est plutôt déroutant, mais à côté de la question. Désolé je ne peux pas vous aider avec le code php.
OriginalL'auteur Boardy | 2013-06-21
Vous devez vous connecter pour publier un commentaire.
Vous besoin pour spécifier le paramètre type pour cols. Reportez-vous à Google Cartes Format JSON
Votre code PHP doit ressembler à:
Votre code json ressemblerait plus à:
avez-vous essayé la mise à jour du code ci-dessus?
Non désolé, DONC, ne m'a pas donné l'avis qu'il a été mis à jour. Je vais faire un essai ce soir après le travail et obtenir de nouveau à vous
Merci beaucoup cela fonctionne. La seule chose que je ne comprends pas est ce que le
"c"
et"v"
des moyens au sein de la matrice.Il y a un petit problème dans le code. Il devrait être comme ça: function test() { $array['cols'][] = array('type' => 'string'); $array['cols'][] = array('type' => 'nombre'); $array['lignes'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22))); $array['lignes'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26))); $array['lignes'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12))); return $array; }
OriginalL'auteur Fabi
Cela peut être un peu tard, mais de toute façon, voici ce qui a fonctionné pour moi (ce qui est nécessaire pour créer un barchart).
Obtenir le code du serveur de retourner la chaîne json représentant un tableau par exemple quelque chose comme:
Analyser la chaîne à l'aide de
eval()
ouJSON.parse()
pour obtenir l'objet JavaScript.Créer un objet DataTable en tant que tel:
Ajouter des colonnes de la table de données :
Boucle à travers le tableau de javascript (
chartData
) et pour chaque objet dans le tableau, ajouter une nouvelle ligne à ladataTable
:OriginalL'auteur Kelli
il devrait ressembler à:
puis
OriginalL'auteur GoldenTabby