Escribe 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 tomen 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 ser tu visualización de JavaScript.
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 escribes una visualización de la comunidad.
Las actualizaciones de la función subscribeToData se producen cuando cambian los datos, el estilo 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 un div y lo agrega al DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Cómo empaquetar el código
Las visualizaciones de la comunidad de Looker Studio solo te permiten cargar un archivo JavaScript. El código subido debe ser un solo archivo que incluya la biblioteca auxiliar de dscc, cualquier biblioteca de visualización de JavaScript y tu código de 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 denomina "ID de componente" y se usa para cargar la visualización de una 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 de almacenamiento en caché.
Próximos pasos
Ahora que tienes el código de tu visualización escrito, aprende a alojar tu visualización.