Principes de base d'Apps Script avec Google Sheets n° 5: Graphique et présentation des données dans Slides

1. Introduction

Bienvenue dans la cinquième partie de la playlist de l'atelier de programmation sur les 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 dans un graphique. Vous allez également apprendre à utiliser le service Slides pour exporter le graphique vers une nouvelle présentation dans Google Slides.

Points abordés

  • Créer un graphique en courbes avec Apps Script
  • Exportation de graphiques vers une nouvelle présentation Slides
  • Présenter des boîtes de dialogue dans l'utilisateur dans Sheets

Avant de commencer

Il s'agit du cinquième atelier de programmation sur la base de données de la feuille de calcul Apps Script avec Google Sheets. Avant de commencer ces ateliers de programmation, veillez à suivre ceux précédents:

  1. Macros et fonctions personnalisées
  2. Feuilles de calcul, feuilles de calcul et plages
  3. Utilisation des données
  4. Format des données

Ce dont vous avez besoin

  • Une compréhension des thèmes de base d'Apps Script explorés dans les précédents ateliers de programmation de cette playlist.
  • Connaissances de base de l'éditeur Apps Script
  • Des connaissances de base sur Google Sheets
  • Possibilité de lire la notation A1 de Sheets
  • Bonne connaissance de JavaScript et de sa classe String

2. Configurer

Avant de continuer, vous avez besoin d'une feuille de calcul contenant quelques données. Comme auparavant, nous vous proposons une feuille de données que vous pouvez copier pour ces exercices. Procédez comme suit:

  1. Cliquez sur ce lien pour copier la fiche technique, puis sur Créer une copie. La nouvelle feuille de calcul est placée dans votre dossier Google Drive. Elle est nommée "Copie de dates" et "Taux de change USD".
  2. Cliquez sur le titre de la feuille de calcul et remplacez-le par "Texte des dates et taux de change USD" par "Dates et taux de change USD". Votre feuille doit se présenter comme suit, avec des informations de base sur les différents taux de change en dollars américains à différentes dates:

45a3e8814ecb07fc.png

  1. Pour ouvrir l'éditeur de scripts, cliquez sur Extensions, puis Apps Script.

Pour vous faire gagner du temps, nous avons intégré un code pour configurer un menu personnalisé dans cette feuille de calcul. Vous avez peut-être vu le menu apparaître lorsque vous avez ouvert votre copie de la feuille de calcul:

9b9caf6c1e9de34b.png

Avec cette feuille de calcul et ce projet, vous pouvez commencer l'atelier de programmation. Passez à la section suivante pour commencer à vous familiariser avec 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, il est appelé 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 contiennent proviennent généralement de la feuille de calcul. En règle générale, l'actualisation des données dans la feuille de calcul entraîne automatiquement la mise à jour du graphique dans Sheets.

Apps Script vous permet de créer des graphiques personnalisés ou intégrés de A à Z ou de mettre à jour des graphiques existants. Cette section présente les principes de base 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 des données, l'ensemble de données "Dates" et "Taux de change" affiche les taux de change (pour 1 dollar américain) des différentes devises à différentes dates. Vous allez mettre en œuvre une fonction Apps Script permettant de créer un graphique permettant de visualiser une partie de ces données.

Procédez comme suit:

  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 le projet de script.

Réviser le code

Le code que vous avez ajouté met en œuvre la fonction appelée par l'élément de menu Chart "Dates and USD Exchange Rates dataset (Créer un graphique, des dates et des taux de change USD), pour créer un graphique en courbes de base. Passons en revue le code.

Les premières lignes configurent les trois variables suivantes:

  • sheet : référence à la feuille active actuelle.
  • chartDataRange : plage de données à visualiser. Le code utilise la notation A1 pour spécifier la plage couvrant les cellules A2 à F102 de la feuille intitulée Dates et ensemble de données sur les taux de change USD. En attribuant un nom spécifique à la feuille, vous vous assurez 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. À partir de la ligne 2, nous incluons les en-têtes de colonne et nous afficherons uniquement les 100 dates les plus récentes (lignes).
  • hAxisOptions: objet JavaScript de base qui inclut des informations de configuration utilisées par le code pour configurer l'apparence de l'axe horizontal. Plus précisément, elle définit les libellés textuels de l'axe horizontal sur une inclinaison de 60 degrés et définit le nombre de quadrillages verticaux sur 12.

La ligne suivante crée un objet line chart builder (outil de création de graphiques en courbes). Les graphiques intégrés dans Apps Script sont construits à l'aide d'un modèle de conception Builder. L'explication complète de ce modèle de conception n'est pas prise en compte dans cet atelier de programmation. Par conséquent, pour l'instant, seulement comprendre le service Spreadsheet fournit plusieurs classes EmbeddedChartBuilder. Pour générer un graphique, votre code crée d'abord un objet de type "chart" 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 l'objet EmbeddedChart directement, car toutes les configurations de graphique sont gérées via les classes Builder.

Le service Spreadsheet fournit une classe EmbeddedChartBuilder parent et plusieurs classes compilateurs enfants (telles que EmbeddedLineChartBuilder) qui en héritent. Les classes enfants permettent à Apps Script de fournir les méthodes de configuration des compilateurs 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 à secteurs.

