Halaman ini diterjemahkan oleh Cloud Translation API.

Membuat Visualisasi JavaScript Kustom di Data Studio

Google Data Studio memungkinkan pengguna membuat dasbor interaktif yang aktif dengan visualisasi data yang menarik, secara gratis. Pengguna dapat mengambil data mereka dari berbagai sumber dan membuat laporan di Data Studio, dengan kemampuan pengeditan dan berbagi penuh. Berikut adalah contoh dasbor Data Studio:

(Klik di sini untuk melihat contoh laporan ini di Data Studio)

Data Studio menyediakan beberapa jenis diagram bawaan, termasuk diagram garis, diagram batang, diagram lingkaran, dan diagram sebar. Visualisasi komunitas memungkinkan Anda membuat dan menggunakan visualisasi JavaScript kustom Anda sendiri di Data Studio. Visualisasi komunitas dibuat oleh komunitas developer Data Studio - setiap developer dapat membuatnya. Anda juga dapat membagikan visualisasi komunitas Anda kepada orang lain sehingga mereka dapat menggunakannya dengan data mereka sendiri.

Yang akan Anda pelajari

Dalam lab kode ini, Anda akan mempelajari:

Cara kerja visualisasi komunitas Google Data Studio
Cara membuat visualisasi komunitas menggunakan library helper ds-component
Cara mengintegrasikan visualisasi komunitas ke dasbor Data Studio

Yang Anda butuhkan

Untuk menyelesaikan lab kode ini, Anda memerlukan:

Akses ke internet dan browser web
Akun Google
Akses ke bucket penyimpanan Google Cloud Platform
Berpengalaman dengan JavaScript

Mengapa Anda memilih codelab ini?

Saya tertarik dengan visualisasi data secara umum.

Saya ingin mempelajari Data Studio lebih lanjut

Saya ingin membuat Visualisasi Komunitas saya sendiri.

Saya mencoba mengintegrasikan Data Studio dengan platform lain.

Saya tertarik dengan solusi Google Cloud.

Bagaimana rencana Anda menggunakan codelab/tutorial ini?

Hanya membaca sekilas

Membacanya dan menyelesaikan latihan

Bagaimana penilaian Anda terhadap pengalaman Anda dengan Data Studio?

Tidak pernah mendengarnya

Saya tahu apa itu, tetapi saya tidak menggunakannya.

Saya sesekali menggunakannya.

Saya menggunakannya secara rutin.

Saya adalah pengguna ahli.

Apa yang paling tepat menggambarkan latar belakang Anda?

Developer

Designer / Pakar UX

Analis Bisnis / Data / Keuangan

Data Scientist / Data Engineer

Pakar Pemasaran / Media Sosial / Analisis Digital

Lainnya

Library visualisasi JavaScript apa yang Anda minati?

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

Lainnya

Lanjutkan ke halaman berikutnya untuk mengirimkan informasi survei.

Visualisasi komunitas Data Studio memungkinkan Anda membuat dan menggunakan visualisasi JavaScript kustom yang terintegrasi ke dalam dasbor Anda.

Dalam codelab ini, Anda akan membuat visualisasi komunitas diagram batang yang mendukung 1 dimensi, 1 metrik, dan gaya warna batang.

Untuk membuat visualisasi komunitas, Anda memerlukan file berikut di bucket penyimpanan Google Cloud Platform, yang akan Anda buat di langkah selanjutnya.

Nama file	Jenis file	Tujuan
manifest.json*	JSON	Menyediakan metadata tentang visualisasi dan lokasi resource lainnya.
myViz.json	JSON	Menyediakan opsi konfigurasi data dan gaya untuk panel Properti.
myViz.js	JavaScript	Menyediakan kode JavaScript yang diperlukan untuk menampilkan visualisasi.
myViz.css (opsional)	CSS	Menyediakan gaya untuk visualisasi.

*Manifes adalah satu-satunya file yang memiliki nama wajib. File lain dapat diberi nama berbeda, asalkan nama/lokasinya ditentukan dalam file manifes Anda.

Di bagian ini, Anda akan menambahkan kode yang diperlukan untuk menangani data, perubahan gaya, dan rendering visualisasi ke dalam file JavaScript.

Menulis sumber visualisasi

Langkah 1: Download file dscc.min.js dari Library Komponen Komunitas Data Studio dan salin ke direktori kerja Anda.

Langkah 2: Salin kode berikut ke editor teks dan simpan sebagai myVizSource.js di direktori kerja lokal Anda.

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 });

Menyiapkan file JavaScript akhir

Langkah 3: Gabungkan semua JavaScript yang diperlukan ke dalam satu file dengan menyalin konten library helper visualisasi (dscc.min.js) dan file myVizSource.js Anda ke dalam file baru bernama myViz.js. Jalankan perintah berikut untuk menggabungkan file. Ulangi langkah ini setiap kali Anda memperbarui kode visualisasi.

Skrip penggabungan Linux/Mac OS

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

Skrip Windows

del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js

File CSS menentukan gaya untuk visualisasi Anda. Salin kode berikut dan simpan sebagai myViz.css.

myViz.css

#myVizTitle {
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

File json konfigurasi visualisasi menentukan atribut data dan gaya yang didukung dan diperlukan oleh visualisasi Anda. Visualisasi yang akan Anda buat dalam codelab ini mendukung satu dimensi dan satu metrik, serta memerlukan satu elemen gaya untuk memilih warna. Pelajari dimensi dan metrik lebih lanjut.

Salin kode berikut dan simpan sebagai myViz.json.Untuk mempelajari lebih lanjut properti yang dapat Anda konfigurasi, buka dokumentasi referensi konfigurasi.

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"
        }
      ]
    }
  ]
}

Langkah 1: Buat Project Google Cloud Platform (GCP)

Langkah 2: Buat bucket GCP. Kelas penyimpanan yang direkomendasikan adalah Regional. Buka Harga Cloud Storage untuk mengetahui detail tentang paket gratis. Penyimpanan visualisasi Anda kemungkinan tidak akan dikenai biaya apa pun untuk kelas penyimpanan Regional.

Langkah 3: Catat nama/jalur bucket Anda, dimulai dengan bagian setelah Buckets/ . Data Studio menyebutnya "ID komponen", dan ID ini akan digunakan untuk mengidentifikasi dan men-deploy.

File manifes memberikan informasi tentang lokasi dan resource visualisasi Anda. File tersebut harus diberi nama "manifest.json", dan harus berada di bucket yang dibuat pada langkah sebelumnya (bucket yang sama yang digunakan untuk ID komponen Anda).

Salin kode berikut ke editor teks dan simpan sebagai manifest.json.

Untuk mempelajari lebih lanjut manifes, buka dokumentasi referensi manifes.

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"
    }
  }]
}

Upload file manifest.json, myViz.js, myViz.json, dan myViz.css ke bucket Google Cloud Storage menggunakan antarmuka web atau alat command line gsutil. Ulangi langkah ini setiap kali Anda memperbarui visualisasi.

Perintah upload 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_BUCKET

Langkah 1: Salin URL untuk set data contoh Visualisasi Komunitas.

Langkah 2: Buka Data Studio dan klik Kosong di bagian Mulai laporan baru.

Langkah 3: Di kanan bawah, klik BUAT SUMBER DATA BARU.

Langkah 4: Pilih konektor Google Spreadsheet.

Langkah 5: Di kolom URL, masukkan URL Spreadsheet Google dari langkah 1 di atas.

Langkah 6: Di kanan atas halaman, klik HUBUNGKAN

Langkah 7: Di header sumber data, klik Akses visualisasi komunitas, pilih AKTIF, lalu klik Simpan.

Langkah 7: Klik TAMBAHKAN KE LAPORAN di kotak yang muncul untuk menambahkan Sumber Data ke laporan Anda.

Langkah 6: Di toolbar, klik tombol visualisasi komunitas . Tindakan ini akan membuka drop-down.

Langkah 7: Tempelkan nama bucket Anda yang diawali dengan gs:// (, misalnya: gs://community-viz-docs/myViz) ke input teks untuk "Jalur Manifes", tambahkan barChart di bagian "ID Komponen", lalu klik "TAMBAHKAN".

Visualisasi Anda akan otomatis digambar di kanvas. Panel properti di sisi kanan harus mencerminkan elemen dalam file myViz.json Anda.

Visualisasi memungkinkan satu Dimensi dan satu Metrik.

