Écrire le code de visualisation
La bibliothèque d'aide Looker Studio constitue une interface entre Looker Studio et vous. Pour utiliser la bibliothèque, fournissez une fonction de rappel qui affiche la visualisation.
La fonction la plus importante de la bibliothèque est subscribeToData, qui utilise deux arguments: une fonction callback qui affiche la visualisation, et un objet options qui spécifie le type de transformation que vous souhaitez appliquer à vos données. Pour en savoir plus, consultez la documentation de référence de la bibliothèque.
Voici un aperçu de votre visualisation 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})
Vous devez garder à l'esprit certains éléments clés lors de la rédaction d'une visualisation de la communauté.
Les mises à jour de la fonction subscribeToData se produisent lorsque la taille des données, du style ou du cadre iFrame change.
Exemple :
// 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 charge et exécute les fichiers JavaScript, et non les fichiers HTML. Toute manipulation DOM doit se faire via JavaScript.
Par exemple, le code suivant définit et ajoute un div au DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Regrouper le code
Les visualisations de la communauté Looker Studio ne vous permettent de charger qu'un seul fichier JavaScript. Le code importé doit être un fichier unique comprenant la bibliothèque d'aide DSC, toutes les bibliothèques de visualisation JavaScript et votre code de visualisation.
Pour ce faire dans bash, vous pouvez utiliser la commande cat, comme ci-dessous.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Définir le fichier manifeste
Le fichier manifeste de visualisation fournit des métadonnées sur la visualisation, ainsi que des informations sur l'emplacement des ressources de visualisation. L'emplacement du fichier manifeste est appelé "ID de composant". Il permet de charger une visualisation de la communauté.
Consultez la référence du fichier manifeste pour voir un exemple de fichier manifeste.
Le paramètre devMode du fichier manifeste détermine le comportement de mise en cache de la visualisation. Lors du développement de la visualisation, devMode doit être défini sur true pour garantir que les actualisations forcées chargent la dernière version des ressources. Une fois le code stable, devMode doit être défini sur false pour que les rapports contenant des visualisations de la communauté se chargent rapidement. Pour en savoir plus sur la mise en cache, consultez le guide avancé de la mise en cache.
Étapes suivantes
Maintenant que le code de votre visualisation est écrit, découvrez comment l'héberger.