Google Data Studio permet aux utilisateurs de créer sans frais des tableaux de bord interactifs en temps réel avec de magnifiques visualisations de données. Les utilisateurs peuvent extraire leurs données de différentes sources et créer des rapports dans Data Studio, avec des fonctionnalités complètes de modification et de partage. Voici un exemple de tableau de bord Data Studio :
(Cliquez ici pour afficher cet exemple de rapport dans Data Studio)
Data 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 Data Studio. Les visualisations de la communauté sont créées par la communauté de développeurs Data Studio. Tout développeur peut en créer une. 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 apprendre à :
- Fonctionnement d'une visualisation de la communauté Google Data Studio
- Créer une visualisation de la communauté à l'aide de la bibliothèque d'assistance ds-component
- Intégrer votre visualisation de la communauté à un tableau de bord Data Studio
Prérequis
Pour effectuer 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
- Connaissance de JavaScript
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 Data Studio ?
Quelle est votre formation ?
Quelles bibliothèques de visualisation JavaScript vous intéressent ?
Passez à la page suivante pour envoyer les informations de l'enquête.
Les visualisations de la communauté Data Studio vous permettent de créer et d'utiliser des visualisations JavaScript personnalisées qui s'intègrent à vos tableaux de bord.
Dans cet atelier de programmation, vous allez créer une visualisation de la communauté sous forme de graphique à barres qui accepte une dimension, une métrique et un style de couleur de barre.
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 | Fournit des métadonnées sur la visualisation et l'emplacement des autres ressources. |
myViz.json | JSON | Fournit des options de configuration des données et du style pour le panneau "Propriété". |
myViz.js | JavaScript | Fournit le code JavaScript nécessaire à l'affichage de la visualisation. |
myViz.css (facultatif) | CSS | Fournit le style de 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 et leur emplacement soient spécifiés dans votre fichier manifeste.
Dans cette section, vous allez ajouter le code nécessaire pour gérer les données, les modifications de style et le rendu de la visualisation dans votre fichier JavaScript.
Écrire la source de la visualisation
Étape 1 : Téléchargez le fichier dscc.min.js depuis la bibliothèque de composants de communauté Data Studio 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 myVizSource.js dans votre répertoire de travail local.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Préparer le fichier JavaScript final
Étape 3 : Regroupez 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 myVizSource.js dans un nouveau fichier nommé myViz.js. Exécutez les commandes suivantes pour concaténer les fichiers. Répétez cette étape chaque fois que vous mettez à jour le code de votre visualisation.
Script de concaténation Linux/Mac OS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsScript Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsLe fichier CSS définit le style de votre visualisation. Copiez le code suivant et enregistrez-le sous le nom myViz.css..
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Le fichier JSON de configuration de la visualisation définit les attributs de données et de style pris en charge et requis par votre visualisation. La visualisation que vous allez créer dans cet atelier de programmation accepte une dimension et une métrique, et nécessite un élément de style pour sélectionner une couleur. En savoir plus sur les dimensions et les métriques
Copiez le code suivant et enregistrez-le sous myViz.json.. Pour en savoir plus sur les propriétés que vous pouvez configurer, consultez la documentation de référence sur la configuration.
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}Étape 1 : créer un projet Google Cloud Platform (GCP)
É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. 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/ . Data Studio appelle cela l'"ID de composant". Il sera utilisé pour identifier et déployer le composant.
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 créé à l'étape précédente (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/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- Importez les fichiers
manifest.json,myViz.js,myViz.jsonetmyViz.cssdans le 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 myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETÉtape 1 : Copiez l'URL de l'ensemble de données exemple de visualisation de la communauté.
Étape 2 : Accédez à Data Studio, puis cliquez sur Vide sous Démarrer un nouveau rapport.
Étape 3 : En bas à droite, cliquez sur CRÉER UNE SOURCE DE DONNÉES.
Étape 4 : Sélectionnez le connecteur Google Sheets.
Étape 5 : Dans le champ URL, saisissez l'URL de la feuille de calcul Google de l'étape 1 ci-dessus.
Étape 6 : En haut à droite de la page, cliquez sur ASSOCIER.
Étape 7 : Dans l'en-tête de la source de données, cliquez sur Accès aux visualisations de la communauté,sélectionnez ACTIVÉ, puis cliquez sur Enregistrer.
Étape 7 : Cliquez sur AJOUTER AU RAPPORT dans la boîte qui s'affiche pour ajouter la source de données à votre rapport.
Étape 6 : Dans la barre d'outils, cliquez sur le bouton de visualisation de la communauté 
. Un menu déroulant s'affiche.
Étape 7 : Collez le nom de votre bucket précédé de gs:// ( (par exemple, gs://community-viz-docs/myViz)) dans le champ de saisie de texte "Chemin d'accès au fichier manifeste", ajoutez barChart sous "ID du composant", puis cliquez sur "AJOUTER". 
Votre visualisation sera automatiquement dessinée sur le canevas. Le panneau des propriétés situé à droite doit refléter les éléments de votre fichier myViz.json.
La visualisation permet d'afficher une dimension et une métrique.
Un élément de style a été spécifié, ce qui a entraîné l'affichage d'un sélecteur de couleur de police intitulé "Couleur de la barre". À l'étape suivante, vous utiliserez ce sélecteur pour modifier la visualisation.
Dans cette section, vous allez utiliser l'élément de style du sélecteur de couleur pour mettre à jour votre visualisation.
Étape 1 : Remplacez le code de votre fichier myVizSource.js par le code ci-dessous.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Étape 2 : Créez le fichier JavaScript combiné, puis importez à nouveau vos fichiers de visualisation dans Google Cloud Storage.
Étape 3 : Actualisez le rapport Data Studio dans lequel vous avez testé votre visualisation de la communauté.
Vous devriez pouvoir modifier la couleur du rectangle à l'aide du sélecteur du menu de style.
Dans cette section, vous allez mettre à jour votre visualisation pour dessiner un graphique à barres à l'aide des données de l'exemple d'ensemble de données de visualisation de la communauté. Remarque : Data Studio renvoie un maximum de 2 500 lignes de données à la visualisation.
Étape 1 : Remplacez le code de votre fichier myVizSource.js par le code ci-dessous.
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Étape 2 : Créez le fichier JavaScript combiné, puis importez à nouveau vos fichiers de visualisation dans Google Cloud Storage.
Étape 3 : Actualisez le rapport Data Studio dans lequel vous avez testé votre visualisation de la communauté. Vous devriez obtenir un graphique à barres avec des libellés générés à partir des données de la feuille de calcul Google Sheets. Pour modifier la couleur des barres, changez la couleur sélectionnée dans le sélecteur Couleur des barres de la section"Style".
Dans cette section, vous allez mettre à jour votre visualisation pour dessiner un graphique à barres à l'aide des données de l'exemple d'ensemble de données de visualisation de la communauté.
Étape 1 : Remplacez le code de votre fichier myVizSource.js par le code ci-dessous.
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Étape 2 : Créez le fichier JavaScript combiné, puis importez à nouveau vos fichiers de visualisation dans Google Cloud Storage.
Étape 3 : Actualisez le rapport Data Studio dans lequel vous avez testé votre visualisation de la communauté. Vous devriez obtenir un graphique à barres avec un titre généré à partir des données et mis en forme à l'aide de votre fichier myViz.css.
Félicitations, vous avez créé une visualisation de la communauté dans Data Studio ! Nous arrivons à la fin de cet atelier de programmation. Découvrons maintenant les prochaines étapes que vous pouvez suivre.
Élargir votre visualisation
- Ajouter des interactions à votre visualisation
- Apprendre à développer une visualisation en local
- En savoir plus sur les éléments de style disponibles et ajouter des styles supplémentaires à votre visualisation
Faites-en plus avec les visualisations de la communauté
- Consultez les références pour la bibliothèque d'assistance dscc, le manifeste et le fichier de configuration.
- Envoyez votre visualisation à notre vitrine des visualisations de la communauté.
- Créez un connecteur de communauté pour Data 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 Data Studio > Paramètres utilisateur. | |
Poser des questions | ||
Vidéos | Bientôt disponible ! | |
Exemples |