Numeriblog Google Workspace Google Apps Script, la puissance des outils Google à portée de scripts Google Sheets, Slides, Apps Script : générer des graphiques sur mesure : la jauge

Google Sheets, Slides, Apps Script : générer des graphiques sur mesure : la jauge

Google Sheets permet de créer rapidement un grand nombre de graphiques différents et optimise régulièrement les possibilités de mises en forme. Pour autant, il arrive qu’aucune des nombreuses possibilités graphiques ne permette de répondre à […]

personnes ont consulté cet article

3 minutes

Rédigé par Antoine MARTIN - il y a 2 ans

Ce que vous allez découvrir

  • Comment créer une image à partir d'un fichier Slides pour l'intégrer dans Sheets ?
  • Créer le Sheets et le script

Google Sheets, Slides, Apps Script : générer des graphiques sur mesure : la jauge

Google Sheets permet de créer rapidement un grand nombre de graphiques différents et optimise régulièrement les possibilités de mises en forme. Pour autant, il arrive qu’aucune des nombreuses possibilités graphiques ne permette de répondre à un besoin très précis. Voici un article sur la création de graphique sur mesure.


Un client m’a récemment demandé de créer un graphique sous forme de jauge, comprenant cinq secteurs différents. L’aiguille devait indiquer au centième près un pourcentage donné par une feuille de calcul.

Voici ce que Sheets propose :
(voir l’article suivant sur ce type de graphique)

Voici ce que le client souhaite :

La jauge native du tableur ne propose que trois zones, et graphiquement le client souhaitait un compteur personnalisable.

J’ai opté pour une solution de génération d’images à la volée en utilisant Google Slides.

Comment créer une image à partir d’un fichier Slides pour l’intégrer dans Sheets ?

Le principe général : un script, lancé depuis Sheets, appelle une présentation Google Slides, modèle représentant la jauge avec l’aiguille à zéro, modifie la rotation de l’aiguille en fonction de la valeur de Sheets, retourne la diapositive modifiée sous forme d’image et l’insère dans l’onglet Sheets.

Créer la présentation modèle

L’aiguille doit faire partie d’un groupe et comprend une partie transparente, image opposée de la partie visible, afin de déplacer l’axe de rotation de l’objet au niveau de l’axe de rotation de l’aiguille. En effet, le point de rotation de l’objet est toujours situé en son centre. Pour qu’il soit situé au bon endroit, il faut que l’objet soit deux fois plus grand que ce qu’il n’y paraît.

objet aiguille avec centre de rotation bien placé.
Google Slides
Le groupe de formes compose une aiguille.

Testez la rotation de l’objet général en utilisant la poignée de rotation.

Récupérez et notez l’ID de la présentation dans son URL :

Créer le Sheets et le script

  • Créez un Google Sheets.
  • Saisissez un nombre en pourcentage et laissez la cellule active.
  • Ouvrez l’éditeur de script. Outils / <> Éditeur de scripts.

Récupérer le score à afficher et vérifier qu’il s’agit bien d’un nombre

const score = SpreadsheetApp.getActiveRange().getValue();
if (!isNaN(score))
{
...
}

le script récupére la valeur de la cellule active.

Ouvrir et modifier la présentation Google Slides

const slidesId = "INSERER L'ID DE VOTRE GOOGLE SLIDES ENTRE LES GUILLEMETS" ;
const slides = SlidesApp.openById(slidesId);
const slideJauge = slides.getSlides()[0];

Ouvrez la présentation avec le service « SlidesApp » (pensez à adapter le script en insérant l’ID de votre présentation Google Slides), et récupérez la première diapositive (l’index 0 de toutes les diapositives).

Récupérer et modifier le groupe d’objets « aiguille »

Attention, pour cet exemple il faut que l’aiguille soit le seul groupe d’objets de toute la diapositive, afin de la repérer facilement parmi ses objets. Chaque secteur est une forme unique, l’aiguille est un groupe de forme.

const aiguille = slideJauge.getGroups()[0];
const rotation = score * 180 ;
aiguille.setRotation(rotation); 

Le script récupère le premier et seul groupe de formes de la diapositive.

La constante « rotation » calcule en degré l’angle de l’aiguille, en multipliant le score par 180 deg (angle plat, révisez votre CM2, ça y est vous savez enfin pourquoi Madame Dérumeau vous cassait les pieds avec ce p***** de rapporteur !).

Fermez la présentation et récupérez le blob

C’est quoi un « blob » ? non Thierry, ce n’est pas un « chlapleau de bleauf qui plotége du sloleil » ! C’est un « Un objet d’échange de données pour les services Apps Script ». Bref, un objet (ici une image) que nous pourrons intégrer dans le Sheets.

Pour récupérer le blob, nous allons faire comme dans l’article exporter une feuille Sheets au format PDF, c’est à dire générer une URL et récupérer son contenu avec le service UrlFetchApp().

slides.saveAndClose();
const url = "https://docs.google.com/presentation/d/" + slidesId + "/export/png";
const token = ScriptApp.getOAuthToken();
const blob = UrlFetchApp.fetch(url, { headers: { 'Authorization': 'Bearer ' + token } });

Tout d’abord, il faut fermer la présentation, pour être sûr que l’URL prendra en compte la modification toute récente de l’aiguille.

