Escribe el código de visualización
La biblioteca auxiliar de Looker Studio proporciona una interfaz entre tú y Looker a 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
Un objeto options que especifica el tipo de transformación en la que deseas que se realicen tus datos
realizar. Para obtener más información, consulta la referencia de bibliotecas.
A continuación, se ofrece un esquema de lo que podría tener el JavaScript de visualización y cómo se vería.
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 algunas cosas clave que debes tener en cuenta cuando escribas una comunidad visualización.
Las actualizaciones de la función subscribeToData ocurren cuando los datos, el diseño o
los cambios en el tamaño de 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 tiene que ocurrir 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 empaquetar el código
Las visualizaciones de la comunidad de Looker Studio solo te permiten cargar un código JavaScript . El código subido debe ser un archivo único que incluya el DCC biblioteca auxiliar, cualquier biblioteca de visualización de JavaScript y tu visualización código.
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 la visualización proporciona metadatos sobre la visualización, como así como información sobre la ubicación de los recursos de visualización. La ubicación del archivo de manifiesto se conoce como el "ID de componente" y se utiliza para cargar una visualización comunitaria.
Revisa la referencia del manifiesto para ver un manifiesto de muestra.
El parámetro devMode del manifiesto determina el comportamiento de almacenamiento en caché del
visualización. Mientras se desarrolla la visualización, devMode debe ser true para
y garantizar que las actualizaciones forzadas
carguen la última versión de los recursos. Una vez que
sea estable, devMode debe ser false para garantizar que los informes con
las visualizaciones de la comunidad
cargan rápidamente. Para obtener más información sobre el almacenamiento en caché, consulta el
guía avanzada sobre almacenamiento en caché.
Próximos pasos
Ahora que ya escribiste el código de la visualización, aprende a alojar tu visualización.