Principes de base d'Apps Script avec Google Sheets #5 : Créer des graphiques et présenter des données dans Slides

1. Introduction

Bienvenue dans la cinquième partie de la playlist d'ateliers de programmation "Principes de base d'Apps Script avec Google Sheets". Cet atelier de programmation vous explique comment utiliser le service Spreadsheet dans Apps Script pour représenter un ensemble de données sous forme de graphique. Vous apprendrez également à utiliser le service Slides pour exporter le graphique vers une nouvelle présentation dans Google Slides.

Points abordés

  • Découvrez comment créer un graphique en courbes avec Apps Script.
  • Exporter des graphiques vers une nouvelle présentation Slides
  • Comment présenter des boîtes de dialogue à l'utilisateur dans Sheets.

Avant de commencer

Il s'agit du cinquième atelier de programmation de la playlist "Principes de base d'Apps Script avec Google Sheets". Avant de commencer cet atelier de programmation, assurez-vous d'avoir terminé les ateliers de programmation précédents :

  1. Macros et fonctions personnalisées
  2. Feuilles de calcul, feuilles et plages
  3. Utiliser les données
  4. Mise en forme des données

Prérequis

  • Comprendre les concepts de base d'Apps Script abordés dans les ateliers de programmation précédents de cette playlist.
  • Connaissances de base de l'éditeur Apps Script
  • Connaissances de base de Google Sheets
  • Possibilité de lire la notation A1 de Sheets
  • Connaissances de base de JavaScript et de sa classe String

2. Configurer

Avant de continuer, vous avez besoin d'une feuille de calcul contenant des données. Comme précédemment, nous vous avons fourni une feuille de données que vous pouvez copier pour ces exercices. Suivez les instructions suivantes :

  1. Cliquez sur ce lien pour copier la fiche de données, puis sur Créer une copie. La nouvelle feuille de calcul est placée dans votre dossier Google Drive et nommée "Copie de Dates et taux de change USD".
  2. Cliquez sur le titre de la feuille de calcul et remplacez "Copie de Dates and USD Exchange Rates" par "Dates and USD Exchange Rates". Votre feuille devrait ressembler à ceci, avec des informations de base sur les différents taux de change du dollar américain à différentes dates :

45a3e8814ecb07fc.png

  1. Pour ouvrir l'éditeur de script, cliquez sur Extensions > Apps Script.

Pour vous faire gagner du temps, nous avons inclus un peu de code pour configurer un menu personnalisé dans cette feuille de calcul. Vous avez peut-être vu le menu s'afficher lorsque votre copie de la feuille de calcul s'est ouverte :

9b9caf6c1e9de34b.png

Avec cette feuille de calcul et ce projet, vous êtes prêt à commencer l'atelier de programmation. Passez à la section suivante pour commencer à en savoir plus sur les graphiques et les déclencheurs temporels.

3. Créer un graphique dans Sheets avec Apps Script

Supposons que vous souhaitiez concevoir un graphique spécifique pour visualiser un ensemble de données. Vous pouvez utiliser Apps Script pour créer, modifier et insérer des graphiques dans Google Sheets. Lorsqu'un graphique est contenu dans une feuille de calcul, on parle de graphique intégré.

Les graphiques permettent de visualiser une ou plusieurs séries de données. Pour les graphiques intégrés, les données qu'ils présentent proviennent généralement de la feuille de calcul. En général, lorsque vous mettez à jour les données dans la feuille de calcul, Sheets met automatiquement à jour le graphique.

Vous pouvez utiliser Apps Script pour créer des graphiques intégrés personnalisés à partir de zéro ou pour mettre à jour des graphiques existants. Cette section présente les bases de la création de graphiques intégrés dans Sheets avec Apps Script et le service Spreadsheet.

Implémentation

Dans votre copie de la feuille de calcul de données, l'ensemble de données "Dates et taux de change" indique les taux de change (pour 1 dollar américain) de différentes devises à différentes dates. Vous allez implémenter une fonction Apps Script qui crée un graphique pour visualiser une partie de ces données.

Suivez les instructions suivantes :

  1. Dans l'éditeur Apps Script, ajoutez la fonction suivante à la fin du script Code.gs de votre projet de script, après la fonction onOpen() :
/**
 * Creates and inserts an embedded
 * line chart into the active sheet.
 */
function createEmbeddedLineChart() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var chartDataRange = sheet.getRange(
    'Dates and USD Exchange Rates dataset!A2:F102');
  var hAxisOptions = {
    slantedText: true,
    slantedTextAngle: 60,
    gridlines: {
      count: 12
    }
  };
  
  var lineChartBuilder = sheet.newChart().asLineChart();
  var chart = lineChartBuilder
    .addRange(chartDataRange)
    .setPosition(5, 8, 0, 0)
    .setTitle('USD Exchange rates')
    .setNumHeaders(1)
    .setLegendPosition(Charts.Position.RIGHT)
    .setOption('hAxis', hAxisOptions)
    .setOption("useFirstColumnAsDomain", true)
    .build();
 
  sheet.insertChart(chart);  
}
  1. Enregistrez votre projet de script.

Réviser le code

Le code que vous avez ajouté implémente la fonction appelée par l'élément de menu Graphique "Ensemble de données sur les dates et les taux de change en USD" pour créer un graphique linéaire de base. Examinons le code.

Les premières lignes définissent les trois variables suivantes :

  • sheet : référence à la feuille active actuelle.
  • chartDataRange : plage de données que nous souhaitons visualiser. Le code utilise la notation A1 pour spécifier que la plage couvre les cellules A2 à F102 de la feuille nommée Dates and USD Exchange Rates dataset (Ensemble de données "Dates et taux de change USD"). En nommant spécifiquement la feuille, nous nous assurons que l'élément de menu fonctionne même si une autre feuille est active, car la plage couvre toujours la position des données. En commençant à la ligne 2, nous incluons les en-têtes de colonne et nous n'incluons dans le graphique que les 100 dates (lignes) les plus récentes.
  • hAxisOptions : objet JavaScript de base qui inclut des informations sur les paramètres utilisés par le code pour configurer l'apparence de l'axe horizontal. Plus précisément, il définit les libellés de texte de l'axe horizontal sur une inclinaison de 60 degrés et le nombre de lignes de grille verticales sur 12.

La ligne suivante crée un objet créateur de graphiques en courbes. Les graphiques intégrés dans Apps Script sont construits à l'aide d'un modèle de conception Builder. Une explication complète de ce modèle de conception sort du champ d'application de cet atelier de programmation. Pour l'instant, il vous suffit de comprendre que le service Spreadsheet fournit plusieurs classes EmbeddedChartBuilder. Pour créer un graphique, votre code crée d'abord un objet de compilateur de graphique intégré, utilise ses méthodes pour définir les paramètres du graphique, puis appelle une méthode build() pour créer l'objet EmbeddedChart final. Votre code ne modifie jamais directement l'objet EmbeddedChart, car toute la configuration du graphique est gérée par les classes de création.

Le service Spreadsheet fournit une classe parente EmbeddedChartBuilder et plusieurs classes de compilateur enfant (telles que EmbeddedLineChartBuilder) qui en héritent. Les classes enfants permettent à Apps Script de fournir les méthodes de configuration des graphiques des builders qui ne s'appliquent qu'à certains types de graphiques. Par exemple, la classe EmbeddedPieChartBuilder fournit une méthode set3D() qui ne s'applique qu'aux graphiques en secteurs.

Dans votre code, cette ligne crée la variable d'objet du compilateur lineChartBuilder :

var lineChartBuilder = sheet.newChart().asLineChart();

Le code appelle la méthode Sheet.newChart() pour créer un objet EmbeddedChartBuilder, puis utilise EmbeddedChartBuilder.asLineChart() pour définir le type de compilateur sur EmbeddedLineChartBuilder.

