Concetti fondamentali di Apps Script con Fogli Google 5: grafici e presentazione di dati in Presentazioni

1. Introduzione

Ti diamo il benvenuto nella quinta parte della playlist del codelab di Fundamentals of Apps Script with Fogli Google. Questo codelab ti spiega come utilizzare il servizio di foglio di lavoro in Apps Script per registrare un set di dati. Vorrai anche imparare a utilizzare il servizio Presentazioni per esportare il grafico in una nuova presentazione in Presentazioni Google.

Obiettivi didattici

  • Come creare un grafico a linee con Apps Script.
  • Come esportare i grafici in una nuova presentazione di Presentazioni.
  • Come presentare le finestre di dialogo all'utente in Fogli.

Prima di iniziare

Questo è il quinto codelab della playlist Concetti fondamentali dello script con Fogli Google. Prima di iniziare questo codelab, assicurati di completare i codelab precedenti:

  1. Macro e funzioni personalizzate
  2. Fogli di lavoro, Fogli e intervalli
  3. Utilizzo dei dati
  4. Formattazione dei dati

Che cosa ti serve

  • Comprensione degli argomenti di base di Apps Script esplorati nei precedenti codelab di questa playlist.
  • Familiarità con l'editor di Apps Script
  • Familiarità con Fogli Google
  • Possibilità di leggere la notazione A1 di Fogli
  • Familiarità con JavaScript e la relativa classe String

2. Configura

Prima di continuare, ti servirà un foglio di lavoro con alcuni dati. Come in precedenza, ti abbiamo fornito un foglio dati che puoi copiare per questi allenamenti. Segui questi passaggi:

  1. Fai clic su questo link per copiare il foglio dati, quindi fai clic su Crea una copia. Il nuovo foglio di lavoro viene inserito nella cartella di Google Drive e denominato "Copia di date e tassi di cambio".
  2. Fai clic sul titolo del foglio di lavoro e modificalo da "Copia di date e tassi di cambio USD" a "Date e tassi di cambio USD". Il foglio deve avere questo aspetto, con alcune informazioni di base su tassi di cambio diversi per le valute statunitensi in date diverse:

45a3e8814ecb07fc.png

  1. Per aprire l'editor di script, fai clic su Estensioni> Apps Script.

Per farti risparmiare tempo, abbiamo incluso un piccolo codice per impostare un menu personalizzato in questo foglio di lavoro. Potresti aver visualizzato il menu quando la copia del foglio di lavoro è stata aperta:

9b9caf6c1e9de34b.png

Con questo foglio di lavoro e progetto, puoi iniziare il codelab. Passa alla sezione successiva per iniziare a scoprire grafici e attivatori basati sul tempo.

3. Creare un grafico in Fogli con Apps Script

Supponi di voler progettare un grafico specifico per visualizzare un set di dati. Puoi utilizzare Apps Script per creare, modificare e inserire grafici in Fogli Google. Quando un grafico contiene un foglio di lavoro, viene chiamato grafico incorporato.

I grafici vengono utilizzati per visualizzare una o più serie di dati. Di solito, i dati incorporati provengono dai grafici incorporati. In genere, l'aggiornamento dei dati nel foglio di lavoro fa sì che Fogli aggiorni automaticamente anche il grafico.

Puoi utilizzare Apps Script per creare da zero grafici incorporati personalizzati o per aggiornare grafici esistenti. Questa sezione illustra le nozioni di base sulla creazione di grafici incorporati in Fogli con Apps Script e nel servizio Spreadsheet.

Implementazione

Nella copia del foglio di lavoro, il set di dati "Date e tassi di cambio" mostra i tassi di cambio (per 1 dollaro statunitense) di valute diverse in date diverse. Implementerai una funzione Apps Script che rende visibile un grafico per visualizzare parte di questi dati.

Segui questi passaggi:

  1. Nell'editor Apps Script, aggiungi la seguente funzione alla fine dello script Code.gs del progetto di script, dopo la funzione 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. Salva il progetto di script.

Revisione del codice

Il codice che hai aggiunto implementa la funzione chiamata dalla voce di menu Grafico "Date e Tassi di cambio USD" per creare un grafico a linee di base. Esaminiamo il codice.

