Membuat diagram peluru dengan Editor Konfigurasi Diagram

Diagram peluru berguna untuk menampilkan performa terhadap target, atau progres terhadap sasaran.

Dengan Chart Config Editor, Anda dapat membuat diagram peluru dengan memulai dari diagram batang di Looker.

Misalnya, diagram peluru berikut membandingkan ukuran Jumlah Pelanggan Baru, yang diwakili oleh status progres biru, dengan nilai target 40, yang diwakili oleh garis vertikal biru. Diagram juga menunjukkan bucket progres antara 0 dan 20, antara 20 dan 40, serta antara 40 dan 80, yang masing-masing diwakili oleh warna abu-abu yang berbeda.

Prasyarat

Untuk mengakses Editor Konfigurasi Diagram, Anda harus memiliki izin can_override_vis_config.

Menulis cuplikan JSON

Untuk membuat diagram peluru, mulai dari cuplikan JSON berikut:

{
  chart: {
    type: 'bullet'
  },
  xAxis: {
    categories: ['New Customers']
  },
  yAxis: {
    plotBands: [{
      from: 0,
      to: 20,
      color: '#666666'
    }, {
      from: 20,
      to: 40,
      color: '#999999'
    }, {
      from: 40,
      to: 80,
      color: '#bbbbbb'
    }],
  },
  series: [{
    data: [{
      target: 40
    }]
  }],
}

Ubah nilai berikut agar sesuai dengan kasus penggunaan Anda:

  • Atribut xAxis.categories menimpa label sumbu X. Dalam contoh ini, label sumbu X harus berupa nama ukuran Pelanggan Baru.
  • Atribut yAxis.plotBands menentukan warna latar belakang diagram untuk nilai tertentu. Dalam contoh ini, warna latar belakang adalah abu-abu tua (#666666) antara 0 dan 20, abu-abu sedang (#999999) antara 20 dan 40, dan abu-abu muda (#bbbbbb) antara 40 dan 80.
  • Atribut series.data.target menentukan nilai target untuk diagram peluru, yang akan muncul sebagai garis vertikal. Dalam contoh ini, targetnya adalah 40.

Membuat diagram peluru

Untuk membuat diagram peluru, ikuti langkah-langkah berikut:

  1. Lihat diagram batang di Jelajah, atau edit diagram batang di Look atau dasbor.

    Untuk contoh ini, sebaiknya mulai dari diagram batang dengan satu dimensi dan satu ukuran, dengan batas satu baris. Diagram awal Anda mungkin terlihat seperti contoh ini:

    Contoh diagram batang dengan satu batang yang membentang di sumbu X.

  2. Buka menu Edit dalam visualisasi.

  3. Di tab Plot, klik tombol Edit Chart Config. Looker akan menampilkan dialog Edit Chart Config.

  4. Pilih bagian Chart Config (Override), lalu masukkan JSON HighCharts dari bagian Menulis cuplikan JSON di halaman ini.

  5. Agar Looker dapat memformat JSON Anda dengan benar, klik <> (Format code).

  6. Untuk menguji perubahan Anda, klik Pratinjau.

  7. Untuk menerapkan perubahan, klik Terapkan. Visualisasi akan ditampilkan menggunakan nilai JSON kustom.

Setelah menyesuaikan visualisasi, Anda dapat menyimpannya. Jika Anda melihat visualisasi di Jelajah, simpan Jelajah. Jika Anda mengedit Tampilan atau dasbor, klik Simpan.