Javascript Girl
  1. Javascript Girl
  3. Données dynamiques avec Google Charts
Intereting Posts
Faire une sélection et ajouter une balise dynamiquement en JavaScript Comprendre l'exécution du script asynchrone dans Selenium Javascript substr (); Limiter par mot non char Le nom de l'entité doit immédiatement suivre le '&' dans la référence de l'entité Comment obtenir un texte de réussite dans ExtJS? Imprimez le nom de la sous-classe au lieu de «Classe» lors de l'implémentation de l'héritage de la classe JavaScript de John Resig Accédez à l'URL d'une requête jquery Ajax dans la fonction Callback Comment utiliser l'URL Blob, MediaSource ou d'autres méthodes pour jouer des blobs concaténés de fragments de médias? Comment afficher / masquer une grande image en cliquant sur les vignettes? Comment créer une application Web sans installation, côté client, base de données Comment obtenir les résultats de JSON sur Google Maps? Carte Google ne remplissant pas le mode popup modal Etiquetage avec AJAX dans select2 Quelle différence existe-t-il dans JavaScript entre une fonction de constructeur et l'objet de retour de fonction qui est invoqué en tant que constructeur? Menu contextuel personnalisé en d3 et svg

Données dynamiques avec Google Charts

J'ai besoin que mon graphique Google soit dessiné avec des données dynamiques, donc je le stocke dans une variable: 

var rowData = "[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]";

Je passe ensuite cette variable dans la fonction de Google: 

  google.load('visualization', '1', { packages: ['orgchart'] }); //google.setOnLoadCallback(drawChart); function drawChart(json) { data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); data.addRows([ rowData ]); chart = new google.visualization.OrgChart(document.getElementById('orgChart')); chart.draw(data, { allowHtml: true }); google.visualization.events.addListener(chart, 'select', selectHandler); }

Cependant, cela me donne une "Chaque ligne donnée doit être nulle ou un tableau". Erreur. Si je supprime la variable et que je passe les données directement, ça marche bien: 

  ... data.addRows( [ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ] ); ...

Est-ce que quelqu'un peut m'aider ce qui se passe ici? Merci d'avance.

Dans votre premier exemple, les données sont une chaîne unique, dans le deuxième exemple, vos données sont une structure JavaScript de tableaux et de chaînes / valeurs individuelles.

Difficile de recommander une meilleure pratique sans savoir d'où proviennent les données dynamiques, mais vous devriez pouvoir supprimer les citations les plus externes de cette façon et faire fonctionner: 

 var rowData = [ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ];

En renvoyant dans les guillemets doubles, rowData devient une chaîne alors que l'API a besoin d'une matrice. Utilisez-le comme ça 

 var rowData = [ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ];