1. Introduction
Looker Studio vous permet de créer sans frais des tableaux de bord interactifs en direct avec de superbes visualisations des données. Récupérez vos données à partir de différentes sources et créez un nombre illimité de rapports dans Looker Studio, avec des fonctionnalités complètes d'édition 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 les graphiques en courbes, les graphiques à barres, les graphiques à secteurs et les graphiques à 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 les visualisations de votre communauté avec d'autres personnes afin qu'elles puissent les utiliser avec leurs propres données.
Points abordés
Dans cet atelier de programmation, vous allez apprendre à:
- Fonctionnement d'une visualisation de la communauté Looker Studio
- Créer une visualisation de la communauté à l'aide de la bibliothèque d'aide ds-component (dscc)
- Utiliser la visualisation de votre communauté dans un rapport Looker Studio
Prérequis
Pour réaliser cet atelier de programmation, vous devez disposer des éléments suivants:
- Accès à Internet et à un navigateur Web.
- Un compte Google.
- Accès à un bucket de stockage Google Cloud Platform.
- Bonne connaissance de JavaScript.
2. Enquête rapide
Pourquoi avez-vous choisi cet atelier de programmation ?
<ph type="x-smartling-placeholder">Comment prévoyez-vous d'utiliser cet atelier de programmation/ce tutoriel ?
<ph type="x-smartling-placeholder">Comment évalueriez-vous votre expérience avec Looker Studio ?
<ph type="x-smartling-placeholder">Qu'est-ce qui décrit le mieux votre parcours ?
<ph type="x-smartling-placeholder">Quelles bibliothèques de visualisation JavaScript souhaitez-vous utiliser ?
<ph type="x-smartling-placeholder">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 la communauté sous forme de tableau compatible avec une dimension, une métrique et un style d'en-tête de tableau.
4. Workflow de développement de 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 ultérieurement:
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 des styles pour le panneau "Propriétés" |
viz-codelab.js | JavaScript | Code JavaScript pour le rendu de 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. Écrivez un message "Hello, world!" visualisation
Dans cette section, vous allez ajouter le code requis pour afficher un simple "Hello, world!" la visualisation.
Écrire la source JavaScript de la visualisation
Étape 1:Téléchargez le fichier dscc.min.js à partir de 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 du groupe JavaScript
Étape 3:Combinez tous les éléments JavaScript requis dans un seul fichier en copiant le contenu de la bibliothèque d'aide à la visualisation (dscc.min.js) et votre fichier viz-codelab-src.js dans un nouveau fichier nommé viz-codelab.js. Vous pouvez exécuter les commandes suivantes pour concaténer les fichiers. Répétez cette étape chaque fois que vous mettez à jour le code de la visualisation 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 code CSS de la visualisation
Le fichier CSS est facultatif et définit le style de votre visualisation. 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 pris en charge et requis par votre visualisation. Cette visualisation de cet atelier de programmation nécessite une dimension et une métrique, et comporte un élément de style pour sélectionner une couleur de remplissage. En savoir plus sur les dimensions et les métriques
Copiez le code suivant et enregistrez-le sous le nom 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 de la visualisation 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 un projet existant.
Étape 2 : Créez un bucket GCP. La classe de stockage recommandée est régionale. Pour en savoir plus sur les niveaux sans frais, consultez la page Tarifs de Cloud Storage. Remarque: Il est peu probable que le stockage de vos visualisations engendre des coûts pour la classe de stockage régional.
Étape 3:Notez le nom/le chemin d'accès de votre bucket, en commençant par la section située après Buckets/. Le chemin d'accès est appelé "ID du composant". dans Looker Studio, et 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 créé à l'étape précédente (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 associée.
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 d'importation gsutil
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'exemple d'ensemble de données de visualisation 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'ouvre, 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 by Google.
Étape 5:Sélectionnez URL et collez l'URL de la feuille de calcul Google Sheets de l'étape 1.
Étape 6:En bas à droite, cliquez sur Ajouter.
Étape 7: Si vous êtes invité à confirmer l'option Vous êtes sur le point d'ajouter des données à ce rapport,cliquez sur AJOUTER AU RAPPORT. Un rapport sans titre est créé, et un tableau par défaut contenant des exemples de données est ajouté au rapport. Si vous le souhaitez, vous pouvez sélectionner et supprimer le tableau par défaut pour récupérer un rapport vide.
Ajouter la visualisation de votre communauté au rapport
Étape 1:dans la barre d'outils, cliquez sur Composants et visualisations de la communauté 
.
Étape 2:Cliquez sur + Explorer plus 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 du bucket Google Cloud Storage et au chemin d'accès qui pointent vers l'emplacement du fichier manifeste de votre visualisation, précédé de gs://.. Par exemple: gs://community-viz-docs/viz-codelab. Si vous avez saisi un chemin d'accès au fichier manifeste valide, 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é, autorisez l'affichage de la visualisation.
Étape 7:Vous pouvez éventuellement mettre à jour la dimension et la métrique sélectionnées pour le tableau. Si vous utilisez l'ensemble d'échantillons 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é à droite reflète les éléments configurés dans viz-codelab.json.
Dans le panneau Configuration, la visualisation comprend une dimension et une métrique.
Sous le panneau Style, la visualisation comporte un seul élément pour appliquer un style à l'en-tête du tableau. À ce stade, la commande de style n'aura aucun effet sur la visualisation tant que le code de la visualisation n'aura pas été mis à jour ultérieurement. Remarque: Vous verrez pour votre visualisation des options de style supplémentaires que vous n'avez pas définies dans le fichier de configuration. C'est normal, car toutes les visualisations ont un ensemble de commandes communes qui sont automatiquement disponibles.
12. Afficher les données sous forme de table
Dans cette section, vous allez mettre à jour votre visualisation pour afficher l'ensemble de données d'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 a demandé le format de table (tableTransform), qui comprend un objet headers et un objet rows contenant toutes les données dont nous avons besoin pour afficher une table.
É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 de groupe JavaScript, puis importez et écrasez vos fichiers de visualisation dans Google Cloud Storage.
Étape 3:Actualisez le rapport Looker Studio pour actualiser 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 affiche 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 dynamiquement les modifications de style
Dans cette section, vous allez mettre à jour la visualisation pour appliquer un style à 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 de votre style de visualisation (viz-codelab.json). Pour cette section, vous obtiendrez la couleur de remplissage sélectionnée et vous l'utiliserez pour mettre à jour 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 de groupe JavaScript, puis importez et écrasez vos fichiers de visualisation dans Google Cloud Storage.
Étape 3:Actualisez le rapport Looker Studio pour actualiser et tester votre visualisation de la communauté.
Étape 4:dans le panneau Style, utilisez la commande 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 voici arrivés au terme de cet atelier de programmation. Voyons maintenant ce que vous pouvez faire.
14. Étapes suivantes
Étendre votre visualisation
- En savoir plus sur les données et formats disponibles pour votre visualisation.
- Découvrez les éléments de style disponibles et ajoutez un style supplémentaire à votre visualisation.
- Ajouter des interactions à votre visualisation
- Apprenez à développer une visualisation en local
Exploiter tout le potentiel des visualisations de la communauté
- Consultez les références de la bibliothèque d'aide dscc, du fichier manifeste et du fichier de configuration.
- Envoyez votre visualisation à notre galerie des visualisations de la communauté.
- Créez un connecteur de communauté pour Looker Studio.
Ressources supplémentaires
Vous trouverez ci-dessous différentes ressources qui vous aideront à approfondir les sujets abordés dans cet atelier de programmation.
Type de ressource | Fonctionnalités pour les utilisateurs | Fonctionnalités pour les développeurs |
Documentation | ||
Actualités et Actualités | S'inscrire dans Looker Studio > Paramètres utilisateur | |
Poser des questions | ||
Exemples |