Le code crée ensuite le graphique à l'aide de lineChartBuilder. Cette partie du code n'est qu'une série d'appels de méthode pour définir les paramètres du graphique, suivie d'un appel build() pour créer le graphique. Comme vous l'avez vu dans les ateliers de programmation précédents, le code utilise le chaînage de méthodes pour rester lisible. Voici ce que font les appels de méthode :

  • addRange(range) : définit la plage de données affichée dans le graphique.
  • setPosition(anchorRowPos, anchorColPos, offsetX, offsetY) : détermine où le graphique est placé dans la feuille. Ici, le code insère l'angle supérieur gauche du graphique dans la cellule H5.
  • setTitle(title) : définit le titre du graphique.
  • setNumHeaders(headers) : indiquez le nombre de lignes ou de colonnes de la plage de données à traiter comme des en-têtes. Ici, le code utilise la première ligne de la plage de données comme en-têtes, ce qui signifie que le texte de cette ligne est utilisé comme libellés pour les séries de données individuelles du graphique.
  • setLegendPosition(position) : déplace la légende du graphique sur la droite du graphique. Cette méthode utilise l'énumération Charts.Position comme paramètre.
  • setOption(option, value) : définit les options complexes du graphique. Ici, le code définit l'option hAxis sur l'objet hAxisOptions. Vous pouvez définir plusieurs options à l'aide de cette méthode. Les options et les valeurs possibles pour chaque type de graphique sont documentées dans la galerie de graphiques de l'API Charts. Par exemple, les options que vous pouvez définir pour les graphiques en courbes sont documentées dans Options de configuration des graphiques en courbes. La méthode setOption(option, value) est un sujet avancé. Nous vous conseillons de ne pas l'utiliser tant que vous n'êtes pas plus à l'aise avec la création de graphiques dans Apps Script.
  • build() : crée et renvoie un objet EmbeddedChart à l'aide des paramètres ci-dessus.

Enfin, le code appelle Sheet.insertChart(chart) pour placer le graphique créé dans la feuille active.

Résultats

Pour voir votre fonction de mise en forme en action, procédez comme suit :

  1. Si ce n'est pas déjà fait, enregistrez votre projet de script dans l'éditeur Apps Script.
  2. Cliquez sur l'élément de menu Présenter l'ensemble de données > Graphique "Ensemble de données sur les dates et les taux de change en USD".

Votre script place désormais un nouveau graphique à droite de vos données :

bbf856699b6d2b45.gif

Félicitations, vous avez créé un graphique linéaire intégré avec Apps Script. La section suivante vous explique comment exporter votre graphique vers Google Slides.

4. Exporter vos graphiques vers Slides

L'un des principaux atouts d'Apps Script est qu'il vous permet de transférer facilement des données d'une application Google Workspace à une autre. La plupart de ces applications disposent d'un service Apps Script dédié, semblable au service Spreadsheet. Par exemple, Gmail dispose du service Gmail, Google Docs du service Document et Google Slides du service Slides. Grâce à tous ces services intégrés, vous pouvez extraire des données d'une application, les traiter et écrire le résultat dans une autre.

Dans cette section, vous allez apprendre à exporter tous les graphiques intégrés d'une feuille de calcul Google dans une nouvelle présentation Google Slides. Vous verrez également deux façons d'afficher des messages personnalisés pour vos utilisateurs dans Sheets.

Implémentation

Vous allez implémenter la fonction appelée par l'élément de menu Présenter l'ensemble de données > Exporter les graphiques vers Slides. Suivez les instructions suivantes :

  1. Dans l'éditeur Apps Script, ajoutez la fonction suivante à la fin du script Code.gs de votre projet de script, après la fonction createEmbeddedLineChart() :
/**
 * Create a Slides presentation and export
 * all the embedded charts in this spreadsheet
 * to it, one chart per slide.
 */