Le prime righe determinano le seguenti tre variabili:

  • sheet: un riferimento al foglio attivo corrente.
  • chartDataRange: l'intervallo di dati da visualizzare. Il codice utilizza la notazione A1 per specificare l'intervallo che copre le celle da A2 a F102 nel foglio denominato Set di dati di date e tassi di cambio USD. Denominando specificamente il foglio, ci assicuriamo che la voce del menu funzioni anche se è attivo un altro foglio dato che l'intervallo copre sempre la posizione dei dati. A partire dalla riga 2, vengono incluse le intestazioni di colonna e verranno tracciate solo le 100 date più recenti (righe).
  • hAxisOptions: un oggetto JavaScript di base che include alcune informazioni sull'impostazione utilizzate dal codice per configurare l'aspetto dell'asse orizzontale. In particolare, imposta le etichette di testo dell'asse orizzontale con un'angolazione di 60 gradi e imposta il numero di linee della griglia verticali su 12.

La riga successiva crea un oggetto generatore di grafici a linee. I grafici incorporati in Apps Script vengono creati utilizzando un motivo di progettazione build. Una spiegazione completa di questo pattern di progettazione è fuori ambito per questo codelab, quindi per ora ti basterà capire che il servizio Spreadsheet offre diverse classi EmbeddedChartBuilder. Per creare un grafico, il tuo codice crea innanzitutto un oggetto generatore di grafici incorporati, utilizza i suoi metodi per definire le impostazioni del grafico e poi chiama un metodo build() per creare l'oggetto finale EmbeddedChart. Il tuo codice non modifica mai direttamente l'oggetto EmbeddedChart, in quanto tutta la configurazione del grafico viene gestita attraverso le classi del builder.

Il servizio Fogli di lavoro fornisce una classe EmbeddedChartBuilder principale e più classi per la creazione di elementi secondari (ad esempio, EmbeddedLineChartBuilder) che ereditano il livello. Le classi secondarie consentono ad Apps Script di fornire i metodi di configurazione dei grafici dei builder applicabili solo a determinati tipi di grafici. Ad esempio, la classe EmbeddedPieChartBuilder fornisce un metodo set3D() applicabile solo ai grafici a torta.

Nel codice, questa riga crea la variabile dell'oggetto builder lineChartBuilder:

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

Il codice chiama il metodo Sheet.newChart() per creare un oggetto EmbeddedChartBuilder, quindi utilizza EmbeddedChartBuilder.asLineChart() per impostare il tipo di builder su EmbeddedLineChartBuilder.

Il codice quindi crea il grafico utilizzando lineChartBuilder. Questa parte del codice è composta solo da una serie di chiamate di metodo per definire le impostazioni del grafico, seguite da una chiamata build() per creare il grafico. Come hai visto nei codelab precedenti, il codice utilizza il concatenamento dei metodi per mantenere il codice leggibile. Ecco come funzionano le chiamate metodologie:

  • addRange(range): definisce l'intervallo di dati visualizzato nel grafico.
  • setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): determina dove viene posizionato il grafico nel foglio. Qui, il codice inserisce l'angolo in alto a sinistra del grafico nella cella H5.
  • setTitle(title): consente di impostare il titolo del grafico.
  • setNumHeaders(headers): determina quante righe o colonne nell'intervallo di dati devono essere considerate come intestazioni. In questo caso, il codice utilizza la prima riga dell'intervallo di dati come intestazioni, ovvero il testo della riga viene utilizzato come etichetta per le singole serie di dati nel grafico.
  • setLegendPosition(position): sposta la legenda del grafico sul lato destro del grafico. Questo metodo utilizza l'enumerazione di Charts.Position come parametro.
  • setOption(option, value): imposta opzioni complesse per i grafici. In questo caso il codice imposta l'opzione hAxis sull'oggetto hAxisOptions. Esistono diverse opzioni che puoi impostare utilizzando questo metodo. Le opzioni e i valori possibili per ogni tipo di grafico sono documentati nella Galleria grafici dell'API Charts. Ad esempio, le opzioni che puoi impostare per i grafici a linee sono documentate nella sezione Opzioni di configurazione del grafico a linee. Il metodo setOption(option, value) è un argomento avanzato, quindi ti consigliamo di evitare di utilizzarlo fino a quando non sarai più a tuo agio con la creazione del grafico in Apps Script.
  • build(): crea e restituisce un oggetto EmbeddedChart utilizzando le impostazioni riportate sopra.

