Fundamentos do Apps Script com o Planilhas Google 5: gráficos e dados de apresentações no Apresentações

1. Introdução

Esta é a quinta parte da playlist de fundamentos do Apps Script com o Planilhas Google. Este codelab ensina como usar o serviço de planilhas no Apps Script para criar um gráfico de conjunto de dados. Você também aprenderá a usar o serviço do Apresentações para exportar o gráfico para um novo arquivo no Apresentações.

O que você vai aprender

  • Como criar um gráfico de linhas com o Apps Script
  • Como exportar gráficos para um novo arquivo do Apresentações
  • Como apresentar caixas de diálogo ao usuário no Planilhas

Antes de começar

Este é o quinto codelab da playlist "Fundamentos do Apps Script com o Planilhas Google". Antes de iniciar este codelab, conclua os codelabs anteriores:

  1. Macros e funções personalizadas
  2. Planilhas, Planilhas e intervalos
  3. Como trabalhar com dados
  4. Formatação de dados

Pré-requisitos

  • Conhecimentos dos tópicos básicos do Apps Script explorados nos codelabs anteriores desta playlist.
  • Ter noções básicas sobre o Editor do Apps Script
  • Ter noções básicas sobre o Planilhas Google
  • Capacidade de ler a notação A1 no Planilhas
  • Ter noções básicas sobre o JavaScript e a classe String dele

2. Configurar

Para continuar, você precisa de uma planilha com alguns dados. Como antes, fornecemos uma planilha de dados que você pode copiar para esses exercícios. Siga estas etapas:

  1. Clique neste link para copiar a planilha de dados e clique em Fazer uma cópia. A nova planilha será colocada na sua pasta Google Drive e será denominada "Copia de datas e taxas de câmbio em dólares americanos".
  2. Clique no título da planilha e altere-a de "Texto de taxas de câmbio" para "Taxas de câmbio" e "Datas e dólares americanos". Sua planilha terá esta aparência, com algumas informações básicas sobre as diferentes taxas de câmbio em datas diferentes:

45a3e8814ecb07fc.png

  1. Para abrir o editor de script, clique em Extensões> Apps Script.

Para economizar tempo, incluímos um pouco de código para configurar um menu personalizado nessa planilha. Talvez você tenha visto o menu aparecer quando a cópia da planilha foi aberta:

9b9caf6c1e9de34b.png

Com esta planilha e projeto, você está pronto para iniciar o codelab. Vá para a próxima seção e comece a aprender sobre gráficos e acionadores baseados em tempo.

3. Criar um gráfico no Planilhas com o Apps Script

Imagine que você queira criar um gráfico específico para visualizar um conjunto de dados. Você pode usar o Apps Script para criar, editar e inserir gráficos no Planilhas Google. Quando um gráfico está contido em uma planilha, ele é chamado de gráfico incorporado.

Os gráficos são usados para visualizar uma ou mais séries de dados. Para gráficos incorporados, os dados que eles apresentam geralmente são provenientes da planilha. Geralmente, quando os dados são atualizados na planilha, o Planilhas também atualiza automaticamente o gráfico.

Você pode usar o Apps Script para criar gráficos personalizados e incorporados do zero ou atualizar gráficos que já existem. Esta seção apresenta os conceitos básicos da criação de gráficos incorporados no Planilhas com o Apps Script e o serviço Spreadsheet.

Implementação

Na sua cópia da planilha de dados, o conjunto de dados "Taxas de câmbio e datas" exibe as taxas de câmbio (de 1 dólar) de moedas diferentes em datas diferentes. Você implementará uma função do Apps Script que cria um gráfico para visualizar parte desses dados.

Siga estas etapas:

  1. No editor do Apps Script, adicione a seguinte função no fim do script Code.gs do projeto do script, depois da função 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. Salve seu projeto de script.

Revisão de código

O código que você adicionou implementa a função chamada pelo item de menu Gráfico "Dados e taxas de câmbio dos EUA" para criar um gráfico de linhas básico. Vamos analisar o código.

As primeiras linhas configuram as três variáveis a seguir:

  • sheet: uma referência à página ativa atual.
  • chartDataRange: o intervalo de dados que queremos visualizar. O código usa a notação A1 para especificar o intervalo que abrange as células A2 a F102 na página Datas e taxas de câmbio dos EUA. Ao nomear a página especificamente, garantimos que o item de menu funcionará mesmo se uma página diferente estiver ativa, já que o intervalo sempre cobre a posição dos dados. Começando na linha 2 significa que incluiremos os cabeçalhos das colunas e representaremos apenas as 100 datas mais recentes (linhas).
  • hAxisOptions: um objeto JavaScript básico que inclui algumas informações de configuração que o código usa para configurar a aparência do eixo horizontal. Mais especificamente, ele define os rótulos de texto do eixo horizontal em um eixo de 60 graus e define o número de linhas de grade vertical como 12.