Dans votre code, cette ligne crée la variable d'objet Builder 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 nous l'avons vu dans les précédents ateliers de programmation, le code utilise un chaînage de méthodes pour maintenir le code lisible. Voici ce que font les appels de méthode:

  • addRange(range) : définit la plage de données du graphique.
  • setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): détermine l'emplacement du graphique dans la feuille. Ici, le code insère le graphique dans l'angle supérieur gauche de la cellule H5.
  • setTitle(title) : définit le titre du graphique.
  • setNumHeaders(headers) : déterminer le nombre de lignes ou de colonnes dans 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 dans le graphique.
  • setLegendPosition(position) : déplace la légende vers la droite du graphique. Cette méthode utilise l'énumération Charts.Position en tant que paramètre.
  • setOption(option, value): définit des options de graphique complexes. Ici, le code définit l'option hAxis sur l'objet hAxisOptions. Vous pouvez définir plusieurs options avec cette méthode. Les options et les valeurs possibles pour chaque type de graphique sont présenté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 décrites sous Options de configuration des graphiques en courbes. La méthode setOption(option, value) est un sujet avancé. Vous pouvez donc éviter de l'utiliser jusqu'à ce que vous soyez 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.

Les résultats

Pour observer votre mise en forme, procédez comme suit:

  1. Si vous ne l'avez pas encore fait, enregistrez votre projet de script dans l'éditeur Apps Script.
  2. Cliquez sur l'élément de menu Present dataset > Chart "Dates and USD Exchange Rates dataset".

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

bbf856699b6d2b45.gif

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

4. Exporter vos graphiques vers Slides

Grâce à Apps Script, vous pouvez facilement déplacer des données d'une application Google Workspace à une autre. La plupart de ces applications ont un service Apps Script dédié, semblable au service Spreadsheet. Par exemple, Gmail possède le service Gmail, Google Docs dispose du service Document et Google Slides sur le service Slides. Grâce à tous ces services intégrés, vous pouvez extraire les données d'une application, les traiter et écrire les résultats dans une autre.

Dans cette section, vous allez apprendre à exporter chaque graphique intégré dans une feuille de calcul Google Sheets dans une nouvelle présentation Google Slides. Vous pouvez également afficher les messages personnalisés de vos utilisateurs dans Sheets de deux manières.

Implémentation

Dans cet atelier, vous allez implémenter la fonction appelée par l'élément de menu Présenter l'ensemble de données > Exporter les graphiques dans Slides. Procédez comme suit:

  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 le projet de script.

Réviser le code

Ce code peut être plus court que prévu. Examinons le code en cinq sections:

1: Obtenez les graphiques

Les premières lignes de la feuille de calcul active recherchent tous les graphiques intégrés, qu'ils collectent 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() permet d'ajouter la liste des graphiques de chaque feuille dans charts.

2: Vérifiez que des graphiques sont à exporter

Le code vérifie si des graphiques peuvent être exportés. Nous voulons éviter de présenter une présentation vide. Par conséquent, si vous ne voyez pas de graphique, le code crée un message grillé avec Spreadsheet.toast(message). Il s'agit d'une petite boîte de dialogue qui apparaît dans l'angle inférieur droit de Sheets, qui reste quelques secondes, puis disparaît:

db7e87dcb8010bef.gif

S'il n'y a pas de graphique à exporter, le code crée le message de toast et s'arrête sans autre action. Si des graphiques sont à exporter, le code continue à 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 s'agit du nom de la feuille de calcul, suivi de"Presentation". Ce 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 à l'aide d'une seule diapositive vierge. Toutefois, nous ne souhaitons pas l'inclure dans notre présentation. C'est pourquoi le code le supprime avec Presentation.getSlides() et Slide.remove().

4: Exporter les graphiques

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

Le code est lu en boucle sur chaque graphique de la liste. 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 les size spécifiés.

5: Partager le lieu de la présentation

Enfin, le code doit indiquer à l'utilisateur l'emplacement de 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 Apps Script HTML service pour créer une boîte de dialogue de personnalisation personnalisée. Les boîtes de dialogue modales (également appelées boîtes de dialogue personnalisées dans Apps Script) s'affichent dans 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. Ce paramètre est fourni dans la variable html. Celles-ci comprennent un court paragraphe et un lien hypertexte. Le lien hypertexte est la variable presentationTitle, associée à l'URL de présentation fournie par Presentation.getUrl(). Le lien hypertexte utilise également l'attribut target="_blank" pour que la présentation soit ouverte dans un nouvel onglet de 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 de définir la taille de la boîte de dialogue personnalisée avec le code 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 indiqué.

Les 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(), procédez comme suit:

  1. Si vous ne l'avez pas encore fait, enregistrez votre projet de script dans l'éditeur Apps Script.
  2. Ouvrez la feuille de calcul, puis cliquez sur l'élément de menu Présenter l'ensemble de données > Graphique &Dates et Taux de change USD pour créer un graphique à exporter. Il est ancré à la cellule H5 dans la feuille active.
  3. Cliquez sur l'élément de menu Présenter l'ensemble de données > Exporter les graphiques dans Slides. Vous serez peut-être invité à autoriser à nouveau le script.
  4. Votre script doit traiter la requête et afficher la boîte de dialogue personnalisée.
  5. Pour ouvrir la nouvelle présentation Slides, cliquez sur le lien Dates et taux de change en USD:

51326ceaeb3e49b2.gif

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

Vous pouvez maintenant exporter dans une présentation Slides des graphiques créés dans Sheets. Vous pouvez également écrire un 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 vérifier ce que vous avez appris.

5. Conclusion

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

Cet atelier de programmation vous a-t-il été utile ?

Oui Non

Connaissances acquises

  • Créer un graphique en courbes intégré à l'aide d'Apps Script
  • Présenter des messages toast et des boîtes de dialogue personnalisées à un utilisateur dans Sheets
  • Exportation d'un graphique vers une nouvelle présentation Slides

Étapes suivantes

Vous avez terminé cette playlist. Toutefois, vous devez encore en savoir plus sur Apps Script.

Consultez les ressources suivantes:

Bonne continuation !

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

Oui Non

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

Oui Non