Infine, il codice chiama Sheet.insertChart(chart) per inserire il grafico creato nel foglio attivo.

Risultati

Per visualizzare la funzione di formattazione in azione, procedi nel seguente modo:

  1. Se non l'hai ancora fatto, salva il progetto script nell'editor Apps Script.
  2. Fai clic sulla voce di menu Presenta set di dati > Grafico "Date e Tassi di cambio USD". Voce di menu.

Lo script ora posiziona un nuovo grafico a destra dei dati:

bbf856699b6d2b45.gif

Congratulazioni, hai creato un grafico a linee incorporato con Apps Script. La sezione seguente spiega come esportare il grafico in Presentazioni Google.

4. Esportare i grafici in Presentazioni

Uno dei principali punti di forza di Apps Script è che ti consente di spostare facilmente i dati da un'applicazione Google Workspace a un'altra. La maggior parte di queste applicazioni dispone di un servizio Apps Script dedicato, simile al servizio Fogli di lavoro. Ad esempio, Gmail ha il servizio Gmail, Documenti Google il servizio Documento e Presentazioni Google è il servizio Presentazioni. Con tutti questi servizi integrati, puoi estrarre i dati da un'applicazione, elaborarli e scrivere il risultato.

In questa sezione imparerai come esportare ogni grafico incorporato in un foglio di lavoro Google in una nuova presentazione Google. Vedrai anche due modi per mostrare i messaggi personalizzati degli utenti in Fogli.

Implementazione

Qui implementerai la funzione chiamata dalla voce di menu Presenta set di dati > Esporta i grafici in Presentazioni. Segui questi passaggi:

  1. Nell'editor Apps Script, aggiungi la seguente funzione alla fine dello script Code.gs del progetto di script, dopo la funzione 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. Salva il progetto di script.

Revisione del codice

Questo codice potrebbe essere più breve del previsto. Rivediamo cosa sta facendo il codice suddividendo il codice in cinque sezioni:

1: ottieni i grafici

Le prime righe fanno una ricerca nel foglio di lavoro attivo per trovare tutti i grafici incorporati, raccogliendoli nell'array charts. Queste righe utilizzano il metodo Spreadsheet.getSheets() e il metodo Sheet.getCharts() per generare elenchi di fogli e grafici. Il metodo JavaScript Array.concat() viene utilizzato per aggiungere l'elenco dei grafici di ogni foglio a charts.

2: verifica che ci siano grafici da esportare

Il codice verifica se ci sono grafici da esportare. Vogliamo evitare di creare una presentazione vuota, per cui se non ci sono grafici, il codice crea invece un messaggio di toast utilizzando Spreadsheet.toast(message). Si tratta di una piccola finestra di dialogo che compare nell'angolo in basso a destra di Fogli e che rimane per alcuni secondi, per poi scomparire:

db7e87dcb8010bef.gif

Se non sono disponibili grafici da esportare, il codice crea il messaggio toast e si chiude senza eseguire altre operazioni. Se sono presenti grafici da esportare, il codice continua a creare una presentazione nelle righe successive.

3: crea una presentazione

La variabile presentationTitle è stata creata per contenere il nome del nuovo file di presentazione. È impostato come nome del foglio di lavoro e la riga Presentation è concatenata alla fine. Il codice chiama quindi il metodo di servizio Presentazioni SlidesApp.create(name) per creare una presentazione.

Le nuove presentazioni vengono create con una singola diapositiva vuota. Non vogliamo che questo sia presente nella nostra presentazione, pertanto il codice lo rimuove con Presentation.getSlides() e Slide.remove().

4: esporta i grafici

Nella sezione successiva, il codice definisce position e size degli oggetti JavaScript da impostare per posizionare il grafico importato nella diapositiva e per indicare le dimensioni del grafico (in pixel).