A próxima linha cria um objeto builder de gráfico de linha. Os gráficos incorporados ao Apps Script são criados usando um padrão de design do Builder. Uma explicação completa desse padrão de design está fora do escopo deste codelab. Por isso, por enquanto, entenda que o serviço Spreadsheet oferece várias classes EmbeddedChartBuilder. Para criar um gráfico, o código cria um objeto incorporado de builder de gráficos, usa os métodos dele para definir as configurações do gráfico e, em seguida, chama um método build() para criar o objeto EmbeddedChart final. Seu código nunca modifica o objeto EmbeddedChart diretamente, porque toda a configuração do gráfico é gerenciada pelas classes do builder.

O serviço de planilhas fornece uma classe EmbeddedChartBuilder mãe e várias classes builder (como EmbeddedLineChartBuilder) que herdam o padrão dela. As classes filhas permitem que o Apps Script forneça os métodos de configuração do gráfico do builder aplicáveis apenas a determinados tipos de gráfico. Por exemplo, a classe EmbeddedPieChartBuilder oferece um método set3D() que se aplica somente a gráficos de pizza.

No código, essa linha cria a variável de objeto lineChartBuilder do builder:

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

O código chama o método Sheet.newChart() para criar um objeto EmbeddedChartBuilder e, em seguida, usa EmbeddedChartBuilder.asLineChart() para definir o tipo de builder como EmbeddedLineChartBuilder.

Em seguida, o código cria o gráfico usando lineChartBuilder. Essa parte do código é apenas uma série de chamadas de método para definir as configurações do gráfico, seguidas por uma chamada de build() para criar o gráfico. Como você viu nos codelabs anteriores, o código usa o encadeamento de métodos para que seja legível por humanos. Veja o que as chamadas de método estão fazendo:

Por fim, o código chama Sheet.insertChart(chart) para colocar o gráfico criado na página ativa.

Resultados

Para ver a função de formatação em ação, faça o seguinte:

  1. Salve seu projeto de script no editor do Apps Script, caso ainda não tenha feito isso.
  2. Clique no item de menu Apresentar conjunto de dados > Gráfico &data e dólares americanos com taxa de câmbio".

O script agora coloca um novo gráfico à direita dos seus dados:

bbf856699b6d2b45.gif

Parabéns! Você criou um gráfico de linhas incorporado com o Apps Script. A próxima seção ensina a exportar seu gráfico para o Apresentações Google.

4. Exportar seus gráficos para o Apresentações

Um dos pontos fortes do Apps Script é a migração fácil de dados de um aplicativo do Google Workspace para outro. A maioria desses aplicativos tem um serviço dedicado do Apps Script, semelhante ao serviço Planilhas. Por exemplo, o Gmail tem o serviço do Gmail, o Documentos Google tem o serviço de Documentos e o Apresentações Google tem o serviço do Apresentações. Com todos esses serviços integrados, você pode extrair dados de um aplicativo, processá-los e gravar o resultado em outro.

Nesta seção, você aprenderá a exportar todos os gráficos incorporados de uma planilha do Google para um novo arquivo do Apresentações Google. Você também verá duas formas de exibir mensagens personalizadas ao usuário no Planilhas.

Implementação

Aqui, você implementará a função chamada pelo item de menu Apresentar conjunto de dados & exportar gráficos para o Apresentações. Siga estas etapas:

  1. No editor do Apps Script, adicione a seguinte função no fim do script Code.gs do projeto do script, depois da função 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. Salve seu projeto de script.

Revisão de código

Esse código pode ser mais curto que o esperado. Vamos analisar o resultado dessa tarefa dividindo o código em cinco seções:

1: ver os gráficos

As primeiras linhas pesquisam a planilha ativa para encontrar todos os gráficos incorporados e os coletam na matriz charts. Essas linhas usam os métodos Spreadsheet.getSheets() e Sheet.getCharts() para criar listas de páginas e gráficos. O método Array.concat() do JavaScript é usado para anexar a lista de gráficos de cada página ao charts.

2: verificar se há gráficos para exportar

O código verifica se há gráficos para exportar. Queremos evitar a criação de uma apresentação em branco. Portanto, se não houver gráficos, o código criará uma mensagem toast usando Spreadsheet.toast(message). Esta é uma caixa de diálogo pequena, que aparece no canto inferior direito do Planilhas, permanece por alguns segundos e desaparece:

db7e87dcb8010bef.gif