function exportChartsToSlides() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  // Fetch a list of all embedded charts in this
  // spreadsheet.
  var charts = [];
  var sheets = ss.getSheets();
  for (var i = 0; i < sheets.length; i++) {
    charts = charts.concat(sheets[i].getCharts());
  }
  
  // If there aren't any charts, display a toast
  // message and return without doing anything
  // else.
  if (charts.length == 0) {
    ss.toast('No charts to export!');
    return;
  }
  
  // Create a Slides presentation, removing the default
  // title slide.
  var presentationTitle =
    ss.getName() + " Presentation";
  var slides = SlidesApp.create(presentationTitle);
  slides.getSlides()[0].remove();  
  
  // Add charts to the presentation, one chart per slide.
  var position = {left: 40, top: 30};
  var size = {height: 340, width: 430};
  for (var i = 0; i < charts.length; i++) {
    var newSlide = slides.appendSlide();
    newSlide.insertSheetsChart(
      charts[i],
      position.left,
      position.top,
      size.width,
      size.height);   
  }
  
  // Create and display a dialog telling the user where to
  // find the new presentation.
  var slidesUrl = slides.getUrl();
  var html = "<p>Find it in your home Drive folder:</p>"
      + "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
      + presentationTitle + "</a></p>";
  
  SpreadsheetApp.getUi().showModalDialog(
    HtmlService.createHtmlOutput(html)
      .setHeight(120)
      .setWidth(350),
      "Created a presentation!"
  );
}
  1. Enregistrez votre projet de script.

Réviser le code

Ce code peut être plus court que prévu. Examinons ce qu'il fait en divisant le code en cinq sections :

1) Obtenir les graphiques

Les premières lignes recherchent tous les graphiques intégrés dans la feuille de calcul active et les rassemblent dans le tableau charts. Ces lignes utilisent les méthodes Spreadsheet.getSheets() et Sheet.getCharts() pour obtenir des listes de feuilles et de graphiques. La méthode JavaScript Array.concat() est utilisée pour ajouter la liste des graphiques de chaque feuille dans charts.

2) Vérifiez qu'il y a des graphiques à exporter.

Le code vérifie s'il existe des graphiques à exporter. Nous voulons éviter de créer une présentation vide. Par conséquent, s'il n'y a aucun graphique, le code crée un message toast à l'aide de Spreadsheet.toast(message). Il s'agit d'une petite boîte de dialogue qui s'affiche en bas à droite de Sheets, reste quelques secondes, puis disparaît :

db7e87dcb8010bef.gif

S'il n'y a aucun graphique à exporter, le code crée le message toast et se ferme sans rien faire d'autre. S'il y a des graphiques à exporter, le code continue de créer une présentation dans les lignes suivantes.

3) Créer une présentation

La variable presentationTitle est créée pour contenir le nom du fichier de la nouvelle présentation. Il est défini comme nom de la feuille de calcul, avec " Presentation" ajouté à la fin. Le code appelle ensuite la méthode du service Slides SlidesApp.create(name) pour créer une présentation.

Les nouvelles présentations sont créées avec une seule diapositive vierge. Nous ne voulons pas que cela apparaisse dans notre présentation. Le code le supprime donc avec Presentation.getSlides() et Slide.remove().

4) Exporter les graphiques

Dans la section suivante, le code définit les position et size des objets JavaScript pour définir l'emplacement des graphiques importés dans la diapositive et leur taille (en pixels).

Le code parcourt chaque graphique de la liste des graphiques. Pour chaque graphique, un newSlide est créé avec Presentation.appendSlide(), ce qui ajoute la diapositive à la fin de la présentation. La méthode Slide.insertSheetsChart(sourceChart, left, top, width, height) permet d'importer le graphique dans la diapositive avec les position et size spécifiés.

5) Partagez l'emplacement de la présentation.

