Google Data Studio consente agli utenti di creare dashboard live e interattive con visualizzazioni di dati accattivanti, senza costi. Gli utenti possono recuperare i dati da varie origini e creare report in Data Studio, con funzionalità complete di modifica e condivisione. Ecco un esempio di dashboard di Data Studio:
(Fai clic qui per visualizzare questo report di esempio in Data Studio)
Data Studio fornisce diversi tipi di grafici integrati, tra cui grafici a linee, a barre, a torta e a dispersione. Le visualizzazioni della community ti consentono di creare e utilizzare le tue visualizzazioni JavaScript personalizzate in Data Studio. Le visualizzazioni della community sono create dalla community di sviluppatori di Data Studio e possono essere create da qualsiasi sviluppatore. Puoi anche condividere le visualizzazioni della community con altri utenti, in modo che possano utilizzarle con i propri dati.
Obiettivi didattici
In questo codelab imparerai a:
- Come funziona una visualizzazione della community di Google Data Studio
- Come creare una visualizzazione della community utilizzando la libreria helper ds-component
- Come integrare la visualizzazione della community in una dashboard di Data Studio
Che cosa ti serve
Per completare questo lab di codifica, ti serviranno:
- Accesso a internet e a un browser web
- Un Account Google
- Accesso a un bucket di archiviazione Google Cloud Platform
- Familiarità con JavaScript
Perché hai scelto questo codelab?
Come prevedi di utilizzare questo codelab/tutorial?
Come valuteresti la tua esperienza con Data Studio?
Quale opzione descrive meglio il tuo background?
Quali librerie di visualizzazione JavaScript ti interessano?
Passa alla pagina successiva per inviare le informazioni del sondaggio.
Le visualizzazioni della community di Data Studio ti consentono di creare e utilizzare visualizzazioni JavaScript personalizzate che si integrano nelle dashboard.
In questo codelab creerai una visualizzazione della community a barre che supporta una dimensione, una metrica e uno stile di colore delle barre.
Per creare una visualizzazione della community, devi disporre dei seguenti file in un bucket di archiviazione Google Cloud, che creerai in un passaggio successivo.
Nome file | Tipo di file | Finalità |
manifest.json* | JSON | Fornisce metadati sulla visualizzazione e sulla posizione delle altre risorse. |
myViz.json | JSON | Fornisce opzioni di configurazione di dati e stile per il riquadro Proprietà. |
myViz.js | JavaScript | Fornisce il codice JavaScript necessario per visualizzare la visualizzazione. |
myViz.css (facoltativo) | CSS | Fornisce lo stile per la visualizzazione. |
*Il manifest è l'unico file con un nome obbligatorio. Gli altri file possono avere un nome diverso, purché il nome/la posizione siano specificati nel file manifest.
In questa sezione aggiungerai al file JavaScript il codice necessario per gestire i dati, le modifiche allo stile e il rendering della visualizzazione.
Scrivi l'origine della visualizzazione
Passaggio 1: scarica il file dscc.min.js dalla libreria Data Studio Community Component e copialo nella directory di lavoro.
Passaggio 2: copia il seguente codice in un editor di testo e salvalo come myVizSource.js nella directory di lavoro locale.
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 });Prepara il file JavaScript finale
Passaggio 3: combina tutto il codice JavaScript richiesto in un unico file copiando i contenuti della libreria helper di visualizzazione (dscc.min.js) e del file myVizSource.js in un nuovo file denominato myViz.js. Esegui i seguenti comandi per concatenare i file. Ripeti questo passaggio ogni volta che aggiorni il codice di visualizzazione.
Script di concatenazione 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.jsIl file CSS definisce lo stile della visualizzazione. Copia il seguente codice e salvalo come myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Il file JSON di configurazione della visualizzazione definisce gli attributi di dati e stile supportati e richiesti dalla visualizzazione. Questa visualizzazione che creerai in questo codelab supporta una dimensione e una metrica e richiede un elemento di stile per selezionare un colore. Scopri di più su dimensioni e metriche.
Copia il seguente codice e salvalo come myViz.json.. Per saperne di più sulle proprietà che puoi configurare, consulta la documentazione di riferimento alla configurazione.
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"
}
]
}
]
}Passaggio 1: crea un progetto Google Cloud Platform (GCP)
Passaggio 2: crea un bucket GCP. La classe di archiviazione consigliata è Regional. Visita la pagina Prezzi di Cloud Storage per i dettagli sui livelli senza costi. È improbabile che l'archiviazione delle visualizzazioni comporti costi per la classe di archiviazione regionale.
Passaggio 3: prendi nota del nome/percorso del bucket, a partire dalla sezione dopo Buckets/ . Data Studio lo chiama "ID componente" e verrà utilizzato per l'identificazione e il deployment.
Il file manifest fornisce informazioni sulla posizione e sulle risorse della visualizzazione. Deve essere denominato "manifest.json" e deve trovarsi nel bucket creato nel passaggio precedente (lo stesso utilizzato per l'ID componente).
Copia il seguente codice in un editor di testo e salvalo come manifest.json.
Per saperne di più sul manifest, consulta la documentazione di riferimento al manifest.
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"
}
}]
}
- Carica i file
manifest.json,myViz.js,myViz.jsonemyViz.cssnel bucket Google Cloud Storage utilizzando l'interfaccia web o lo strumento a riga di comando gsutil. Ripeti questa operazione ogni volta che aggiorni la visualizzazione.
Comandi di caricamento gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETPassaggio 1: copia l'URL del set di dati di esempio della visualizzazione della community.
Passaggio 2: visita Data Studio e fai clic su Vuoto in Avvia un nuovo report.
Passaggio 3: in basso a destra, fai clic su CREA NUOVA ORIGINE DATI.
Passaggio 4: seleziona il connettore Fogli Google.
Passaggio 5: nel campo URL, inserisci l'URL del Foglio Google del passaggio 1.
Passaggio 6: in alto a destra nella pagina, fai clic su COLLEGA.
Passaggio 7: nell'intestazione dell'origine dati, fai clic su Accesso alle visualizzazioni della community, seleziona ON e fai clic su Salva.
Passaggio 7: fai clic su AGGIUNGI AL REPORT nella casella visualizzata per aggiungere l'origine dati al report.
Passaggio 6: nella barra degli strumenti, fai clic sul pulsante della visualizzazione della community 
. Si apre un menu a discesa.
Passaggio 7: incolla il nome del bucket con il prefisso gs:// (, ad esempio gs://community-viz-docs/myViz), nel campo di input di testo "Percorso manifest", aggiungi barChart in "ID componente" e fai clic su "AGGIUNGI". 
La visualizzazione verrà disegnata automaticamente sul canvas. Il riquadro delle proprietà sul lato destro dovrebbe riflettere gli elementi del file myViz.json.
La visualizzazione consente di utilizzare una dimensione e una metrica.
È stato specificato un elemento di stile, che esegue il rendering di un selettore di colore del carattere con l'etichetta "Colore barra". Nel passaggio successivo, utilizzerai questo selettore per modificare la visualizzazione.
In questa sezione, utilizzerai l'elemento di stile del selettore di colori per aggiornare la visualizzazione.
Passaggio 1: sostituisci il codice nel file myVizSource.js con il codice riportato di seguito.
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 });Passaggio 2: crea il file JavaScript combinato, quindi carica di nuovo i file di visualizzazione in Google Cloud Storage.
Passaggio 3: aggiorna il report di Data Studio in cui hai testato la visualizzazione della community.
Dovresti essere in grado di modificare il colore del rettangolo utilizzando il selettore nel menu Stile.
In questa sezione aggiornerai la visualizzazione per disegnare un grafico a barre utilizzando i dati del set di dati di esempio della visualizzazione della community. Nota: Data Studio restituisce un massimo di 2500 righe di dati alla visualizzazione.
Passaggio 1: sostituisci il codice nel file myVizSource.js con il codice riportato di seguito.
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 });Passaggio 2: crea il file JavaScript combinato, quindi carica di nuovo i file di visualizzazione in Google Cloud Storage.
Passaggio 3: aggiorna il report di Data Studio in cui hai testato la visualizzazione della community. Dovresti visualizzare un grafico a barre con etichette generate dai dati nel foglio Google. Per modificare il colore delle barre, cambia il colore selezionato nel selettore "Colore barra" dello stile.
In questa sezione aggiornerai la visualizzazione per disegnare un grafico a barre utilizzando i dati del set di dati di esempio della visualizzazione della community.
Passaggio 1: sostituisci il codice nel file myVizSource.js con il codice riportato di seguito.
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 });Passaggio 2: crea il file JavaScript combinato, quindi carica di nuovo i file di visualizzazione in Google Cloud Storage.
Passaggio 3: aggiorna il report di Data Studio in cui hai testato la visualizzazione della community. Dovresti visualizzare un grafico a barre con un titolo generato dai dati e formattato utilizzando il file myViz.css.
Congratulazioni, hai creato una visualizzazione della community in Data Studio. Siamo arrivati alla fine di questo codelab. Ora vediamo quali sono i passaggi successivi che puoi intraprendere.
Estendere la visualizzazione
- Aggiungere interazioni alla visualizzazione
- Scopri come sviluppare una visualizzazione in locale
- Scopri di più sugli elementi di stile disponibili e aggiungi uno stile aggiuntivo alla visualizzazione.
Fare di più con le visualizzazioni della community
- Esamina i riferimenti per la libreria helper dscc, il manifest e il file di configurazione.
- Invia la tua visualizzazione alla nostra vetrina delle visualizzazioni della community.
- Crea un connettore della community per Data Studio.
Risorse aggiuntive
Di seguito sono riportate varie risorse a cui puoi accedere per approfondire il materiale trattato in questo codelab.
Tipo di risorsa | Funzionalità utente | Funzionalità per sviluppatori |
Documentazione | ||
Notizie e aggiornamenti | Registrati in Data Studio > Impostazioni utente | |
Fare domande | ||
Video | Disponibile a breve! | |
Esempi |