Se não houver gráficos para exportar, o código criará a mensagem de aviso e sairá sem fazer mais nada. Se houver gráficos para exportar, o código continuará a criar uma apresentação nas próximas linhas.

3: Criar uma apresentação

A variável presentationTitle é criada para armazenar o nome do arquivo da nova apresentação. Ele é definido como o nome da planilha, com "quot; Presentation" concatenado no final. Em seguida, o código chama o método do serviço do Apresentações Google SlidesApp.create(name) para criar uma apresentação.

As novas apresentações são criadas com um único slide em branco. Como não queremos isso na nossa apresentação, o código a remove com Presentation.getSlides() e Slide.remove().

4: exportar os gráficos

Na próxima seção, o código define a position e a size dos objetos JavaScript para definir onde os gráficos importados serão colocados no slide e qual será o tamanho do gráfico (em pixels).

O código faz um loop em cada gráfico da lista. Em cada gráfico, um newSlide é criado com o Presentation.appendSlide(), adicionando o slide ao fim da apresentação. O método Slide.insertSheetsChart(sourceChart, left, top, width, height) é usado para importar o gráfico para o slide com a position e o size especificados.

5: compartilhar o local da apresentação

Por fim, o código precisa informar ao usuário onde a nova apresentação está localizada, de preferência com um link em que ele possa clicar para abri-la. Para fazer isso, o código usa o HTML service do Apps Script para criar uma caixa de diálogo modal personalizada. As caixas de diálogo modais (também conhecidas como caixas de diálogo personalizadas no Apps Script) são exibidas na interface do Planilhas. Quando elas são exibidas, as caixas de diálogo personalizadas impedem que o usuário interaja com o Planilhas.

Para criar uma caixa de diálogo personalizada, o código precisa do HTML que define seu conteúdo. Isso é fornecido na variável html. O conteúdo inclui um parágrafo curto e um hiperlink. O hiperlink é a variável presentationTitle, vinculada ao URL da apresentação informado por Presentation.getUrl(). O hiperlink também usa o atributo target="_blank" para que a apresentação seja aberta em uma nova guia do navegador, e não na caixa de diálogo.

O HTML é analisado em um objeto HtmlOutput pelo método HtmlService.createHtmlOutput(html). O objeto HtmlOutput permite que o código defina o tamanho da caixa de diálogo personalizada com HtmlOutput.setHeight(height) e HtmlOutput.setWidth(width).

Depois que o htmlOutput é criado, o código usa o método Ui.showModalDialog(htmlOutput, title) para exibir a caixa de diálogo com o título fornecido.

Resultados

Agora que você implementou o segundo item do menu, poderá vê-lo em ação. Para testar a função exportChartsToSlides():

  1. Salve seu projeto de script no editor do Apps Script, caso ainda não tenha feito isso.
  2. Abra sua planilha e clique no item de menu Apresentar conjunto de dados > Gráfico &datas e dólares americanos taxa de câmbio" para criar um gráfico a ser exportado. Ele aparecerá ancorado na célula H5 da página ativa.
  3. Clique no item de menu Apresentar conjunto de dados > Exportar gráficos para o Apresentações. Talvez você precise autorizar novamente o script.
  4. Você verá o script processar a solicitação e exibir a caixa de diálogo personalizada.
  5. Para abrir o novo arquivo do Apresentações, clique no link Datas e taxa de câmbio dos EUA:

51326ceaeb3e49b2.gif

Se quiser, você também poderá adicionar mais gráficos à sua planilha e selecionar novamente o item de menu para criar uma apresentação com vários slides.

Agora você pode exportar gráficos criados no Planilhas para um arquivo do Apresentações. Também é possível escrever um código para criar uma caixa de diálogo personalizada.

Você concluiu o exercício final deste codelab. Vá para a próxima seção e revise o que você aprendeu.

5. Conclusão

Parabéns! Você concluiu este codelab e a playlist completa de noções básicas do Apps Script com o Planilhas Google. Você pode usar os princípios ensinados nesta playlist para ampliar sua experiência no Planilhas e explorar os recursos do Apps Script.

Você achou este codelab útil?

Sim Não

O que você aprendeu

  • Como criar um gráfico de linhas incorporado com o Apps Script.
  • Como apresentar mensagens de aviso e caixas de diálogo personalizadas para um usuário no Planilhas
  • Saiba como exportar um gráfico para um novo arquivo do Apresentações.

A seguir

Você concluiu esta playlist. No entanto, ainda há mais informações sobre o Apps Script.

Confira estes recursos:

Divirta-se!

Você achou esta playlist do codelab útil?

Sim Não

Quer ver mais codelabs do Apps Script no futuro?

Sim Não