Écrire le code de visualisation
La bibliothèque d'assistance Looker Studio fournit une interface entre vous et Looker Studio. 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 prend 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.
Vous trouverez ci-dessous un aperçu de ce à quoi pourrait ressembler votre code JavaScript de visualisation.
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})
Lorsque vous créez une visualisation de la communauté, vous devez garder à l'esprit quelques points clés.
Les mises à jour de la fonction subscribeToData se produisent lorsque les données, le style ou la taille de l'iFrame changent.
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 du 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 qui inclut la bibliothèque d'assistance dscc, 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 la 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" et est utilisé pour charger une visualisation de la communauté.
Consultez la documentation de référence sur les fichiers manifestes 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 s'assurer 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 avec des visualisations de la communauté se chargent rapidement. Pour en savoir plus sur la mise en cache, consultez le guide avancé sur la mise en cache.
Étapes suivantes
Maintenant que vous avez écrit le code de votre visualisation, découvrez comment l'héberger.