google-apps-script - funnel - google visualization columnchart

Google Apps Script-posibles tipos de gráficos

Question

Soy nuevo en Google Apps Script, así que estoy explorando si lo que quiero lograr es posible.

Desde un formulario de Google, necesito recuperar y mostrar en un documento separado el cuadro creado a partir de los datos en cada envío de formulario individual. Sé que esto se puede hacer.

El problema que tengo es que el tipo de gráfico que quiero no parece estar disponible aquí .

El cuadro debe mostrar una categoría y dos valores. Esto se puede hacer con un gráfico de barras, la altura es un valor y el color es el otro valor; parece que podría ser posible, pero no estoy seguro de si se puede cambiar el color de toda la barra.

Una alternativa es el gráfico de burbujas, el eje X para la categoría, el eje Y para un valor y el tamaño para el otro valor, pero este tipo de gráfico no parece ser compatible.

Answer 1

Puede visualizar cualquiera de los más de 25 tipos de gráficos proporcionados por la API de visualización de Google en el servicio HTML de Google Apps Script.

A continuación se muestra una versión modificada del ejemplo del Gráfico de burbujas . En lugar de datos fijos, obtendremos datos de una hoja de cálculo. El gráfico se mostrará en un diálogo modal, como un complemento dentro de esa hoja de cálculo.

La fuente de datos:

 A         B               C               D            E
ID  Life Expectancy Fertility Rate  Region          Population
CAN      80.66           1.67       North America   33739900
DEU      79.84           1.36       Europe          81902307
DNK      78.6            1.84       Europe           5523095
EGY      72.73           2.78       Middle East     79716203
GBR      80.05           2          Europe          61801570
IRN      72.49           1.7        Middle East     73137148
IRQ      68.09           4.77       Middle East     31090763
ISR      81.55           2.96       Middle East      7485600
RUS      68.6            1.54       Europe         141850000
USA      78.09           2.05       North America  307007000

Lado del cliente

El resto del diseño es bastante directo, pero para los programadores de Apps Script que no están acostumbrados a utilizar JavaScript en el servicio HTML, especialmente el comportamiento de llamadas a funciones asincrónicas y devoluciones de llamadas, es lo que está sucediendo en el código del lado del cliente más interesante. Aquí está el flujo básico.

• Presente la página html con un marcador de posición para la visualización.

• Cargue las bibliotecas de JavaScript externas. Utilizaremos jQuery (para facilitar la manipulación de DOM) y, por supuesto, la API de JavaScript de Google, también jsapi como jsapi , para los objetos de visualización.

• Cuando la página se carga, solicite una devolución de llamada. Llamaremos a eso sendQuery() , ya que recuperará los datos de nuestra hoja de cálculo. Este es un enfoque diferente al ejemplo original que simplemente muestra un gráfico, porque no solo estamos usando datos codificados.

• Cuando el jsapi termina de cargarse, se llama a sendQuery() . Solicita nuestros datos y pasa la respuesta asincrónica a otra devolución de llamada, drawSeriesChart() .

• Una vez que drawSeriesChart() reciba los datos, dibuje el gráfico.

Opciones para recuperar datos de la hoja de cálculo

Dado que nuestra visualización se ejecutará en un navegador (también conocido como cliente), necesitamos obtener la información de la hoja de cálculo (también conocida como servidor). Dependiendo de sus necesidades específicas, hay algunas maneras de recuperar esa información.

1. Consulta a través de API de visualización.

   Para una hoja de cálculo publicada , esta es una forma muy flexible de recuperar datos. Las js del lado del cliente pueden especificar el rango de datos que le interesan, y puede utilizar el lenguaje de consulta para manipular los datos que mostrará sin modificar la hoja de cálculo de origen.

   function sendQuery() {
     var opts = {sendMethod: ''auto''};
     var sheetId = "--- your sheet ID ---";
     var dataSourceUrl = ''https://spreadsheets.google.com/tq?key=%KEY%&pub=1''
                        .replace("%KEY%",sheetId);
   
     var query = new google.visualization.Query(dataSourceUrl, opts);
   
     // Specify query string, if desired.
   
     // Send the query with a callback function.
     query.send(drawSeriesChart);
   }

   Útil para situaciones en las que no posee los datos de origen, por ejemplo