Enfin, le code doit indiquer à l'utilisateur où se trouve la nouvelle présentation, de préférence avec un lien sur lequel il peut cliquer pour l'ouvrir. Pour ce faire, le code utilise le HTML service d'Apps Script pour créer une boîte de dialogue modale personnalisée. Les boîtes de dialogue modales (également appelées boîtes de dialogue personnalisées dans Apps Script) sont des fenêtres qui s'affichent au-dessus de l'interface Sheets. Lorsqu'elles sont affichées, les boîtes de dialogue personnalisées empêchent l'utilisateur d'interagir avec Sheets.

Pour créer une boîte de dialogue personnalisée, le code a besoin du code HTML qui définit son contenu. Cette valeur est fournie dans la variable html. Le contenu comprend un court paragraphe et un lien hypertexte. Le lien hypertexte est la variable presentationTitle, associée à l'URL de la présentation fournie par Presentation.getUrl(). L'hyperlien utilise également l'attribut target="_blank" pour que la présentation s'ouvre dans un nouvel onglet du navigateur, plutôt que dans la boîte de dialogue.

Le code HTML est analysé dans un objet HtmlOutput par la méthode HtmlService.createHtmlOutput(html). L'objet HtmlOutput permet au code de définir la taille de la boîte de dialogue personnalisée avec HtmlOutput.setHeight(height) et HtmlOutput.setWidth(width).

Une fois htmlOutput créé, le code utilise la méthode Ui.showModalDialog(htmlOutput, title) pour afficher la boîte de dialogue avec le titre donné.

Résultats

Maintenant que vous avez implémenté le deuxième élément de menu, vous pouvez le voir en action. Pour tester la fonction exportChartsToSlides() :

  1. Si ce n'est pas déjà fait, enregistrez votre projet de script dans l'éditeur Apps Script.
  2. Ouvrez votre feuille de calcul, puis cliquez sur l'élément de menu Présenter l'ensemble de données > Graphique "Ensemble de données sur les dates et les taux de change en USD" pour créer un graphique à exporter. Il s'affichera ancré à la cellule H5 de la feuille active.
  3. Cliquez sur l'élément de menu Présenter l'ensemble de données > Exporter les graphiques vers Slides. Vous devrez peut-être autoriser à nouveau le script.
  4. Votre script doit traiter la demande et afficher la boîte de dialogue personnalisée.
  5. Pour ouvrir la nouvelle présentation Slides, cliquez sur le lien Présentation sur les dates et les taux de change en USD :

51326ceaeb3e49b2.gif

Si vous le souhaitez, vous pouvez également ajouter d'autres graphiques à votre feuille de calcul, puis sélectionner à nouveau l'élément de menu pour créer une présentation comportant plusieurs diapositives.

Vous pouvez désormais exporter des graphiques créés dans Sheets vers une présentation Slides. Vous pouvez également écrire du code pour créer une boîte de dialogue personnalisée.

Vous avez terminé le dernier exercice de cet atelier de programmation. Passez à la section suivante pour réviser ce que vous avez appris.

5. Conclusion

Bravo ! Vous avez terminé cet atelier de programmation et l'intégralité de la playlist d'ateliers de programmation sur les principes de base d'Apps Script avec Google Sheets. Vous pouvez utiliser les principes enseignés dans cette playlist pour étendre votre expérience Sheets et explorer les fonctionnalités d'Apps Script.

Avez-vous trouvé cet atelier de programmation utile ?

Oui Non

Connaissances acquises

  • Découvrez comment créer un graphique en courbes intégré avec Apps Script.
  • Comment présenter des messages toast et des boîtes de dialogue personnalisées à un utilisateur dans Sheets.
  • Exporter un graphique vers une nouvelle présentation Slides

Étape suivante

Vous avez terminé cette playlist. Toutefois, il y a encore beaucoup à apprendre sur Apps Script.

Consultez les ressources suivantes :

Bon script !

Cette playlist d'ateliers de programmation vous a-t-elle été utile ?

Oui Non

Souhaitez-vous voir d'autres ateliers de programmation Apps Script à l'avenir ?

Oui Non