Hojas de cálculo de Google

En esta página, se describe cómo usar los Gráficos de Google con las Hojas de cálculo de Google.

Introducción

Google Charts y Google Spreadsheets están estrechamente integrados. Puedes colocar un Gráfico de Google dentro de una Hoja de cálculo de Google para que pueda extraer datos de allí. En esta documentación, se muestra cómo realizar ambas acciones.

Independientemente del método que elijas, el gráfico cambiará cada vez que cambie la hoja de cálculo subyacente.

Cómo incorporar un gráfico en una hoja de cálculo

Incluir un gráfico en una hoja de cálculo es sencillo. En la barra de herramientas de Hojas de cálculo, selecciona "Insertar" y, luego, "Gráfico", y podrás elegir el tipo de gráfico y seleccionar varias opciones:

Cómo crear un gráfico a partir de una hoja de cálculo independiente

Por lo general, las personas crean gráficos de Google Charts mediante la propagación de una tabla de datos y el dibujo del gráfico con esos datos. Si, en cambio, deseas recuperar los datos de una hoja de cálculo de Google, consulta la hoja de cálculo para recuperar los datos que se representarán:

function drawChart() {
  var query = new google.visualization.Query(URL);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}

Esto funciona porque las Hojas de cálculo de Google son compatibles con el lenguaje de consulta de Google Charts para ordenar y filtrar datos. Se puede usar cualquier sistema que admita el lenguaje de consulta como fuente de datos.

Ten en cuenta que los gráficos no pueden usar los privilegios de la persona que los ve sin autorización explícita. Todos deben poder ver la hoja de cálculo, o bien la página debe adquirir de forma explícita una credencial de usuario final, tal como se documenta en la sección Autorización de esta página.

Para utilizar una hoja de cálculo de Google como fuente de datos, necesitará su URL:

  1. Abre una hoja de cálculo existente. Esta hoja de cálculo debe tener el formato que espera tu visualización y los privilegios de visualización deben estar configurados correctamente. (Ver los privilegios de "Público en la Web" o "Cualquier usuario que tenga el vínculo") será más fácil y, en las instrucciones de esta sección, se supone que se configuró una hoja de cálculo de esta manera. Para restringir la hoja de cálculo, debes mantenerla en privado y otorgarles acceso individual a las Cuentas de Google, pero deberás seguir las instrucciones de autorización que aparecen a continuación.
  2. Copia la URL del navegador. Consulta Rangos de origen de consulta para obtener detalles sobre cómo seleccionar rangos específicos.
  3. Proporciona la URL a google.visualization.Query(). La consulta admite los siguientes parámetros opcionales:
    • headers=N: Especifica cuántas filas son filas de encabezado, en las que N es un número entero cero o mayor. Estos se excluirán de los datos y se asignarán como etiquetas de columna en la tabla de datos. Si no especificas este parámetro, la hoja de cálculo deducirá cuántas filas son filas de encabezado. Ten en cuenta que, si todas las columnas contienen datos de string, la hoja de cálculo podría tener dificultades para determinar qué filas son filas de encabezado sin este parámetro.
    • gid=N: Especifica a qué hoja en un documento de varias hojas vincular, si no estás vinculando a la primera hoja. N es el número de ID de la hoja. Para obtener el número de ID, navega a la versión publicada de esa hoja y busca el parámetro gid=N en la URL. También puedes usar el parámetro sheet en lugar de este parámetro. Gotcha: Hojas de cálculo de Google podría reorganizar el parámetro gid en la URL cuando se lo vea en un navegador. Si copias desde un navegador, asegúrate de que todos los parámetros estén antes de la marca # de la URL. Ejemplo: gid=1545912003.
    • sheet=sheet_name: Especifica a qué hoja de un documento de varias hojas vinculas si no lo haces. sheet_name es el nombre visible de la hoja. Ejemplo: sheet=Sheet5.

A continuación, se muestra un ejemplo completo:

A continuación, se muestran dos maneras de dibujar este gráfico: una usa el parámetro gid y la otra usa el parámetro sheet. Si ingresas cualquiera de las URL en el navegador, se producirán los mismos resultados o datos para el gráfico.

GID
    function drawGID() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }
Hoja
    function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }

Rangos de origen de consulta

La URL de la fuente de consulta especifica qué parte de una hoja de cálculo usar en la consulta: una celda específica, un rango de celdas, filas o columnas, o una hoja de cálculo completa. Especifica el rango con la sintaxis "range=<range_expr>", por ejemplo:

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
   