Ensuite construire l’URL, en intégrant l’ID de la présentation et en ajoutant « export/png », qui vous l’aurez compris, va exporter le fichier Slides au format PNG. (cliquer ici pour en savoir plus sur les URLs des documents Google) ;

Récupérer une autorisation (Token) de construire le blob.

Enfin, simuler l’accès à l’URL et stocker le contenu dans la constante « blob ».

Insérer l’image dans l’onglet actif

const sheet = SpreadsheetApp.getActiveSheet();
sheet.insertImage(blob, 7 ,1);

Insérer l’image dans la septième colonne et première ligne.

Créer un déclencheur

Les services appelés (Slides et Url) ne sont pas autorisés par un simple onEdit(), il faut créer un déclencheur pour que l’image se génère à chaque modification de la cellule :

Le script dans son intégralité :

Voici toutes les actions dans l’ordre, j’ai ajouté une suppression des images de l’onglet en cours.

/*
*
*
* Script NUMERICOACH - Antoine MARTIN tous droits reservés - 2021
*
*/
function genererJauge() {
  const score = SpreadsheetApp.getActiveRange().getValue();
  const sheet = SpreadsheetApp.getActiveSheet();
  Logger.log(score);
  const slidesId = "REMPLACER PAR L'ID DE VOTRE SLIDE";
  // Si la valeur est un nombre, lancer le script
  if (!isNaN(score)) {
    const images = sheet.getImages();
    images.forEach(function (image) {
      image.remove();
    })
    const slides = SlidesApp.openById(slidesId);
    const slideJauge = slides.getSlides()[0];
    const aiguille = slideJauge.getGroups()[0];
    Logger.log(aiguille.getTitle());
    const rotation = score * 180;
    aiguille.setRotation(rotation);
    slides.saveAndClose();
    const url = "https://docs.google.com/presentation/d/" + slidesId + "/export/png";
    const token = ScriptApp.getOAuthToken();
    const blob = UrlFetchApp.fetch(url, { headers: { 'Authorization': 'Bearer ' + token } });
    sheet.insertImage(blob, 7 ,1);
  }
}
Démonstration de la génération d'image à la volée.

Dans cette démo, la génération de l’image est un peu plus longue que celle du graphique, mais répond à la demande initiale.


En espérant que cet exemple vous permette de résoudre une situation bloquante de création de graphiques sur mesure. L’imagination d’applications n’a plus de limites. Vous pouvez mettre en forme vos données en les interprétant avec Google Slides !

N’hésitez pas à partager vos expériences sur l’utilisation de ce script.

Besoin d'un peu plus d'aide sur Google Slides ?

Des formateurs sont disponibles toute l'année pour vous accompagner et optimiser votre utilisation de Google Slides, que ce soit pour votre entreprise ou pour vos besoins personnels !

Découvrir nos formations Google Slides

Rédacteur

Photo de profil de l'auteur
Antoine MARTIN

Consultant et formateur sur les outils bureautiques, j'ai intégré l'équipe de Numericoach en 2020. J'accompagne les utilisateurs de Google Workspace à trouver des solutions répondant à leurs besoins. Mes domaines de prédilections sont les outils Sheets, Docs, Slides et Google Apps Script.

S’abonner
Notification pour
guest
4 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
THIERRY VANOFFE

Au top comme d’hab. Waouh

Cet avis vous a été utile ?

THIERRY VANOFFE

Vraiment astucieux tu es le Mac Gyver de Google Sheets

Cet avis vous a été utile ?

Noël GALTIAU

Alors, bonjour à tous ! Moi c’est LE CLIENT 😉 Alors je vous confirme que cette demande bien réelle venue de mon Boss avait rapidement finie sur bon bureau à la rubrique :
— désolé Patron, je me débrouille avec les outils Google, mais ce que vous me demandez là, c’est de la magie ! – Je ne peux pas faire de Jauge à cinq secteurs qui réponde à votre besoin…
Mais bon, la vérité, c’est que je n’avais pas encore trouvé le bon magicien ! J’ai contacté Numéricoach qui m’a rapidement confié aux bon soins d’Antoine ! Il a répondu à la demande et bien au delà ! (Vers l’infini et Au delà, comme dirait un cosmonaute de mes connaissances…).
Bref, ce que ne vous dit pas Antoine, c’est que cette Jauge n’est qu’une toute petite partie d’un projet bien plus vaste qui consiste en la création de tableaux de bord automatisés pour nos utilisateurs, tableaux de bord qui font donc appel à cette jauge avant d’être envoyé par Mail à l’utilisateur final… Une session de travail rondement menée, dans un délai ULTRA COURT et qui a fait appel à Google Sheets, Google Slides, Gmail et vous l’avez compris, à pas mal de scripts !
Encore BRAVO Antoine pour ce travail de qualité. En en plus, le garçon est hyper sympathique … Que demander de mieux ? A très bientôt !

Cet avis vous a été utile ?

Antoine MARTIN
Répondre à  Noël GALTIAU
1 année il y a

Merci Noël pour ton message dithyrambique ! 🙂 Avant ce projet, je ne m’étais pas imaginé pouvoir créer des graphiques sur mesure, on en apprend tous les jours avec Google.
C’est un plaisir de relever des défis concrets comme ceux que tu as soumis à Numericoach. Merci aussi à Thierry et toute son équipe pour la mise en relation. Vivement la suite !
A très vite 🙂

Cet avis vous a été utile ?