Il codice si riflette su ogni grafico dell'elenco. Per ogni grafico, viene creato un elemento newSlide con Presentation.appendSlide(), che aggiunge la diapositiva alla fine della presentazione. Per importare il grafico nella diapositiva con i valori position e size specificati, viene utilizzato il metodo Slide.insertSheetsChart(sourceChart, left, top, width, height).

5. Condividere il luogo della presentazione

Infine, il codice deve indicare all'utente la posizione della nuova presentazione, preferibilmente con un link su cui può fare clic per aprirla. A tale scopo, il codice utilizza il servizio HTML di Apps Script per creare una finestra di dialogo modale personalizzata. Le finestre di dialogo modali (note anche come finestre di dialogo personalizzate in Apps Script) sono finestre che vengono visualizzate sull'interfaccia di Fogli. Se visualizzate, le finestre di dialogo personalizzate impediscono all'utente di interagire con Fogli.

Per creare una finestra di dialogo personalizzata, il codice richiede l'HTML che ne definisce i contenuti. Viene fornito nella variabile html. I contenuti includono un breve paragrafo e un link ipertestuale. Il link ipertestuale è la variabile presentationTitle, collegata all'URL della presentazione fornito da Presentation.getUrl(). Il link ipertestuale utilizza anche l'attributo target="_blank" per consentire l'apertura della presentazione in una nuova scheda del browser anziché all'interno della finestra di dialogo.

Il codice HTML viene analizzato in un oggetto HtmlOutput con il metodo HtmlService.createHtmlOutput(html). L'oggetto HtmlOutput consente al codice di impostare le dimensioni della finestra di dialogo personalizzata con HtmlOutput.setHeight(height) e HtmlOutput.setWidth(width).

Una volta creato htmlOutput, il codice utilizza il metodo Ui.showModalDialog(htmlOutput, title) per visualizzare la finestra di dialogo con il titolo specificato.

Risultati

Ora che hai implementato la seconda voce di menu, puoi vederla in azione. Per testare la funzione exportChartsToSlides():

  1. Se non l'hai ancora fatto, salva il progetto script nell'editor Apps Script.
  2. Apri il foglio di lavoro e fai clic sulla voce di menu Presenta set di dati > Grafico "Date e Tassi di cambio USD" per creare un grafico da esportare. Verrà visualizzata ancorata alla cella H5 nel foglio attivo.
  3. Fai clic sulla voce di menu Avvia set di dati > Esporta grafici in Presentazioni. È possibile che ti venga chiesto di autorizzare nuovamente lo script.
  4. Dovresti vedere lo script che elabora la richiesta e visualizzare la finestra di dialogo personalizzata.
  5. Per aprire la nuova presentazione Presentazioni, fai clic sul link Presentazione di date e tassi di cambio in USD:

51326ceaeb3e49b2.gif

Se vuoi, puoi anche aggiungere altri grafici al foglio di lavoro e selezionare nuovamente la voce di menu per creare una presentazione con più diapositive.

Ora puoi esportare i grafici creati in Fogli in una presentazione Google. Puoi anche scrivere codice per creare una finestra di dialogo personalizzata.

Hai completato l'ultimo esercizio di questo codelab. Passa alla sezione successiva per rivedere le informazioni apprese.

5. Conclusione

Congratulazioni! Hai completato questo codelab e l'intera playlist del codelab su Fundamentals di Apps Script con Fogli Google. Puoi utilizzare i principi insegnati in questa playlist per estendere la tua esperienza in Fogli e scoprire le funzionalità di Apps Script.

Hai trovato utile questo codelab?

No

Cosa hai imparato

  • Come creare un grafico a linee incorporato con Apps Script.
  • Come presentare a un utente messaggi toast e finestre di dialogo personalizzate in Fogli.
  • Come esportare un grafico in una nuova presentazione in Presentazioni.

Passaggi successivi

Hai completato questa playlist. Tuttavia, c'è ancora altro da scoprire su Apps Script.

Consulta queste risorse:

Buon script!

Hai trovato utile questa playlist di codelab?

No

Vuoi visualizzare altri codelab di Apps Script in futuro?

No