1. Introducción
Data Studio te permite crear paneles interactivos en vivo con visualizaciones de datos atractivas de forma gratuita. Recopila tus datos de una variedad de fuentes y crea informes ilimitados en Data Studio, con capacidades completas de edición y uso compartido. La siguiente captura de pantalla es un ejemplo de un informe de Data Studio:
( Haz clic aquí para ver este informe de ejemplo en Data Studio)
Data Studio proporciona varios tipos de gráficos integrados, incluidos los gráficos de líneas, los gráficos de barras, los gráficos circulares y los diagramas de dispersión. Las visualizaciones comunitarias te permiten crear y usar tus propias visualizaciones de JavaScript personalizadas en Data Studio. También puedes compartir tus visualizaciones comunitarias con otras personas para que las usen con sus propios datos.
Qué aprenderás
En este codelab, aprenderás lo siguiente:
- Cómo funciona una visualización comunitaria de Data Studio
- Cómo crear una visualización comunitaria con la biblioteca de ayuda ds-component (dscc)
- Cómo usar tu visualización de la comunidad en un informe de Data Studio
Requisitos
Para completar este lab de código, necesitarás lo siguiente:
- Acceso a Internet y un navegador web
- Una Cuenta de Google.
- Acceso a un bucket de almacenamiento de Google Cloud Platform
- Conocimientos de JavaScript
2. Encuesta rápida
¿Por qué elegiste este codelab?
¿Cómo planeas usar este codelab o instructivo?
¿Cómo calificarías tu experiencia con Data Studio?
¿Cuál de las siguientes opciones describe mejor tu experiencia?
¿Qué bibliotecas de visualización de JavaScript te interesa usar?
Avanza a la página siguiente para enviar la información de la encuesta.
3. Descripción general de las visualizaciones comunitarias
Las visualizaciones de la comunidad de Data Studio te permiten crear y usar visualizaciones de JavaScript personalizadas en tus paneles.
En este codelab, crearás una visualización de comunidad de gráfico de tabla que admita 1 dimensión, 1 métrica y el diseño del encabezado de la tabla.
4. Flujo de trabajo de desarrollo de visualizaciones comunitarias
Para crear una visualización de la comunidad, necesitas los siguientes archivos en un bucket de almacenamiento de Google Cloud Platform, que crearás en un paso posterior:
Nombre del archivo | Tipo de archivo | Objetivo |
manifest.json* | JSON | Son los metadatos sobre la visualización y las ubicaciones de todos los recursos de visualización. |
viz-codelab.json | JSON | Son las opciones de configuración de datos y estilo del panel Propiedades. |
viz-codelab.js | JavaScript | Es el código de JavaScript para renderizar la visualización. |
viz-codelab.css (opcional) | CSS | Son los estilos CSS para la visualización. |
*El manifiesto es el único archivo que tiene un nombre obligatorio. Los otros archivos pueden tener nombres diferentes, siempre y cuando su nombre o ubicación se especifiquen en el archivo de manifiesto.
5. Escribe una visualización de Hello, world!
En esta sección, agregarás el código necesario para renderizar una visualización simple de Hello, world!.
Escribe el código fuente de JavaScript de la visualización
Paso 1: Descarga el archivo dscc.min.js de la página de la Biblioteca de componentes comunitarios de Data Studio (dscc) y cópialo en tu directorio de trabajo.
Paso 2: Copia el siguiente código en un editor de texto y guárdalo como viz-codelab-src.js en tu directorio de trabajo local.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Prepara el archivo de paquete JavaScript
Paso 3: Combina todo el código JavaScript necesario en un solo archivo. Para ello, copia el contenido de la biblioteca de ayuda para la visualización (dscc.min.js) y tu archivo viz-codelab-src.js en un archivo nuevo llamado viz-codelab.js. Se pueden ejecutar los siguientes comandos para concatenar los archivos. Repite este paso cada vez que actualices el código de visualización de la fuente.
Secuencia de comandos de concatenación de Linux/macOS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Secuencia de comandos de concatenación de Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Escribe el CSS de la visualización
El archivo CSS define el diseño de tu visualización y es opcional. Copia el siguiente CSS y guárdalo como viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Escribe la configuración de JSON
La configuración de visualización define los atributos de datos y diseño que admite y requiere tu visualización. Esta visualización en este codelab requiere una dimensión y una métrica, y tiene un elemento de diseño para seleccionar un color de relleno. Obtén más información sobre las dimensiones y métricas.
Copia el siguiente código y guárdalo como viz-codelab.json.. Para obtener más información sobre las propiedades que puedes configurar, consulta la Referencia de configuración de visualizaciones de la comunidad.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Crea un proyecto y un bucket de Cloud Storage
Paso 1: Crea un proyecto de Google Cloud Platform (GCP) o usa uno existente.
Paso 2: Crea un bucket de GCP. La clase de almacenamiento recomendada es Regional. Visita Precios de Cloud Storage para obtener detalles sobre los niveles gratuitos. Nota: Es poco probable que el almacenamiento de visualizaciones genere costos para la clase de almacenamiento Regional Storage.
Paso 3: Toma nota del nombre o la ruta de tu bucket, comenzando con la sección después de Buckets/. En Data Studio, la ruta se conoce como "ID de componente" y se usa para identificar e implementar una visualización.
9. Escribe el archivo manifest.json
El archivo de manifiesto proporciona información sobre la ubicación y los recursos de tu visualización. Debe llamarse "manifest.json" y estar ubicado en el bucket o la ruta de acceso creados en el paso anterior, la misma ruta de acceso que se usó para el ID del componente.
Copia el siguiente código en un editor de texto y guárdalo como manifest.json..
Para obtener más información sobre el manifiesto, consulta la documentación de referencia del manifiesto.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Data Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Sube tus archivos de visualización a Google Cloud Storage
- Sube los archivos
manifest.json,viz-codelab.js,viz-codelab.jsonyviz-codelab.cssa tu bucket de Cloud Storage con la interfaz web o la herramienta de línea de comandos de gsutil. Repite este paso cada vez que actualices la visualización.
Comandos de carga de gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Prueba tu visualización comunitaria en Data Studio
Crea un informe y agrega datos
Paso 1: Copia la URL del conjunto de datos de muestra de la visualización de la comunidad. Como alternativa, usa la fuente de datos que prefieras y omite los siguientes pasos.
Paso 2: Accede a Data Studio. En la parte superior izquierda, haz clic en + Crear y, luego, selecciona Informe.
Paso 3: Verás la herramienta para editar informes, que tendrá abierto el panel Agregar datos al informe.
Paso 4: En la pestaña Connect to data, selecciona el conector Hojas de cálculo de Google de Google.
Paso 5: Selecciona URL y pega la URL de la hoja de cálculo de Google del paso 1.
Paso 6: En la esquina inferior derecha, haz clic en Agregar.
Paso 7: Si se te solicita que confirmes Vas a agregar datos a este informe, haz clic en AGREGAR AL INFORME. Se crea un informe sin título y se agrega una tabla predeterminada al informe con datos de muestra. De manera opcional, selecciona y borra la tabla predeterminada para que te quede un informe en blanco.
Agrega tu visualización comunitaria al informe
Paso 1: En la barra de herramientas, haz clic en Visualizaciones y componentes comunitarios 
.
Paso 2: Haz clic en + Explora más para abrir la Galería de la comunidad.
Paso 3: Haz clic en Crea tu propia visualización.
Paso 4: En Prueba y agrega tu visualización comunitaria, ingresa la ruta de acceso del manifiesto y haz clic en Enviar. La ruta de acceso al manifiesto es el nombre y la ruta de acceso del bucket de Cloud Storage de Google Cloud que apuntan a la ubicación del manifiesto de tu visualización, con el prefijo gs://.. Por ejemplo: gs://community-viz-docs/viz-codelab. Si ingresaste una ruta de acceso de manifiesto válida, se debería renderizar una tarjeta de visualización.
Paso 5: Haz clic en la tarjeta de visualización para agregarla a tu informe.
Paso 6: Si se te solicita, otorga tu consentimiento para permitir que se renderice la visualización.
Paso 7: De manera opcional, actualiza la dimensión y la métrica seleccionadas para la tabla. Si usas el conjunto de datos de muestra proporcionado, establece la dimensión en País y la métrica en Población. Esto no tendrá ningún efecto en la visualización hasta más adelante en el codelab.
El panel de propiedades del lado derecho refleja los elementos configurados en viz-codelab.json.
En el panel Configuración, la visualización permite una dimensión y una métrica.
En el panel Estilo, la visualización tiene un solo elemento para diseñar el encabezado de la tabla. En este punto, el control de estilo no tendrá ningún efecto en la visualización hasta que se actualice el código de visualización en un paso posterior. Nota: Verás opciones de diseño adicionales para tu visualización que no definiste en el archivo de configuración. Esto es normal, ya que todas las visualizaciones tienen un conjunto de controles comunes que están disponibles automáticamente.
12. Renderiza los datos como una tabla
En esta sección, actualizarás tu visualización para mostrar el conjunto de datos de muestra de la visualización comunitaria como una tabla.
Los datos que se renderizarán están disponibles en el objeto tables y se estructuran según la transformación que especifica tu visualización. En este codelab, la visualización solicitó el formato de tabla (tableTransform), que incluye un objeto headers y un objeto rows que contiene todos los datos que necesitamos para renderizar una tabla.
Paso 1: Reemplaza el contenido de viz-codelab-src.js con el siguiente código.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Paso 2: Prepara el archivo de paquete de JavaScript y, luego, sube y reemplaza tus archivos de visualización en Google Cloud Storage.
Paso 3: Actualiza el informe de Data Studio para volver a cargar y probar tu visualización de la comunidad. Ahora, la tabla renderiza los datos (es decir, la hoja de cálculo de Google) y muestra las columnas de encabezado según la dimensión y la métrica seleccionadas. Cambia el tamaño de la visualización para ver todas las filas.
13. Aplica cambios de estilo de forma dinámica
En esta sección, actualizarás la visualización para aplicar un estilo al encabezado de la tabla según el color de relleno seleccionado en el panel Estilo.
El estado de todos los elementos de diseño está disponible en el objeto style, en el que cada clave de elemento se define según la configuración del diseño de visualización (viz-codelab.json). En esta sección, obtendrás el color de relleno seleccionado y lo usarás para actualizar el color de fondo del encabezado de la tabla.
Paso 1: Reemplaza el código de tu archivo viz-codelab-src.js por el siguiente.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Paso 2: Prepara el archivo de paquete de JavaScript y, luego, sube y reemplaza tus archivos de visualización en Google Cloud Storage.
Paso 3: Actualiza el informe de Data Studio para volver a cargar y probar tu visualización de la comunidad.
Paso 4: En el panel Estilo, usa el control de estilo Color de fondo del encabezado para cambiar el color de fondo del encabezado de la tabla.
¡Felicitaciones! Creaste una visualización comunitaria en Data Studio. Con esto, llegas al final de este codelab. Ahora, veamos qué pasos puedes seguir.
14. Próximos pasos
Extiende tu visualización
- Obtén más información sobre los datos y los formatos disponibles para tu visualización.
- Obtén más información sobre los elementos de estilo disponibles y agrega más estilos a tu visualización.
- Agrega interacciones a tu visualización
- Aprende a desarrollar una visualización de forma local
Aprovecha al máximo las visualizaciones comunitarias
- Revisa las referencias de la biblioteca auxiliar de DSCC, el manifiesto y el archivo de configuración.
- Envía tu visualización a nuestra Galería de visualizaciones comunitarias.
- Compila un conector de la comunidad para Data Studio.
Recursos adicionales
A continuación, encontrarás varios recursos a los que puedes acceder para analizar en profundidad el material que vimos en este codelab.
Tipo de recurso | Funciones para el usuario | Funciones para desarrolladores |
Documentación | ||
Novedades y actualizaciones | Regístrate en Data Studio > Configuración del usuario | |
Haz preguntas | ||
Ejemplos |