Share
Les outils de graphique Google offrent plusieurs moyens d'ajouter facilement des graphiques à une page Web. Les graphiques peuvent être statiques ou interactifs, et dans ce tutoriel, nous allons apprendre à les utiliser tous les deux..
Les outils de graphique peuvent générer deux types de graphiques différents: cartes d'image (graphiques statiques) et tableaux interactifs.
Les graphiques d'image sont assez faciles à utiliser, cependant, les graphiques interactifs sont beaucoup plus flexibles, car ils peuvent déclencher des événements que nous pouvons utiliser pour interagir avec d'autres éléments de la page..
Oui, il existe un moyen très facile d’inclure un graphique dans votre page - aussi simple que d’écrire une URL telle que celle-ci:
images_27_3 / easy-graphs-with-google-chart-tools.jpg
Si vous copiez et collez cette URL dans votre navigateur, vous verrez ce qui suit:
Vous pouvez placer l'image n'importe où dans votre page en utilisant l'URL comme src attribut d'une balise d'image:
C'est l'API Google Charts. Les demandes sont envoyées sous forme d'URL GET ou POST et le serveur de graphiques Google renvoie une image PNG en réponse. Le type de graphique, les données et les options sont tous spécifiés dans la chaîne de requête de l'URL. L'API définit comment faire cela. Passons en revue les différentes options.
http://chart.apis.google.com/chart?
Ceci est l'URL de base; nous allons l'utiliser pour toutes les requêtes de charte d'image. Les autres sont des paramètres de la forme nom = valeur séparée par &.
Il n'y a que trois paramètres obligatoires: cht, chs et chd. Le reste est optionnel.
cht = p3
C'est le type de graphique. Nous utilisons un camembert 3D qui est p3. Vous pouvez visiter la galerie de cartes pour tous les types de cartes disponibles.
chs = 450x200
C'est la taille du graphique en pixels (largeur x hauteur).
chd = t: 2,4,3,1
Ce sont les données à afficher dans le graphique. La première lettre (t) indique le format de données. Dans ce cas, nous utilisons le format de texte de base qui est une liste de valeurs séparées par des virgules.
Chaque type de graphique a quelques paramètres facultatifs pour configurer certains aspects de votre graphique: titre, étiquettes, types de police, couleurs, dégradés, etc. Voici ce que nous avons inclus:
chl = téléphones | ordinateurs | services | autres
Étiquettes pour chaque tranche de tarte.
chtt = Société% 20Ventes
Titre du graphique.
chco = ff0000
Couleur du graphique au format hexadécimal rrggbb.
Si vous spécifiez une seule couleur, les tranches auront des gradations différentes. Vous pouvez également spécifier un dégradé avec deux couleurs (chco = ff0000,00ff00) ou une couleur pour chaque tranche (chco = ff0000 | 3355aa | 8322c2 | 112233).
C'est tout pour les graphiques d'image. Il n'y a pas grand chose à faire! Il existe de nombreux types de graphiques disponibles et, si vous jouez avec les paramètres, vous obtiendrez de très bons résultats. Google Live Chart Playground est un excellent outil pour ce faire. Vous jouez avec des paramètres et observez les modifications apportées à l'image générée - un moyen facile d'ajuster l'URL de votre graphique.!
Pour inclure des graphiques interactifs dans vos pages Web, vous devez utiliser une API différente: le API de visualisation Google. Dans ce cas, l'interface n'est pas une URL. Vous devrez utiliser une bibliothèque JavaScript et écrire quelques lignes de code - mais rien de difficile.
Il existe une galerie de visualisations prédéfinies (graphiques) que vous pouvez utiliser. Vous pouvez également créer et partager votre propre graphique, mais les visualisations de la galerie couvriront probablement la plupart de vos besoins en matière d'affichage de données..
Le niveau d'interactivité dépend des visualisations particulières que vous utilisez. Généralement, le graphique réagit d'une certaine manière lorsque vous cliquez dessus (affiche une info-bulle ou une animation), mais la fonctionnalité vraiment puissante est qu'ils peuvent déclencher des événements et que vous pouvez enregistrer des rappels pour effectuer toute action liée à cet événement. Des exemples d’événements peuvent être la sélection d’une barre ou d’une tarte, de mouseOver, mouseOut, etc..
Nous utiliserons des données locales pour alimenter les visualisations de nos exemples, mais vous pouvez obtenir vos données de toute autre manière. Une option courante serait de récupérer les données d'une base de données en utilisant AJAX. Vous pouvez même utiliser le API de visualisation; il définit également un moyen de demander et d'offrir (pour les serveurs) des données dans un format qui peut être immédiatement utilisé dans n'importe quelle visualisation, mais nous ne couvrirons pas cela ici..
Peu importe la manière dont nous obtenons nos données, mais toutes les visualisations doivent les recevoir dans un objet DataTable. C'est fondamentalement un tableau avec des lignes et des colonnes. Chaque colonne est définie avec un type de données particulier (et un ID et une étiquette qui sont facultatifs).
Pour référencer une cellule particulière du tableau, vous utilisez la paire (rangée, colonne). La ligne est toujours un nombre, commençant un zéro. La colonne peut également être un numéro de base zéro ou un identifiant facultatif.
Si nous voulons afficher les résultats de notre société en 2009 dans un diagramme à colonnes, nous devons préparer les données de la manière suivante:
| Trimestre 2009 | Gains |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Deux colonnes: la première (avec le type 'chaîne') est l'étiquette de chaque barre du graphique, et la seconde (avec le type 'nombre') est la valeur de cette barre. Nous avons quatre lignes ce qui signifie bien avoir quatre barres pour afficher.
Comment pouvons-nous mettre cela dans un objet DataTable? C'est le code pour le faire - chaque ligne est expliquée plus tard:
Accentsconagua
// créer un objet de table de données var dataTable = new google.visualization.DataTable (); // définit les colonnes dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('nombre', 'Gains'); // définit les lignes de données dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]); Tout d'abord, nous créons notre objet DataTable avec:
var dataTable = new google.visualization.DataTable ();
Ensuite, nous définissons les deux colonnes de notre table en utilisant la méthode addColumn (). La première valeur est le type et la deuxième valeur est l'étiquette optionnelle..
dataTable.addColumn ('chaîne', 'Quarters 2009'); dataTable.addColumn ('nombre', 'Gains'); Et enfin, nous définissons les lignes de données en utilisant la méthode addRows ().
dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]);
Chaque ligne est un tableau et toutes les données sont également contenues dans un autre tableau..
Les lignes peuvent également être définies ligne par ligne:
dataTable.addRow (['Q1', 308]);
ou même une cellule à la fois:
data.setValue (0, 0, 'Q1');
Ici, les deux premiers nombres sont la ligne et la colonne, respectivement.
C'est le moyen de créer des objets DataTable. Chaque visualisation doit être chargée avec des données dans ce format. Cela ne signifie pas que la table est la même pour toutes les visualisations. Le nombre et le type particuliers de colonnes et de lignes doivent être vérifiés dans la documentation de chaque diagramme..
Pour ce premier exemple, nous utiliserons un graphique à colonnes pour présenter nos données. Dans la galerie de visualisation de Google, vous pouvez cliquer sur n’importe quel type de graphique pour afficher la documentation et des exemples..
Pour utiliser n'importe quelle visualisation, nous devons charger l'API Google AJAX avant; il fournit la fonctionnalité de base nécessaire dans de nombreuses autres API Google.
Nous pouvons maintenant charger l'API de visualisation à l'aide de la fonction google.load () (à partir de l'API AJAX):
google.load ('visualisation', '1', 'packages': ['diagramme à colonnes']); Le second paramètre, "1", fait référence à la version de l'API à charger ("1" signifie la version actuelle). 'packages' est un tableau contenant toutes les visualisations que nous allons utiliser. Dans ce cas, nous n'en utiliserons qu'un: le graphique à colonnes.
À ce stade, nous disposons des bibliothèques nécessaires pour créer notre objet DataTable et afficher notre graphique. Cependant, nous devons nous assurer que la visualisation est complètement chargée, sinon nous aurons des erreurs JavaScript et notre graphique ne s'affichera pas..
Pour ce faire, vous devez enregistrer un rappel. La fonction sera appelée lorsque la visualisation (API et package) sera chargée..
// set callback google.setOnLoadCallback (createChart);
La fonction createChart est l'endroit où nous créons notre table de données et notre graphique. Le code final complet est:
Tutoriel Google Charts
L'objet graphique est créé avec cette ligne:
var chart = new google.visualization.ColumnChart (document.getElementById ('chart')); L'argument est la référence DOM à l'élément contenant la visualisation. Dans ce cas, nous avons un
.Ensuite, nous définissons les options que nous voulons et dessinons le graphique:
var options = width: 400, height: 240, is3D: true, titre: 'Gains d'entreprise'; chart.draw (dataTable, options);
Notre graphique ressemble à ceci:
Remarque: toutes les images ici sont statiques pour rendre le didacticiel disponible quel que soit votre navigateur ou vos paramètres JavaScript. Revoir la démo en direct pour la version interactive.
L’avantage d’un format de données clairement défini est qu’une fois que vous savez comment créer et remplir un objet DataTable, vous savez comment alimenter n’importe quelle visualisation. Il vous suffit de consulter la documentation pour voir la table particulière (nombre et type de colonnes) que vous devez construire.
Pour un graphique à secteurs, nous pouvons utiliser exactement le même tableau que nous avons maintenant. Ajoutons un graphique en secteurs dans la même page.
Nous devons ajouter notre nouveau paquet dans la ligne google.load ():
google.load ('visualisation', '1', 'packages': ['diagramme à colonnes', 'Captionnaire']); et étendre notre fonction createChart avec ces deux lignes:
var secondChart = new google.visualization.PieChart (document.getElementById ('secondChart')); secondChart.draw (dataTable, options); Le code complet est:
Tutoriel Google Charts
Et les graphiques générés:
Remarque: vérifiez la démonstration en direct pour la version interactive.
Dans ce cas, la tâche était simple, car les deux visualisations utilisaient les mêmes colonnes et lignes de table. Cependant, certaines visualisations nécessitent davantage de colonnes ou de types différents et vous ne pouvez pas utiliser directement la table de données. Toutefois, vous pouvez résoudre ce problème en générant une vue différente de la table d'origine pour alimenter une visualisation. Nous examinerons cela sous peu.
La table de données d'un graphique à colonnes n'a pas besoin d'être aussi simple que dans l'exemple précédent. Par exemple, nous pouvons avoir des barres représentant les gains de chaque trimestre au cours des trois dernières années. Dans ce cas, les données
la table ressemblerait à ceci:
| Trimestres | Résultats 2009 | Gains 2008 | Gains 2007 |
|---|---|---|---|
| Q1 | 308 | 417 | 500 |
| Q2 | 257 | 300 | 420 |
| Q3 | 375 | 350 | 235 |
| Q4 | 123 | 100 | 387 |
Le seul code que nous devons modifier par rapport à notre premier exemple est l’objet DataTable, qui permet d’ajouter deux colonnes et plus de données dans chaque ligne:
// créer un objet de table de données var dataTable = new google.visualization.DataTable (); // définit les colonnes dataTable.addColumn ('string', 'Quarters'); dataTable.addColumn ('number', 'Earnings 2009'); dataTable.addColumn ('number', 'Earnings 2008'); dataTable.addColumn ('number', 'Earnings 2007'); // définit des lignes de données dataTable.addRows ([['Q1', 308,417,500], ['Q2', 257 300 420], ['Q3', 375 350 235], ['Q4', 123 100 3007]]); Le reste du code ne change pas. Le graphique généré est:
Mais que se passe-t-il si nous voulons maintenant utiliser un graphique à secteurs pour représenter une partie de ces données? Nous ne pouvons pas utiliser la même table de données qu'avant, car les diagrammes à secteurs ont besoin d'une table à deux colonnes (libellé de tranche et valeur). Il existe un moyen simple d'obtenir une table différente à partir d'un objet DataTable existant et de l'utiliser pour alimenter un graphique: Vues de données.
Les vues sont un moyen d’adapter notre tableau pour une visualisation différente. Si nous voulons maintenant afficher, sur la même page, un graphique à secteurs montrant la distribution des bénéfices trimestriels de l'année dernière, le tableau dont nous avons besoin est uniquement le suivant:
| Trimestres | Résultats 2009 |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Une vue de données (objet DataView) vous permet d'utiliser uniquement un sous-ensemble des données d'origine. Vous pouvez réorganiser ou dupliquer des colonnes et des lignes ou introduire des colonnes avec des valeurs calculées.
Tout d'abord, créez l'objet View:
var view = new google.visualization.DataView (dataTable);
Une vue de données est initialisée avec la table d'origine puis nous utilisons les méthodes DataView pour masquer, afficher ou filtrer les colonnes ou les lignes (setColumns (), hideColumns (), setRows (), hideRows (), getFilteredRows, getColumnRange, etc.).
Nous pouvons filtrer la table d'origine pour obtenir uniquement les deux premières colonnes (colonnes 0 et 1) à l'aide de setColumns ():
view.setColumns ([0, 1]);
Nous pouvons maintenant dessiner le graphique à secteurs en utilisant cette vue comme table de données:
secondChart.draw (vue, options);
N'oubliez pas que nous devons inclure le paquetarthart avec google.load () et créer l'objet pieChart avec:
var secondChart = new google.visualization.PieChart
Nous pouvons maintenant voir les deux graphiques générés à l'aide du même tableau de données:
Les événements constituent un moyen simple de relier vos visualisations à d’autres éléments de votre page. Les visualisations peuvent déclencher certains événements et vous pouvez enregistrer un écouteur pour réagir à cet événement et effectuer certaines actions. Le modèle d'événement est similaire au modèle d'événement du navigateur. Encore une fois, nous devons regarder la documentation pour vérifier les événements déclenchés pour chaque visualisation.
Pour montrer comment les événements fonctionnent, revenons à notre premier exemple, le diagramme à colonnes le plus simple:
Ce graphique déclenche des événements au passage de la souris, à la souris et à la sélection. Cela signifie que nous pouvons le rendre beaucoup plus interactif que par défaut.
Dans la mesure où ce graphique présente les revenus d’une entreprise, il peut être intéressant d’afficher un message avec une brève explication des réalisations ou des ventes les plus importantes de chaque trimestre lorsque l’utilisateur place le pointeur sur une colonne (sur la souris un événement).
Notre rappel sera afficher les détails(), et nous l'enregistrons pour le sur la souris un événement:
google.visualization.events.addListener (chart, 'onmouseover', showDetails);
Le premier paramètre est la variable qui contient notre objet graphique.
Nous devrons également masquer le message lorsque le pointeur sort de la colonne; nous avons donc besoin d'une autre fonction pour pouvoir être appelée lorsque onmouseout déclencheurs d'événements:
google.visualization.events.addListener (diagramme, 'onmouseout', hideDetails);
Dans le
ou notre page HTML, nous devons définir quatre divs avec les messages:Ce sont les détails pour Q1…Ici vous avez les chiffres pour Q2…Explications pour le troisième trimestre…Q4 était comme prévu…
Et ensuite, les fonctions de rappel affichent ou masquent le message correspondant:
function showDetails (e) switch (e ['rangée']) case 0: document.getElementById ('details0'). style.visibility = 'visible'; Pause; cas 1: document.getElementById ('details1'). style.visibility = 'visible'; Pause; cas 2: document.getElementById ('details2'). style.visibility = 'visible'; Pause; cas 3: document.getElementById ('details3'). style.visibility = 'visible'; Pause; function hideDetails (e) switch (e ['rangée'])) cas 0: document.getElementById ('details0'). style.visibility = 'caché'; Pause; cas 1: document.getElementById ('details1'). style.visibility = 'hidden'; Pause; cas 2: document.getElementById ('details2'). style.visibility = 'hidden'; Pause; cas 3: document.getElementById ('details3'). style.visibility = 'hidden'; Pause; Nos fonctions acceptent un seul paramètre: l'événement déclenché. Cet objet contient toutes les informations disponibles sur les détails de l'événement..
Pour savoir quelle barre nous sommes, vérifiez la propriété 'row' de l'objet event. Ces informations concernent les lignes et les colonnes de l'objet DataTable, mais nous savons que la ligne 0 correspond à Q1, à la première colonne, etc..
Remarque: Tous les événements ne transmettent pas l'objet événement. Parfois, vous devez utiliser des méthodes pour obtenir les informations dont vous avez besoin, lisez la documentation de visualisation pour savoir comment obtenir les informations relatives à l'événement déclenché..
La liste suivante inclut le code complet pour cet exemple. J'ai inclus un court extrait de code CSS interne pour masquer les divs de message et fournir un formatage minimal.
Didacticiel sur les outils Google Chart Ce sont les détails pour Q1…Ici vous avez les chiffres pour Q2…Explications pour le troisième trimestre…Q4 était comme prévu…
Et voici le résultat:
Encore une fois, vérifiez la démonstration en direct pour voir l'interactivité.
Comme pour les images statiques, il existe un Google Code Playground où vous pouvez jouer avec vos visualisations et paramètres et afficher les résultats:
Espérons que cela devrait suffire à vous familiariser avec les outils de graphique Google. Une fois que vous avez compris, vous constaterez qu’une grande flexibilité est disponible dans vos applications Web. Merci d'avoir lu!