Satu Elemen Gaya ditentukan - merender pemilih Warna Font berlabel "Warna Batang". Pada langkah berikutnya, Anda akan menggunakan pemilih ini untuk memengaruhi visualisasi.

Di bagian ini, Anda akan menggunakan elemen gaya pemilih warna untuk memperbarui visualisasi.

Langkah 1: Ganti kode dalam file myVizSource.js dengan kode di bawah.

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 });

Langkah 2: Buat file JavaScript gabungan, lalu upload ulang file visualisasi Anda ke Google Cloud Storage.

Langkah 3: Muat ulang laporan Data Studio tempat Anda menguji visualisasi komunitas.

Anda akan dapat mengubah warna persegi panjang menggunakan pemilih di menu gaya.

Di bagian ini, Anda akan memperbarui visualisasi untuk membuat diagram batang menggunakan data dari set data contoh Visualisasi Komunitas. Catatan: Data Studio menampilkan maksimal 2.500 baris data ke visualisasi.

Langkah 1: Ganti kode dalam file myVizSource.js dengan kode di bawah.

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 });

Langkah 2: Buat file JavaScript gabungan, lalu upload ulang file visualisasi Anda ke Google Cloud Storage.

Langkah 3: Muat ulang laporan Data Studio tempat Anda menguji visualisasi komunitas. Anda akan memiliki diagram batang dengan label yang dibuat dari data di Spreadsheet Google. Untuk mengubah warna batang, ubah warna yang dipilih di pemilih Gaya "Warna Batang".

Di bagian ini, Anda akan memperbarui visualisasi untuk membuat diagram batang menggunakan data dari set data contoh Visualisasi Komunitas.

Langkah 1: Ganti kode dalam file myVizSource.js dengan kode di bawah.

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 });

Langkah 2: Buat file JavaScript gabungan, lalu upload ulang file visualisasi Anda ke Google Cloud Storage.

Langkah 3: Muat ulang laporan Data Studio tempat Anda menguji visualisasi komunitas. Anda akan melihat diagram batang dengan judul yang dibuat dari data dan diberi gaya menggunakan file myViz.css Anda.

Selamat - Anda telah membuat visualisasi komunitas di Data Studio. Langkah ini akan membawa Anda ke akhir codelab ini. Sekarang, mari kita lihat langkah selanjutnya yang dapat Anda lakukan.

Memperluas visualisasi

Menambahkan interaksi ke visualisasi
Mempelajari cara mengembangkan visualisasi secara lokal
Pelajari lebih lanjut elemen gaya yang tersedia dan tambahkan gaya tambahan ke visualisasi Anda.

Lakukan lebih banyak hal dengan visualisasi komunitas

Tinjau referensi untuk library helper dscc, manifes, dan file konfigurasi.
Kirimkan visualisasi Anda ke Showcase Visualisasi Komunitas kami.
Buat konektor komunitas untuk Data Studio.

Referensi lainnya

Berikut adalah berbagai referensi yang dapat Anda akses untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini.

Resource Type	Fitur Pengguna	Fitur Developer
Dokumentasi	Pusat Bantuan	Dokumentasi Developer
Berita & Info Terbaru	Daftar di Data Studio > Setelan Pengguna	Mailing List Developer
Ajukan Pertanyaan	Forum Pengguna	Stack Overflow [google-data-studio] Forum Developer Data Studio
Video	Data Studio di YouTube	Segera Hadir!
Contoh	Galeri Laporan	Open Source Repository

Membuat Visualisasi JavaScript Kustom di Data Studio Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Yang akan Anda pelajari

Yang Anda butuhkan

Mengapa Anda memilih codelab ini?

Bagaimana rencana Anda menggunakan codelab/tutorial ini?

Bagaimana penilaian Anda terhadap pengalaman Anda dengan Data Studio?

Apa yang paling tepat menggambarkan latar belakang Anda?

Library visualisasi JavaScript apa yang Anda minati?

Menulis sumber visualisasi

myVizSource.js

Menyiapkan file JavaScript akhir

Skrip penggabungan Linux/Mac OS

Skrip Windows

myViz.css

myViz.json

manifest.json

Perintah upload gsutil

myVizSource.js

myVizSource.js

myVizSource.js

Memperluas visualisasi

Lakukan lebih banyak hal dengan visualisasi komunitas

Referensi lainnya

Membuat Visualisasi JavaScript Kustom di Data Studio