2. Crea un servicio web que alimentará los datos de la hoja de cálculo. Este enfoque mantiene la hoja de cálculo en privado.

3. Utilice la comunicación directa entre las secuencias de comandos del lado del servidor y del cliente, a través de google.script.run . De esta manera, la hoja de cálculo permanece privada. Este ejemplo es muy simple, ya que recopila toda la hoja de cálculo, pero puede ampliarla para manipular sus datos filtrando, clasificando o agregando más metadatos para formatear.

   function sendQuery() {
   
     // Send the query with a callback function.
     google.script.run
           .withSuccessHandler(drawSeriesChart)
           .getSpreadsheetData();
   }

   Esto requiere que la función getSpreadsheetData() se implemente en el servidor para devolver los datos deseados. Eso se muestra en el código real que sigue.

Code.gs

Además del habitual yada-yada para la creación de menús, este archivo implementa una función getSpreadsheetData() que usaremos para recuperar todos los datos de una hoja.

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem(''Bubble Chart Example'', ''showBubbleEx'')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a dialog for a visualization.
 */
function showBubbleEx() {
  var ui = HtmlService.createTemplateFromFile(''BubbleEx'')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(450)
      .setHeight(350);
  SpreadsheetApp.getUi().showModalDialog(ui, "Bubble Chart Example");
}

/**
 * Return all data from first spreadsheet as an array. Can be used
 * via google.script.run to get data without requiring publication
 * of spreadsheet.
 *
 * Returns null if spreadsheet does not contain more than one row.
 */
function getSpreadsheetData() {
  var data = SpreadsheetApp.getActive().getSheets()[0].getDataRange().getValues();
  return (data.length > 1) ? data : null;
}

BubbleEx.html

Esto fue adaptado de la plantilla "Complemento de hojas" y se refiere al archivo Stylesheet.html incluido allí.

<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile(''Stylesheet'').getContent(); ?>

<!-- Below is the HTML code that defines the dialog element structure. -->
<div>
  <div id="series_chart_div" style="width: 400px; height: 300px;"></div>
  <div class="block" id="dialog-button-bar">
     <button id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
  </div>
</div>

<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile(''BubbleExJavaScript'').getContent(); ?>

BubbleExJavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"  src="https://www.google.com/jsapi"></script>

<script>
  // Load the Visualization API and desired package(s).
  google.load(''visualization'', ''1.0'', {''packages'':[''corechart'']});

  /**
   * Run initializations on dialog load.
   */
  $(function() {
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(sendQuery);

    // Assign handler functions to dialog elements here, if needed.

    // Call the server here to retrieve any information needed to build
    // the dialog, if necessary.
  });

  /**
   * Issue asynchronous request for spreadsheet data.
   */
  function sendQuery() {
    google.script.run
      .withSuccessHandler(drawSeriesChart)
      .getSpreadsheetData();
  }

  /**
   * Callback function to generate visualization using data in response parameter.
   */
  function drawSeriesChart(response) {

    if (response == null) {
      alert(''Error: Invalid source data.'')
      return;
    }
    else {
      var data = google.visualization.arrayToDataTable(response,false);

      var options = {
        title: ''Correlation between life expectancy, fertility rate and population of some world countries (2010)'',
        hAxis: {title: data.getColumnLabel(1)},  // ''Life Expectancy''
        vAxis: {title: data.getColumnLabel(2)},  // ''Fertility Rate''
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById(''series_chart_div''));
      chart.draw(data, options);
    }
  }  

</script>