Escribir el código de visualización
La biblioteca de ayuda de Looker Studio proporciona una interfaz entre tú y Looker Studio. Para usar la biblioteca, proporciona una función de devolución de llamada que renderice la visualización.
La función más destacada de la biblioteca es subscribeToData, que toma dos argumentos: una función callback que renderiza la visualización y un objeto options que especifica qué tipo de transformación deseas que realicen tus datos. Para obtener más información, consulta la referencia de la biblioteca.
A continuación, se proporciona un esquema de cómo podría verse tu código JavaScript de visualización.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Hay algunos aspectos clave que debes tener en cuenta cuando escribas una visualización de la comunidad.
Las actualizaciones de la función subscribeToData se producen cuando cambian los datos, el diseño o el tamaño del iframe.
Por ejemplo:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio carga y ejecuta archivos JavaScript, no HTML. Toda la manipulación del DOM debe realizarse a través de JavaScript.
Por ejemplo, el siguiente código define y agrega un div al DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Cómo agrupar el código
Las visualizaciones comunitarias de Looker Studio solo te permiten cargar un archivo JavaScript. El código subido debe ser un solo archivo que incluya la biblioteca de ayuda de DSCC, cualquier biblioteca de visualización de JavaScript y el código de tu visualización.
Para hacerlo en Bash, puedes usar el comando cat, como se muestra a continuación.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Cómo definir el manifiesto
El archivo de manifiesto de visualización proporciona metadatos sobre la visualización, así como información sobre la ubicación de los recursos de visualización. La ubicación del archivo de manifiesto se conoce como "ID de componente" y se usa para cargar una visualización de la comunidad.
Revisa la referencia del manifiesto para ver un manifiesto de muestra.
El parámetro devMode del manifiesto determina el comportamiento del almacenamiento en caché de la visualización. Mientras desarrollas la visualización, devMode debe ser true para garantizar que las actualizaciones forzadas carguen la versión más reciente de los recursos. Una vez que el código sea estable, devMode debe ser false para garantizar que los informes con visualizaciones de la comunidad se carguen rápidamente. Para obtener más información sobre el almacenamiento en caché, consulta la guía avanzada sobre el almacenamiento en caché.
Próximos pasos
Ahora que escribiste el código para tu visualización, aprende a alojarla.