Este servicio permite a los usuarios crear gráficos con las Herramientas de gráficos de Google y renderizarlos del servidor. Si deseas renderizar gráficos en un navegador web, usa la API de Google Charts.
En este ejemplo, se crea una tabla de datos básica, se propaga un gráfico de área con los datos y se agrega a una página web como imagen:
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'In Store')
.addColumn(Charts.ColumnType.NUMBER, 'Online')
.addRow(['January', 10, 1])
.addRow(['February', 12, 1])
.addRow(['March', 20, 2])
.addRow(['April', 25, 3])
.addRow(['May', 30, 4])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setStacked()
.setRange(0, 40)
.setTitle('Sales per Month')
.build();
var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("Render chart server side: <br/>");
htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
return htmlOutput;
}
Clases
Nombre | Descripción breve |
---|---|
Area | Es un compilador para gráficos de áreas. |
Bar | Es un compilador para gráficos de barras. |
Chart | Un objeto Chart, que se puede convertir en una imagen estática. |
Chart | Es una enumeración de cómo se expresan las dimensiones ocultas de una fuente en un gráfico. |
Chart | Es una enumeración de cómo se expresan varios rangos de la fuente en un gráfico. |
Chart | Expone las opciones configuradas actualmente para un Chart , como la altura, el color, etcétera. |
Chart | Tipos de gráficos compatibles con el servicio de Gráficos. |
Charts | Punto de entrada para crear gráficos en secuencias de comandos. |
Column | Es un compilador para gráficos de columnas. |
Column | Es una enumeración de los tipos de datos válidos para las columnas en un Data . |
Curve | Es una enumeración de los estilos de las curvas en un gráfico. |
Data | Es una tabla de datos que se usará en los gráficos. |
Data | Es un compilador de objetos DataTable. |
Data | Interfaz para objetos que pueden representar sus datos como un Data . |
Data | Es una definición de vista de datos para visualizar los datos del gráfico. |
Data | Compilador para objetos Data . |
Line | Es un compilador para gráficos de líneas. |
Match | Es una enumeración de cómo se debe hacer coincidir un valor de cadena. |
Number | Es un compilador para controles de filtro de rango de números. |
Orientation | Es una enumeración de la orientación de un objeto. |
Picker | Es una enumeración de cómo mostrar los valores seleccionados en el widget de selector. |
Pie | Es un compilador de gráficos circulares. |
Point | Es una enumeración de los estilos de puntos en una línea. |
Position | Es una enumeración de las posiciones de la leyenda dentro de un gráfico. |
Scatter | Es un compilador para diagramas de dispersión. |
String | Es un compilador para controles de filtro de cadenas. |
Table | Es un compilador de gráficos de tablas. |
Text | Un objeto de configuración de diseño de texto. |
Text | Es un compilador que se usa para crear objetos Text . |
Area Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Area | Revierte el dibujo de las series en el eje de dominio. |
set | Area | Establece el color de fondo del gráfico. |
set | Area | Establece los colores de las líneas del gráfico. |
set | Area | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Area | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Area | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Area | Establece la definición de vista de datos que se usará para el gráfico. |
set | Area | Establece las dimensiones del gráfico. |
set | Area | Establece la posición de la leyenda con respecto al gráfico. |
set | Area | Establece el estilo de texto de la leyenda del gráfico. |
set | Area | Establece opciones avanzadas para este gráfico. |
set | Area | Establece el estilo de los puntos de la línea. |
set | Area | Establece el rango del gráfico. |
set | Area | Usa líneas apiladas, lo que significa que los valores de las líneas y las barras se apilan (se acumulan). |
set | Area | Establece el título del gráfico. |
set | Area | Establece el estilo de texto del título del gráfico. |
set | Area | Establece el estilo de texto del eje horizontal. |
set | Area | Agrega un título al eje horizontal. |
set | Area | Establece el estilo de texto del título del eje horizontal. |
set | Area | Establece el estilo de texto del eje vertical. |
set | Area | Agrega un título al eje vertical. |
set | Area | Establece el estilo de texto del título del eje vertical. |
use | Area | Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). |
Bar Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Bar | Revierte el dibujo de las series en el eje de dominio. |
reverse | Bar | Invierte la dirección en la que crecen las barras a lo largo del eje horizontal. |
set | Bar | Establece el color de fondo del gráfico. |
set | Bar | Establece los colores de las líneas del gráfico. |
set | Bar | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Bar | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Bar | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Bar | Establece la definición de vista de datos que se usará para el gráfico. |
set | Bar | Establece las dimensiones del gráfico. |
set | Bar | Establece la posición de la leyenda con respecto al gráfico. |
set | Bar | Establece el estilo de texto de la leyenda del gráfico. |
set | Bar | Establece opciones avanzadas para este gráfico. |
set | Bar | Establece el rango del gráfico. |
set | Bar | Usa líneas apiladas, lo que significa que los valores de las líneas y las barras se apilan (se acumulan). |
set | Bar | Establece el título del gráfico. |
set | Bar | Establece el estilo de texto del título del gráfico. |
set | Bar | Establece el estilo de texto del eje horizontal. |
set | Bar | Agrega un título al eje horizontal. |
set | Bar | Establece el estilo de texto del título del eje horizontal. |
set | Bar | Establece el estilo de texto del eje vertical. |
set | Bar | Agrega un título al eje vertical. |
set | Bar | Establece el estilo de texto del título del eje vertical. |
use | Bar | Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). |
Chart
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
get | Blob | Muestra los datos dentro de este objeto como un blob convertido al tipo de contenido especificado. |
get | Blob | Devuelve los datos dentro de este objeto como un blob. |
get | Chart | Muestra las opciones de este gráfico, como la altura, los colores y los ejes. |
Chart Hidden Dimension Strategy
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
IGNORE_BOTH | Enum | Es el valor predeterminado. Los gráficos omiten las columnas y filas ocultas. |
IGNORE_ROWS | Enum | Los gráficos solo omiten las filas ocultas. |
IGNORE_COLUMNS | Enum | Los gráficos solo omiten las columnas ocultas. |
SHOW_BOTH | Enum | Los gráficos no omiten las columnas ni las filas ocultas. |
Chart Merge Strategy
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
MERGE_COLUMNS | Enum | Predeterminado. |
MERGE_ROWS | Enum | Los gráficos combinan las filas de varios rangos. |
Chart Options
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
get(option) | Object | Muestra una opción configurada para este gráfico. |
get | Object | Muestra una opción configurada para este gráfico. |
Chart Type
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
TIMELINE | Enum | Gráfico de cronograma. |
AREA | Enum | Gráfico de áreas |
BAR | Enum | Gráfico de barras |
BUBBLE | Enum | Gráfico de burbujas. |
CANDLESTICK | Enum | Gráfico de velas. |
COLUMN | Enum | Gráfico de columnas |
COMBO | Enum | Gráfico combinado |
GAUGE | Enum | Gráfico de indicadores. |
GEO | Enum | Gráfico geográfico |
HISTOGRAM | Enum | Histograma |
RADAR | Enum | Gráfico radial. |
LINE | Enum | Gráfico de líneas |
ORG | Enum | Organigrama. |
PIE | Enum | Gráfico circular |
SCATTER | Enum | Diagrama de dispersión (Scatter chart) |
SPARKLINE | Enum | Minigráfico. |
STEPPED_AREA | Enum | Gráfico de áreas escalonado. |
TABLE | Enum | Gráfico de tabla |
TREEMAP | Enum | Gráfico de rectángulos. |
WATERFALL | Enum | Gráfico de cascada. |
Charts
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
Chart | Chart | Es una enumeración de cómo se expresan las dimensiones ocultas de una fuente en un gráfico. |
Chart | Chart | Es una enumeración de cómo se expresan varios rangos de la fuente en un gráfico. |
Chart | Chart | Es una enumeración de los tipos de gráficos que admite el servicio de gráficos. |
Column | Column | Es una enumeración de los tipos de datos válidos para las columnas en un Data . |
Curve | Curve | Es una enumeración de los estilos de las curvas en un gráfico. |
Point | Point | Es una enumeración de los estilos de puntos en una línea. |
Position | Position | Es una enumeración de las posiciones de la leyenda dentro de un gráfico. |
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
new | Area | Comienza a crear un gráfico de área, como se describe en la documentación de Google Chart Tools. |
new | Bar | Comienza a crear un gráfico de barras, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Column | Comienza a crear un gráfico de columnas, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Data | Crea una tabla de datos vacía, cuyos valores se pueden establecer de forma manual. |
new | Data | Crea una nueva definición de vista de datos. |
new | Line | Comienza a crear un gráfico de líneas, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Pie | Comienza a crear un gráfico circular, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Scatter | Comienza a crear un gráfico de dispersión, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Table | Comienza a crear un gráfico de tabla, como se describe en la documentación de Herramientas de gráficos de Google. |
new | Text | Crea un nuevo compilador de estilos de texto. |
Column Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Column | Revierte el dibujo de las series en el eje de dominio. |
set | Column | Establece el color de fondo del gráfico. |
set | Column | Establece los colores de las líneas del gráfico. |
set | Column | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Column | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Column | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Column | Establece la definición de vista de datos que se usará para el gráfico. |
set | Column | Establece las dimensiones del gráfico. |
set | Column | Establece la posición de la leyenda con respecto al gráfico. |
set | Column | Establece el estilo de texto de la leyenda del gráfico. |
set | Column | Establece opciones avanzadas para este gráfico. |
set | Column | Establece el rango del gráfico. |
set | Column | Usa líneas apiladas, lo que significa que los valores de las líneas y las barras se apilan (se acumulan). |
set | Column | Establece el título del gráfico. |
set | Column | Establece el estilo de texto del título del gráfico. |
set | Column | Establece el estilo de texto del eje horizontal. |
set | Column | Agrega un título al eje horizontal. |
set | Column | Establece el estilo de texto del título del eje horizontal. |
set | Column | Establece el estilo de texto del eje vertical. |
set | Column | Agrega un título al eje vertical. |
set | Column | Establece el estilo de texto del título del eje vertical. |
use | Column | Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). |
Column Type
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
DATE | Enum | Corresponde a valores de fecha. |
NUMBER | Enum | Corresponde a valores numéricos. |
STRING | Enum | Corresponde a valores de cadena. |
Curve Style
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
NORMAL | Enum | Líneas rectas sin curvas. |
SMOOTH | Enum | Los ángulos de la línea se suavizan. |
Data Table
Data Table Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
add | Data | Agrega una columna a la tabla de datos. |
add | Data | Agrega una fila a la tabla de datos. |
build() | Data | Compila y muestra una tabla de datos. |
set | Data | Establece un valor específico en la tabla. |
Data Table Source
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
get | Data | Devuelve los datos dentro de este objeto como un DataTable. |
Data View Definition
Data View Definition Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Data | Compila y muestra el objeto de definición de vista de datos que se compiló con este compilador. |
set | Data | Establece los índices de las columnas que se incluirán en la vista de datos, así como la información de la columna de roles. |
Line Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Line | Revierte el dibujo de las series en el eje de dominio. |
set | Line | Establece el color de fondo del gráfico. |
set | Line | Establece los colores de las líneas del gráfico. |
set | Line | Establece el estilo que se usará para las curvas del gráfico. |
set | Line | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Line | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Line | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Line | Establece la definición de vista de datos que se usará para el gráfico. |
set | Line | Establece las dimensiones del gráfico. |
set | Line | Establece la posición de la leyenda con respecto al gráfico. |
set | Line | Establece el estilo de texto de la leyenda del gráfico. |
set | Line | Establece opciones avanzadas para este gráfico. |
set | Line | Establece el estilo de los puntos de la línea. |
set | Line | Establece el rango del gráfico. |
set | Line | Establece el título del gráfico. |
set | Line | Establece el estilo de texto del título del gráfico. |
set | Line | Establece el estilo de texto del eje horizontal. |
set | Line | Agrega un título al eje horizontal. |
set | Line | Establece el estilo de texto del título del eje horizontal. |
set | Line | Establece el estilo de texto del eje vertical. |
set | Line | Agrega un título al eje vertical. |
set | Line | Establece el estilo de texto del título del eje vertical. |
use | Line | Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). |
Match Type
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
EXACT | Enum | Hacer coincidir solo valores exactos |
PREFIX | Enum | Hacer coincidir prefijos desde el principio del valor |
ANY | Enum | Coincidir con cualquier substring |
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
get | String | Muestra el nombre del tipo de concordancia que se usará en el JSON de opciones. |
Number Range Filter Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
set | Number | Establece el valor máximo permitido para el límite inferior del rango. |
set | Number | Establece el valor mínimo permitido para el límite inferior del rango. |
set | Number | Establece la orientación del control deslizante. |
set | Number | Establece si se deben mostrar etiquetas junto al control deslizante que muestra los límites del rango seleccionado. |
set | Number | Establece la cantidad de marcas (posiciones fijas en una barra de rango) en las que pueden caer los controles deslizantes del filtro de rango numérico. |
Orientation
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
HORIZONTAL | Enum | Orientación horizontal. |
VERTICAL | Enum | Orientación vertical |
Picker Values Layout
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
ASIDE | Enum | Los valores seleccionados se muestran en una sola línea de texto junto al widget del selector de valores. |
BELOW | Enum | Los valores seleccionados se muestran en una sola línea de texto debajo del widget. |
BELOW_WRAPPING | Enum | Es similar a lo que se muestra a continuación, pero las entradas que no caben en el selector se pasan a una línea nueva. |
BELOW_STACKED | Enum | Los valores seleccionados se muestran en una columna debajo del widget. |
Pie Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Pie | Revierte el dibujo de las series en el eje de dominio. |
set3D() | Pie | Establece que el gráfico sea tridimensional. |
set | Pie | Establece el color de fondo del gráfico. |
set | Pie | Establece los colores de las líneas del gráfico. |
set | Pie | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Pie | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Pie | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Pie | Establece la definición de vista de datos que se usará para el gráfico. |
set | Pie | Establece las dimensiones del gráfico. |
set | Pie | Establece la posición de la leyenda con respecto al gráfico. |
set | Pie | Establece el estilo de texto de la leyenda del gráfico. |
set | Pie | Establece opciones avanzadas para este gráfico. |
set | Pie | Establece el título del gráfico. |
set | Pie | Establece el estilo de texto del título del gráfico. |
Point Style
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
NONE | Enum | No muestres puntos de línea. |
TINY | Enum | Usa puntos de línea pequeños. |
MEDIUM | Enum | Usa puntos de línea de tamaño mediano. |
LARGE | Enum | Usa puntos de línea de gran tamaño. |
HUGE | Enum | Usa los puntos de línea de mayor tamaño. |
Position
Propiedades
Propiedad | Tipo | Descripción |
---|---|---|
TOP | Enum | Sobre el gráfico. |
RIGHT | Enum | A la derecha del gráfico. |
BOTTOM | Enum | Debajo del gráfico. |
NONE | Enum | No se muestra ninguna leyenda. |
Scatter Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
set | Scatter | Establece el color de fondo del gráfico. |
set | Scatter | Establece los colores de las líneas del gráfico. |
set | Scatter | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Scatter | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Scatter | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Scatter | Establece la definición de vista de datos que se usará para el gráfico. |
set | Scatter | Establece las dimensiones del gráfico. |
set | Scatter | Establece la posición de la leyenda con respecto al gráfico. |
set | Scatter | Establece el estilo de texto de la leyenda del gráfico. |
set | Scatter | Establece opciones avanzadas para este gráfico. |
set | Scatter | Establece el estilo de los puntos de la línea. |
set | Scatter | Establece el título del gráfico. |
set | Scatter | Establece el estilo de texto del título del gráfico. |
set | Scatter | Convierte el eje horizontal en una escala logarítmica (requiere que todos los valores sean positivos). |
set | Scatter | Establece el rango para el eje horizontal del gráfico. |
set | Scatter | Establece el estilo de texto del eje horizontal. |
set | Scatter | Agrega un título al eje horizontal. |
set | Scatter | Establece el estilo de texto del título del eje horizontal. |
set | Scatter | Convierte el eje vertical en una escala logarítmica (requiere que todos los valores sean positivos). |
set | Scatter | Establece el rango para el eje vertical del gráfico. |
set | Scatter | Establece el estilo de texto del eje vertical. |
set | Scatter | Agrega un título al eje vertical. |
set | Scatter | Establece el estilo de texto del título del eje vertical. |
String Filter Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
set | String | Establece si la coincidencia debe distinguir mayúsculas de minúsculas. |
set | String | Establece si el control debe coincidir solo con valores exactos (Match ), prefijos que comienzan desde el principio del valor (Match ) o cualquier subcadena (Match ). |
set | String | Establece si el control debe coincidir cada vez que se presiona una tecla o solo cuando el campo de entrada "cambia" (pérdida de enfoque o presionar la tecla Intro). |
Table Chart Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
enable | Table | Establece si se debe habilitar la paginación a través de los datos. |
enable | Table | Habilita la paginación y establece la cantidad de filas en cada página. |
enable | Table | Habilita la paginación, establece la cantidad de filas en cada página y la primera página de la tabla que se mostrará (los números de página se basan en cero). |
enable | Table | Agrega compatibilidad básica con idiomas de derecha a izquierda (como el árabe o el hebreo) invirtiendo el orden de las columnas de la tabla, de modo que la columna cero sea la más a la derecha y la última columna sea la más a la izquierda. |
enable | Table | Establece si se ordenan las columnas cuando el usuario hace clic en el encabezado de una columna. |
set | Table | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Table | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Table | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Table | Establece la definición de vista de datos que se usará para el gráfico. |
set | Table | Establece las dimensiones del gráfico. |
set | Table | Establece el número de fila para la primera fila de la tabla de datos. |
set | Table | Establece el índice de la columna según el cual se debe ordenar inicialmente la tabla (ascendente). |
set | Table | Establece el índice de la columna según el cual se debe ordenar inicialmente la tabla (descendente). |
set | Table | Establece opciones avanzadas para este gráfico. |
show | Table | Establece si se mostrará el número de fila como la primera columna de la tabla. |
use | Table | Establece si se asigna un estilo de color alternativo a las filas impares y pares de un gráfico de tabla. |
Text Style
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
get | String | Obtiene el color del estilo de texto. |
get | String | Obtiene el nombre de la fuente del estilo de texto. |
get | Number | Obtiene el tamaño de fuente del estilo de texto. |
Text Style Builder
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Text | Compila y muestra un objeto de configuración de estilo de texto que se compiló con este compilador. |
set | Text | Establece el color del estilo de texto. |
set | Text | Establece el nombre de la fuente del estilo de texto. |
set | Text | Establece el tamaño de fuente del estilo de texto. |