Cette page explique comment utiliser des graphiques Google avec des feuilles de calcul Google.
Présentation
Les graphiques et les feuilles de calcul Google sont étroitement intégrés. Vous pouvez insérer un graphique Google dans une feuille de calcul Google, et extraire des données des feuilles de calcul Google. Cette documentation vous explique comment faire les deux.
Quelle que soit la méthode choisie, votre graphique est modifié chaque fois que la feuille de calcul sous-jacente est modifiée.
Intégrer un graphique dans une feuille de calcul
Il est très facile d'inclure un graphique dans une feuille de calcul. Dans la barre d'outils des feuilles de calcul, sélectionnez "Insérer", puis "Graphique". Vous pouvez alors choisir le type de graphique et choisir les options:
Créer un graphique à partir d'une feuille de calcul distincte
En règle générale, les utilisateurs créent des graphiques Google en remplissant un tableau de données et en dessinant le graphique à l'aide de ces données. Si vous souhaitez récupérer les données d'une feuille de calcul Google, vous allez interroger la feuille de calcul pour récupérer les données à représenter dans le graphique:
function drawChart() {
var query = new google.visualization.Query(URL);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, null);
}
En effet, les feuilles de calcul Google sont compatibles avec le langage de requête Google Charts pour le tri et le filtrage des données. Tout système prenant en charge le langage de requête peut être utilisé comme source de données.
Notez que les graphiques ne peuvent pas utiliser les droits de la personne qui les consulte sans autorisation explicite. La feuille de calcul doit être visible par tous ou l'utilisateur doit explicitement obtenir les identifiants de l'utilisateur final, comme indiqué dans la section Autorisation de cette page.
Pour utiliser une feuille de calcul Google en tant que source de données, vous avez besoin de son URL:
- Ouvrez une feuille de calcul existante. Le format de cette feuille de calcul doit être celui attendu par votre visualisation et les droits de lecture doivent être correctement définis. (Les droits d'accès "Public sur le Web" ou "Tous les utilisateurs disposant du lien" seront plus faciles à suivre, et les instructions de cette section supposent qu'une feuille de calcul a été configurée de cette manière.) Vous pouvez limiter la configuration en gardant la feuille de calcul "Privée" et en accordant l'accès aux comptes Google individuels, mais vous devrez suivre les instructions d'autorisation ci-dessous.
- Copiez l'URL depuis votre navigateur. Pour en savoir plus sur la sélection de plages spécifiques, consultez la page Plages de requêtes des requêtes.
- Indiquez l'URL à
google.visualization.Query(). La requête accepte les paramètres facultatifs suivants :headers=N: spécifie le nombre de lignes d'en-tête, où N est un entier égal ou supérieur à zéro. Elles seront exclues des données et attribuées en tant que libellés de colonne dans la table de données. Si vous ne spécifiez pas ce paramètre, la feuille de calcul devine combien de lignes sont des lignes d'en-tête. Notez que si toutes vos colonnes sont des données de chaîne, la feuille de calcul peut avoir des difficultés à déterminer quelles lignes sont des lignes d'en-tête sans ce paramètre.gid=N: indique la feuille d'un document multifeuille à associer, si vous ne créez pas de lien vers la première feuille. N est l'ID de la feuille. Vous pouvez obtenir l'ID en accédant à la version publiée de cette feuille et en recherchant le paramètregid=Ndans l'URL. Vous pouvez également utiliser le paramètresheetà la place. Gotcha:Google Sheets peut réorganiser le paramètre "gid" de l'URL lorsqu'il est consulté dans un navigateur. Si vous effectuez une copie à partir d'un navigateur, assurez-vous que tous les paramètres se trouvent avant le signe#de l'URL. Exemple :gid=1545912003.sheet=sheet_name: indique à quelle feuille d'un document multifeuille vous êtes lié, si vous ne créez pas de lien vers la première feuille. sheet_name est le nom à afficher de la feuille. Exemple :sheet=Sheet5.
Voici un exemple complet:
Voici deux façons de dessiner ce graphique : l'une avec le paramètre gid et l'autre avec le paramètre sheet. Si vous saisissez l'une ou l'autre de ces URL dans le navigateur, vous obtenez le même résultat pour le graphique.
function drawGID() {
var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
Plages de requêtes des sources
L'URL de la source de la requête spécifie quelle partie d'une feuille de calcul utiliser dans la requête: une cellule spécifique, une plage de cellules, des lignes ou des colonnes, ou une feuille de calcul entière. Spécifiez la plage à l'aide de la syntaxe "range=<range_expr>", par exemple:
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
Voici quelques exemples illustrant la syntaxe:
A1:B10: plage de cellules A1 à B105:7– Lignes 5 à 7D:F– Colonnes D-FA:A70: 70 premières cellules de la colonne A-
A70:A: colonne A de la ligne 70 à la fin B5:5: de B5 à la fin de la ligne 5D3:D: D3 jusqu'à la fin de la colonne DC:C10: depuis le début de la colonne C jusqu'à C10
Autorisation
Google Sheets nécessite que les identifiants de l'utilisateur final accèdent aux feuilles de calcul privées via l'API Google Visualization ("requêtes ttq").Remarque:Les feuilles de calcul partagées avec "Tous les utilisateurs disposant du lien peuvent consulter" ne nécessitent pas d'identifiants. Modifier les paramètres de partage de votre feuille de calcul est bien plus simple qu'implémenter une autorisation.
Si le partage par lien n'est pas viable, les développeurs doivent modifier leur code afin de transmettre des identifiants OAuth 2.0 autorisés pour le champ d'application de l'API Google Sheets (https://www.googleapis.com/auth/spreadsheets).
Des informations complémentaires sur OAuth 2.0 sont disponibles sur la page Utiliser OAuth 2.0 pour accéder aux API Google.
Exemple: Utiliser OAuth pour accéder à /gviz/tq
Condition préalable: obtenir un ID client à partir de la Google Developers Console
Des instructions plus détaillées pour l'intégration à Identity Platform de Google sont disponibles sur les pages Google Sign-In et Création d'un projet de console d'API Google et d'un ID client.
Pour obtenir des jetons OAuth pour un utilisateur final, vous devez d'abord enregistrer votre projet dans la Google Developers Console et obtenir un ID client.
- Dans la console développeur, créez un ID client OAuth.
- Sélectionnez Application Web comme type d'application.
- Choisissez n'importe quel nom. Ce nom est uniquement fourni à titre informatif.
- Ajoutez le nom de votre domaine (et de tous les domaines de test) en tant que Origines JavaScript autorisées.
- Laissez le champ URI de redirection autorisés vide.
Après avoir cliqué sur "Créer", copiez l'ID client pour vous y référer ultérieurement. Le code secret du client n'est pas nécessaire pour cet exercice.
Mettez à jour votre site pour obtenir les identifiants OAuth.
Google fournit la bibliothèque gapi.auth qui simplifie considérablement le processus d'acquisition des identifiants OAuth. L'exemple de code ci-dessous utilise cette bibliothèque pour acquérir des identifiants (en demandant une autorisation si nécessaire) et les transmet au point de terminaison /gviz/tq.
<html> <body> <button id="authorize-button" style="visibility: hidden">Authorize</button> <script src="./demo.js" type="text/javascript"></script> <script src="https://apis.google.com/js/auth.js?onload=init"></script> </body> </html>demo.js
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';
function init() {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: true},
handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: false},
handleAuthResult);
return false;
}
function makeApiCall() {
// Note: The below spreadsheet is "Public on the web" and will work
// with or without an OAuth token. For a better test, replace this
// URL with a private spreadsheet.
var tqUrl = 'https://docs.google.com/spreadsheets' +
'/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
'?tqx=responseHandler:handleTqResponse' +
'&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);
document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}
function handleTqResponse(resp) {
document.write(JSON.stringify(resp));
}
Une fois l'autorisation effectuée, gapi.auth.getToken() renvoie tous les détails des identifiants, y compris le access_token qui peut être ajouté aux requêtes /gviz/tq.
Pour en savoir plus sur l'utilisation de la bibliothèque gapi pour l'authentification, consultez les pages suivantes:
- Authentification à l'aide de la bibliothèque cliente des API Google pour JavaScript
- Utiliser CORS pour accéder aux API Google
Utiliser le champ d'application Drive.file
L'exemple précédent utilise le champ d'application de l'API Google Sheets, qui accorde un accès en lecture et en écriture à tout le contenu de la feuille de calcul d'un utilisateur. Selon l'application, cela peut être plus permissif que nécessaire. Pour un accès en lecture seule, utilisez le champ d'application spreadsheets.readonly, qui accorde un accès en lecture seule aux feuilles de l'utilisateur et à ses propriétés.
Le champ d'application drive.file (https://www.googleapis.com/auth/drive.file) n'accorde l'accès qu'aux fichiers que l'utilisateur ouvre explicitement avec le sélecteur de fichier Google Drive, lancé via l'API Picker.
L'utilisation du sélecteur modifie le flux de votre application. Plutôt que de coller une URL ou d'avoir une feuille de calcul codée en dur comme dans l'exemple ci-dessus, l'utilisateur doit utiliser la boîte de dialogue "Sélecteur" pour choisir la feuille de calcul à laquelle votre page doit accéder. Suivez l'exemple "Hello World" de l'outil de sélection en utilisant google.picker.ViewId.SPREADSHEETS à la place de google.picker.ViewId.PHOTOS.