Estos son algunos ejemplos que demuestran la sintaxis:

  • A1:B10: un rango desde la celda A1 hasta la B10
  • 5:7: Filas 5 a 7
  • D:F: columnas D-F
  • A:A70: Las primeras 70 celdas de la columna A
  • A70:A: Columna A desde la fila 70 hasta el final
  • B5:5: B5 hasta el final de la fila 5
  • D3:D: D3 hasta el final de la columna D
  • C:C10: Desde el inicio de la columna C hasta C10

Autorización

Hojas de cálculo de Google requiere credenciales de usuario final para acceder a hojas de cálculo privadas a través de la API de visualización de Google (“/tq requests”).

Nota: Las hojas de cálculo compartidas con "cualquier persona que tenga el vínculo puede ver" no necesitan credenciales. Cambiar la configuración de uso compartido de tu hoja de cálculo es mucho más fácil que implementar la autorización.

En los casos en que el uso compartido de vínculos no sea una solución viable, los desarrolladores deberán cambiar su código a fin de pasar una credencial de OAuth 2.0 autorizada para el alcance de la API de Hojas de cálculo de Google (https://www.googleapis.com/auth/spreadsheets).

Puedes obtener más información sobre OAuth 2.0 en Usa OAuth 2.0 para acceder a las API de Google.

Ejemplo: Usa OAuth para acceder a /gviz/tq

Requisito previo: Obtener un ID de cliente de Google Developers Console

Si deseas obtener instrucciones más detalladas para integrar en Identity Platform de Google, consulta Acceso con Google y Crea un proyecto y un ID de cliente de la Consola de API de Google.

A fin de adquirir tokens OAuth para un usuario final, primero debes registrar tu proyecto en Google Developers Console y obtener un ID de cliente.

  1. En la consola de programador, crea un nuevo ID de cliente de OAuth.
  2. Elige Aplicación web como el tipo de aplicación.
  3. Elige cualquier nombre, es solo para tu información.
  4. Agregue el nombre de su dominio (y cualquier dominio de prueba) como Orígenes autorizados de JavaScript.
  5. Deja en blanco los URI de redireccionamiento autorizados.

Después de hacer clic en Crear, copia el ID de cliente para referencia futura. El secreto del cliente no es necesario para este ejercicio.

Actualiza tu sitio para adquirir credenciales de OAuth.

Google proporciona la biblioteca de gapi.auth, que simplifica en gran medida el proceso de adquisición de una credencial de OAuth. En la siguiente muestra de código, se usa esta biblioteca para adquirir una credencial (se requiere autorización si es necesario) y pasar la credencial resultante al extremo /gviz/tq.

demo.html
<html>
<body>
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script src="./demo.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/auth.js?onload=init"></script>
</body>
</html>
demo.js
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';

function init() {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: true},
      handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  // Note: The below spreadsheet is "Public on the web" and will work
  // with or without an OAuth token.  For a better test, replace this
  // URL with a private spreadsheet.
  var tqUrl = 'https://docs.google.com/spreadsheets' +
      '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
      '?tqx=responseHandler:handleTqResponse' +
      '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);

  document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}

function handleTqResponse(resp) {
  document.write(JSON.stringify(resp));
}

Una vez que la autorización se realiza de forma correcta, gapi.auth.getToken() mostrará todos los detalles de las credenciales, incluido el access_token que se puede anexar a las solicitudes /gviz/tq.

Si deseas obtener más información sobre el uso de la biblioteca gapi para la autenticación, consulta:

Usa el alcance de drive.file

En el ejemplo anterior, se usa el alcance de la API de Hojas de cálculo de Google, que otorga acceso de lectura y escritura a todo el contenido de las hojas de cálculo de un usuario. Según la aplicación, esto puede ser más permisivo que necesario. Para el acceso de solo lectura, usa el alcance spreadsheets.readonly, que otorga acceso de solo lectura a las hojas de cálculo del usuario y a sus propiedades.

El alcance drive.file (https://www.googleapis.com/auth/drive.file) otorga acceso solo a los archivos que el usuario abre de forma explícita con el selector de archivos de Google Drive, que se lanzó mediante la API del selector.

El uso del selector cambia el flujo de la aplicación. En lugar de pegar una URL o tener una hoja de cálculo hard-coded, como en el ejemplo anterior, el usuario debe usar el diálogo de selector para elegir a qué hoja de cálculo le gustaría que acceda tu página. Sigue el ejemplo de “Hello World” del selector, con google.picker.ViewId.SPREADSHEETS en lugar de google.picker.ViewId.PHOTOS.