1. Introduction
Looker Studio vous permet de créer sans frais des tableaux de bord interactifs et dynamiques avec de magnifiques visualisations de données. Récupérez vos données à partir de différentes sources et créez des rapports illimités dans Looker Studio, avec des fonctionnalités complètes de modification et de partage. La capture d'écran suivante est un exemple de rapport Looker Studio :
( Cliquez ici pour afficher cet exemple de rapport dans Looker Studio)
Looker Studio propose plusieurs types de graphiques intégrés, y compris des graphiques en courbes, à barres, à secteurs et à nuage de points. Les visualisations de la communauté vous permettent de créer et d'utiliser vos propres visualisations JavaScript personnalisées dans Looker Studio. Vous pouvez également partager vos visualisations de la communauté avec d'autres utilisateurs afin qu'ils puissent les utiliser avec leurs propres données.
Points abordés
Dans cet atelier de programmation, vous allez découvrir :
- Fonctionnement d'une visualisation de la communauté Looker Studio.
- Comment créer une visualisation de la communauté à l'aide de la bibliothèque d'assistance ds-component (dscc).
- Découvrez comment utiliser votre visualisation de la communauté dans un rapport Looker Studio.
Prérequis
Pour réaliser cet atelier de programmation, vous aurez besoin des éléments suivants :
- Accès à Internet et à un navigateur Web.
- Un compte Google.
- Accès à un bucket de stockage Google Cloud Platform.
- Connaissances de base de JavaScript.
2. Enquête rapide
Pourquoi avez-vous choisi cet atelier de programmation ?
Comment prévoyez-vous d'utiliser cet atelier de programmation/tutoriel ?
Comment évalueriez-vous votre expérience avec Looker Studio ?
Quelle est votre formation ?
Quelles bibliothèques de visualisation JavaScript souhaitez-vous utiliser ?
Passez à la page suivante pour envoyer les informations de l'enquête.
3. Présentation des visualisations de la communauté
Les visualisations de la communauté Looker Studio vous permettent de créer et d'utiliser des visualisations JavaScript personnalisées dans vos tableaux de bord.
Dans cet atelier de programmation, vous allez créer une visualisation de tableau de la communauté qui accepte une dimension, une métrique et la mise en forme de l'en-tête du tableau.
4. Workflow de développement des visualisations de la communauté
Pour créer une visualisation de la communauté, vous avez besoin des fichiers suivants dans un bucket de stockage Google Cloud Platform, que vous créerez lors d'une étape ultérieure :
Nom de fichier | Type de fichier | Objectif |
manifest.json* | JSON | Métadonnées sur la visualisation et les emplacements de toutes les ressources de visualisation. |
viz-codelab.json | JSON | Options de configuration des données et du style pour le panneau "Propriété". |
viz-codelab.js | JavaScript | Code JavaScript permettant d'afficher la visualisation. |
viz-codelab.css (facultatif) | CSS | Styles CSS pour la visualisation. |
*Le fichier manifeste est le seul fichier dont le nom est obligatoire. Les autres fichiers peuvent être nommés différemment, à condition que leur nom/emplacement soit spécifié dans le fichier manifeste.
5. Écrire une visualisation "Hello, world!"
Dans cette section, vous allez ajouter le code nécessaire pour afficher une simple visualisation "Hello, world!".
Écrire la source JavaScript de la visualisation
Étape 1 : Téléchargez le fichier dscc.min.js depuis la page Bibliothèque de composants de la communauté Looker Studio (dscc) et copiez-le dans votre répertoire de travail.
Étape 2 : Copiez le code suivant dans un éditeur de texte et enregistrez-le sous le nom viz-codelab-src.js dans votre répertoire de travail local.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Préparer le fichier de bundle JavaScript
Étape 3 : Combinez tout le code JavaScript requis dans un seul fichier en copiant le contenu de la bibliothèque d'assistance pour la visualisation (dscc.min.js) et de votre fichier viz-codelab-src.js dans un nouveau fichier nommé viz-codelab.js. Les commandes suivantes peuvent être exécutées pour concaténer les fichiers. Répétez cette étape chaque fois que vous mettez à jour le code de visualisation de la source.
Script de concaténation Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Script de concaténation Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Écrire le CSS de la visualisation
Le fichier CSS définit le style de votre visualisation et est facultatif. Copiez le code CSS suivant et enregistrez-le sous le nom viz-codelab.css..
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Écrire la configuration JSON
La configuration de la visualisation définit les attributs de données et de style acceptés et requis par votre visualisation. La visualisation de cet atelier de programmation nécessite une dimension et une métrique, et comporte un élément de style permettant de sélectionner une couleur de remplissage. En savoir plus sur les dimensions et les métriques
Copiez le code suivant et enregistrez-le sous viz-codelab.json.. Pour en savoir plus sur les propriétés que vous pouvez configurer, consultez la documentation de référence sur la configuration des visualisations de la communauté.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Créer un projet et un bucket Cloud Storage
Étape 1 : créez un projet Google Cloud Platform (GCP) ou utilisez-en un existant.
Étape 2 : créez un bucket GCP. La classe de stockage recommandée est "Régional". Consultez les tarifs de Cloud Storage pour en savoir plus sur les niveaux sans frais. Remarque : Il est peu probable que le stockage de vos visualisations entraîne des coûts pour la classe de stockage régionale.
Étape 3 : Notez le nom/chemin d'accès de votre bucket, en commençant par la section après Buckets/. Dans Looker Studio, le chemin d'accès est appelé "ID de composant". Il permet d'identifier et de déployer une visualisation.
9. Écrire le fichier manifest.json
Le fichier manifeste fournit des informations sur l'emplacement et les ressources de votre visualisation. Il doit être nommé "manifest.json" et se trouver dans le bucket/chemin d'accès créé à l'étape précédente, le même chemin d'accès que celui utilisé pour votre ID de composant.
Copiez le code suivant dans un éditeur de texte et enregistrez-le sous le nom manifest.json..
Pour en savoir plus sur le fichier manifeste, consultez la documentation de référence sur le fichier manifeste.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Importer vos fichiers de visualisation dans Google Cloud Storage
- Importez les fichiers
manifest.json,viz-codelab.js,viz-codelab.jsonetviz-codelab.cssdans votre bucket Google Cloud Storage à l'aide de l'interface Web ou de l'outil de ligne de commande gsutil. Répétez cette opération chaque fois que vous mettez à jour votre visualisation.
Commandes gsutil upload
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Tester votre visualisation de la communauté dans Looker Studio
Créer un rapport et ajouter des données
Étape 1 : Copiez l'URL de l'ensemble de données d'exemple pour les visualisations de la communauté. Vous pouvez également utiliser la source de données de votre choix et ignorer les étapes suivantes.
Étape 2 : Connectez-vous à Looker Studio. En haut à gauche, cliquez sur + Créer, puis sélectionnez Rapport.
Étape 3 : L'éditeur de rapports s'affiche, avec le panneau Ajouter des données au rapport ouvert.
Étape 4 : Dans l'onglet Associer à des données, sélectionnez le connecteur Google Sheets par Google.
Étape 5 : Sélectionnez URL, puis collez l'URL de la feuille de calcul Google de l'étape 1.
Étape 6 : En bas à droite, cliquez sur Ajouter.
Étape 7 : Si vous êtes invité à confirmer Vous êtes sur le point d'ajouter des données à ce rapport,cliquez sur AJOUTER AU RAPPORT. Un rapport sans titre est créé et une table par défaut est ajoutée au rapport avec des exemples de données. Vous pouvez également sélectionner et supprimer le tableau par défaut pour obtenir un rapport vide.
Ajouter votre visualisation de la communauté au rapport
Étape 1 : Dans la barre d'outils, cliquez sur Composants et visualisations de la communauté 
.
Étape 2 : Cliquez sur + Découvrir d'autres visualisations pour ouvrir la galerie de la communauté.
Étape 3 : Cliquez sur Créer votre propre visualisation.
Étape 4 : Sous Tester et ajouter votre visualisation de la communauté, saisissez le chemin d'accès au fichier manifeste, puis cliquez sur Envoyer. Le chemin d'accès au fichier manifeste correspond au nom et au chemin d'accès du bucket Google Cloud Storage qui pointe vers l'emplacement du fichier manifeste de votre visualisation, avec le préfixe gs://.. Par exemple : gs://community-viz-docs/viz-codelab. Si vous avez saisi un chemin d'accès valide au fichier manifeste, une fiche de visualisation devrait s'afficher.
Étape 5 : Cliquez sur la fiche de visualisation pour l'ajouter à votre rapport.
Étape 6 : Si vous y êtes invité, donnez votre autorisation pour que la visualisation puisse s'afficher.
Étape 7 : Vous pouvez également modifier la dimension et la métrique sélectionnées pour le tableau. Si vous utilisez l'exemple d'ensemble de données fourni, définissez la dimension sur Pays et la métrique sur Population. Cela n'aura aucun effet sur la visualisation avant la fin de l'atelier de programmation.
Le panneau des propriétés situé sur la droite reflète les éléments configurés dans viz-codelab.json.
Dans le panneau Configurer, la visualisation permet d'afficher une dimension et une métrique.
Dans le panneau Style, la visualisation comporte un seul élément permettant de styliser l'en-tête du tableau. À ce stade, le contrôle du style n'aura aucun effet sur la visualisation tant que le code de visualisation n'aura pas été mis à jour lors d'une étape ultérieure. Remarque : Vous verrez d'autres options de style pour votre visualisation que celles que vous avez définies dans le fichier de configuration. C'est normal, car toutes les visualisations disposent d'un ensemble de commandes communes qui sont automatiquement disponibles.
12. Afficher les données sous forme de tableau
Dans cette section, vous allez mettre à jour votre visualisation pour afficher l'ensemble de données exemple de visualisation de la communauté sous forme de tableau.
Les données à afficher sont disponibles dans l'objet tables et sont structurées en fonction de la transformation spécifiée par votre visualisation. Dans cet atelier de programmation, la visualisation demandée était au format tableau (tableTransform), qui inclut un objet headers et un objet rows contenant toutes les données dont nous avons besoin pour afficher un tableau.
Étape 1 : Remplacez le contenu de viz-codelab-src.js par le code ci-dessous.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Étape 2 : Préparez le fichier du bundle JavaScript, puis importez et écrasez vos fichiers de visualisation dans Google Cloud Storage.
Étape 3 : Actualisez le rapport Looker Studio pour recharger et tester votre visualisation de la communauté. Le tableau affiche désormais les données (c'est-à-dire la feuille de calcul Google Sheets) et les colonnes d'en-tête en fonction de la dimension et de la métrique sélectionnées. Redimensionnez la visualisation pour afficher toutes les lignes.
13. Appliquer des modifications de style de manière dynamique
Dans cette section, vous allez mettre à jour la visualisation pour styliser l'en-tête du tableau en fonction de la couleur de remplissage sélectionnée dans le panneau Style.
L'état de tous les éléments de style est disponible dans l'objet style, où chaque clé d'élément est définie en fonction de la configuration du style de votre visualisation (viz-codelab.json). Pour cette section, vous obtiendrez la couleur de remplissage sélectionnée et l'utiliserez pour modifier la couleur d'arrière-plan de l'en-tête du tableau.
Étape 1 : Remplacez le code de votre fichier viz-codelab-src.js par le code ci-dessous.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Étape 2 : Préparez le fichier du bundle JavaScript, puis importez et écrasez vos fichiers de visualisation dans Google Cloud Storage.
Étape 3 : Actualisez le rapport Looker Studio pour recharger et tester votre visualisation de la communauté.
Étape 4 : Dans le panneau Style, utilisez le contrôle de style Couleur d'arrière-plan de l'en-tête pour modifier la couleur d'arrière-plan de l'en-tête du tableau.
Félicitations ! Vous avez créé une visualisation de la communauté dans Looker Studio. Nous arrivons à la fin de cet atelier de programmation. Découvrons maintenant les prochaines étapes que vous pouvez suivre.
14. Étapes suivantes
Élargir votre visualisation
- En savoir plus sur les données et les formats disponibles pour votre visualisation
- En savoir plus sur les éléments de style disponibles et ajouter des styles supplémentaires à votre visualisation
- Ajouter des interactions à votre visualisation
- Apprendre à développer une visualisation en local
Faites-en plus avec les visualisations de la communauté
- Consultez les références de la bibliothèque d'assistance dscc, du manifeste et du fichier de configuration.
- Envoyez votre visualisation à notre galerie de visualisations de la communauté.
- Créez un connecteur de communauté pour Looker Studio.
Ressources supplémentaires
Vous trouverez ci-dessous diverses ressources pouvant vous aider à explorer plus en détail les aspects abordés dans cet atelier de programmation.
Type de ressource | Fonctionnalités utilisateur | Fonctionnalités pour les développeurs |
Documentation | ||
Actualités et nouveautés | Inscrivez-vous dans Looker Studio > Paramètres utilisateur. | |
Poser des questions | ||
Exemples |