Este servicio permite a los usuarios crear gráficos con las Herramientas de gráficos de Google y renderizarlos del lado 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 una 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 de gráficos de áreas. |
Bar | Es un compilador de gráficos de barras. |
Chart | 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 en el origen en un gráfico. |
Chart | Expone las opciones configuradas actualmente para un Chart, como la altura, el color, etcétera. |
Chart | Son los tipos de gráficos que admite el servicio de Charts. |
Charts | Es el punto de entrada para crear gráficos en secuencias de comandos. |
Column | 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 datos de gráficos. |
Data | Compilador para objetos Data. |
Line | Es un compilador de 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 los 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 del selector. |
Pie | Es un compilador de gráficos circulares. |
Point | Es una enumeración de los estilos de los 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 de diagramas de dispersión. |
String | Es un compilador para los controles de filtro de cadenas. |
Table | Es un compilador de gráficos de tabla. |
Text | Es un objeto de configuración de estilo de texto. |
Text | Es un compilador que se usa para crear objetos Text. |
AreaChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Area | Invierte el dibujo de las series en el eje del 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 la 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 líneas y barras se apilan (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 del 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 del 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). |
BarChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Bar | Invierte el dibujo de las series en el eje del 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 la 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 líneas y barras se apilan (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 del 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 del 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 devuelve | Descripción breve |
|---|---|---|
get | Blob | Devuelve 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 | Devuelve las opciones de este gráfico, como la altura, los colores y los ejes. |
ChartHiddenDimensionStrategy
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
IGNORE_BOTH | Enum | Es el valor predeterminado. Los gráficos omiten las columnas y las 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 | Gráficos no omite las columnas ni las filas ocultas. |
ChartMergeStrategy
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
MERGE_COLUMNS | Enum | Predeterminado. |
MERGE_ROWS | Enum | Los gráficos combinan las filas de varios rangos. |
ChartOptions
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
get(option) | Object | Devuelve una opción configurada para este gráfico. |
get | Object | Devuelve una opción configurada para este gráfico. |
ChartType
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 | Diagrama 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 | Diagrama 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 |
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 en el origen en un gráfico. |
Chart | Chart | Es una enumeración de los tipos de gráficos que admite el servicio de Charts. |
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 los 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 devuelve | Descripción breve |
|---|---|---|
new | Area | Comienza a compilar un gráfico de área, como se describe en la documentación de Google Chart Tools. |
new | Bar | Comienza a compilar un gráfico de barras, como se describe en la documentación de Google Chart Tools. |
new | Column | Comienza a compilar un gráfico de columnas, como se describe en la documentación de Google Chart Tools. |
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 compilar un gráfico de líneas, como se describe en la documentación de Google Chart Tools. |
new | Pie | Comienza a compilar un gráfico circular, como se describe en la documentación de Google Chart Tools. |
new | Scatter | Comienza a compilar un gráfico de dispersión, como se describe en la documentación de Google Chart Tools. |
new | Table | Comienza a compilar un gráfico de tabla, como se describe en la documentación de Google Chart Tools. |
new | Text | Crea un nuevo compilador de diseño de texto. |
ColumnChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Column | Invierte el dibujo de las series en el eje del 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 la 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 líneas y barras se apilan (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 del 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 del 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). |
ColumnType
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. |
CurveStyle
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
NORMAL | Enum | Líneas rectas sin curvas. |
SMOOTH | Enum | Los ángulos de la línea se suavizan. |
DataTable
DataTableBuilder
Métodos
| Método | Tipo de datos que se devuelve | 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 devuelve una tabla de datos. |
set | Data | Establece un valor específico en la tabla. |
DataTableSource
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
get | Data | Devuelve los datos dentro de este objeto como un objeto DataTable. |
DataViewDefinition
DataViewDefinitionBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Data | Compila y devuelve el objeto de definición de la 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 y especifica la información de las columnas de rol. |
LineChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Line | Invierte el dibujo de las series en el eje del 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 en el 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 la 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 del 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 del 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). |
MatchType
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
EXACT | Enum | Solo coincidir con valores exactos |
PREFIX | Enum | Coincide con los prefijos que comienzan al principio del valor. |
ANY | Enum | Coincide con cualquier subcadena |
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
get | String | Devuelve el nombre del tipo de coincidencia que se usará en el JSON de opciones. |
NumberRangeFilterBuilder
Métodos
| Método | Tipo de datos que se devuelve | 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 muestren los límites del rango seleccionado. |
set | Number | Establece la cantidad de marcas (posiciones fijas en una barra de rango) en las que pueden detenerse los controles deslizantes de un filtro de rango numérico. |
Orientation
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
HORIZONTAL | Enum | Orientación horizontal. |
VERTICAL | Enum | Orientación vertical. |
PickerValuesLayout
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 | Similar a la siguiente, pero las entradas que no caben en el selector pasan a una línea nueva. |
BELOW_STACKED | Enum | Los valores seleccionados se muestran en una columna debajo del widget. |
PieChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Pie | Invierte el dibujo de las series en el eje del dominio. |
set3D() | Pie | Establece el gráfico como 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 la 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. |
PointStyle
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
NONE | Enum | No se muestran los puntos de la 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 más grandes. |
Position
Propiedades
| Propiedad | Tipo | Descripción |
|---|---|---|
TOP | Enum | Encima del gráfico |
RIGHT | Enum | A la derecha del gráfico |
BOTTOM | Enum | Debajo del gráfico |
NONE | Enum | No se muestra ninguna leyenda. |
ScatterChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | 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 la 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 del eje horizontal del gráfico. |
set | Scatter | Establece el estilo del 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 del eje vertical del gráfico. |
set | Scatter | Establece el estilo del 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. |
StringFilterBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
set | String | Establece si la coincidencia debe distinguir mayúsculas de minúsculas o no. |
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 presión de la tecla Intro). |
TableChartBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
enable | Table | Establece si se debe habilitar la paginación 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 comienzan en cero). |
enable | Table | Agrega compatibilidad básica para 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 columna más a la derecha y la última columna sea la columna más a la izquierda. |
enable | Table | Establece si se deben ordenar las columnas cuando el usuario hace clic en un encabezado de 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 la 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 de la primera fila de la tabla de datos. |
set | Table | Establece el índice de la columna según la cual se debe ordenar inicialmente la tabla (de forma ascendente). |
set | Table | Establece el índice de la columna según la cual se debe ordenar inicialmente la tabla (de forma descendente). |
set | Table | Establece opciones avanzadas para este gráfico. |
show | Table | Establece si se debe mostrar el número de fila como la primera columna de la tabla. |
use | Table | Establece si se asigna un estilo de color alternado a las filas pares e impares de un gráfico de tabla. |
TextStyle
Métodos
| Método | Tipo de datos que se devuelve | 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. |
TextStyleBuilder
Métodos
| Método | Tipo de datos que se devuelve | Descripción breve |
|---|---|---|
build() | Text | Compila y devuelve 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. |