Menyesuaikan visualisasi menggunakan Editor Konfigurasi Diagram

Anda dapat menggunakan Editor Konfigurasi Diagram untuk menyesuaikan opsi pemformatan pada visualisasi Looker yang menggunakan HighCharts API. Ini mencakup sebagian besar diagram Kartesius, seperti diagram kolom, diagram batang, dan diagram garis, serta lainnya.

Jika fitur Gemini di Looker diaktifkan, Anda dapat menggunakan Asisten Visualisasi untuk membuat opsi pemformatan JSON dari perintah berbasis teks guna mempercepat penyesuaian visualisasi Looker.

Prasyarat

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

Menyesuaikan visualisasi

Untuk menyesuaikan visualisasi dengan Editor Konfigurasi Diagram, ikuti langkah-langkah berikut:

  1. Melihat visualisasi di Jelajah, atau mengedit visualisasi di Look atau dasbor.
  2. Buka menu Edit dalam visualisasi.

  3. Klik tombol Edit Konfigurasi Diagram di tab Plot. Looker akan menampilkan dialog Edit Chart Config.

    • Panel Konfigurasi Diagram (Sumber) berisi JSON asli visualisasi Anda dan tidak dapat diedit.

    • Panel Konfigurasi Diagram (Penggantian) berisi JSON yang harus menggantikan JSON sumber. Saat pertama kali membuka dialog Edit Konfigurasi Diagram, Looker akan mengisi panel dengan beberapa JSON default. Anda dapat memulai dengan JSON ini, atau menghapus JSON ini dan memasukkan JSON HighCharts yang valid.

  4. Pilih bagian Konfigurasi Diagram (Penggantian) dan masukkan beberapa JSON HighCharts yang valid. Nilai baru akan menggantikan nilai apa pun di bagian Konfigurasi Diagram (Sumber).

    • Lihat bagian Contoh untuk mengetahui contoh JSON HighCharts yang valid.
    • Looker menerima nilai JSON yang valid. Looker tidak menerima fungsi, tanggal, atau nilai yang tidak ditentukan.

  5. Klik <> (Format kode) agar Looker dapat memformat JSON Anda dengan benar.

  6. Klik Pratinjau untuk menguji perubahan Anda.

  7. Klik Terapkan untuk menerapkan perubahan. Visualisasi akan ditampilkan menggunakan nilai JSON kustom.

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

Jika Anda mencoba melihat pratinjau kode yang berisi JSON tidak valid, Looker akan menampilkan pesan error Invalid JSON detected. Anda dapat membersihkan JSON yang tidak valid dengan opsi Perbaiki kode otomatis di bagian bawah panel Konfigurasi Diagram (Ganti).

Jika Anda ingin mengedit opsi visualisasi default, hapus terlebih dahulu perubahan yang telah Anda buat di Editor Konfigurasi Diagram, lalu ganti nanti. Secara khusus, ikuti langkah-langkah berikut:

  1. Klik tombol Edit Konfigurasi Diagram di tab Plot. Looker akan menampilkan dialog Edit Chart Config.
  2. Salin teks di panel Konfigurasi Diagram (Penggantian).
  3. Klik tombol Hapus Penggantian Diagram untuk menghapus semua perubahan.
  4. Klik Terapkan.
  5. Edit visualisasi Anda menggunakan opsi visualisasi default.
  6. Klik tombol Edit Konfigurasi Diagram di tab Plot. Looker akan menampilkan dialog Edit Chart Config.
  7. Masukkan beberapa JSON HighCharts yang valid di panel Konfigurasi Diagram (Penggantian). Anda dapat menggunakan teks yang Anda salin di langkah 2 sebagai template, tetapi pastikan untuk menguji perubahan Anda menggunakan tombol Pratinjau untuk memastikan tidak ada konflik.
  8. Klik Terapkan.

Format bersyarat dengan series formatters

Editor Konfigurasi Diagram menerima sebagian besar JSON HighCharts yang valid. Atribut ini juga menerima atribut series formatters, yang hanya ada di Looker. Setiap deret dapat memiliki beberapa pemformat untuk menggabungkan aturan gaya yang berbeda.

Atribut series formatters menerima dua atribut: select dan style.

  • Masukkan ekspresi logika dalam atribut select untuk menunjukkan nilai data mana yang akan diformat.
  • Masukkan beberapa JSON ke dalam atribut style untuk menunjukkan cara memformat nilai data.

Misalnya, JSON berikut akan mewarnai setiap nilai data menjadi oranye jika lebih besar dari atau sama dengan 380:

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

Bagian berikut menjelaskan potensi nilai atribut select dan style secara lebih mendetail.

Atribut select

Anda dapat menggunakan nilai berikut dalam ekspresi select:

  • value: Variabel ini menampilkan nilai deret. Anda dapat menggunakan nilai ini dalam perbandingan, seperti dalam contoh berikut:
  • max: Gunakan select: max untuk menargetkan nilai deret yang memiliki nilai maksimum.
  • min: Gunakan select: min untuk menargetkan nilai deret yang memiliki nilai minimum.
  • percent_rank: Variabel ini menargetkan nilai deret dengan persentil yang ditentukan. Misalnya, Anda dapat menggunakan select: percent_rank >= 0.9 untuk menargetkan nilai deret dalam persentil kesembilan puluh.
  • name: Variabel ini menampilkan nilai dimensi deret. Misalnya, jika Anda memiliki diagram yang menampilkan pesanan yang Terjual, Dibatalkan, dan Dikembalikan, Anda dapat menggunakan select: name = Sold untuk menargetkan deret tempat nilai dimensinya adalah Terjual.
  • AND/OR Gunakan AND dan OR untuk menggabungkan beberapa ekspresi logis.

Untuk melihat ekspresi ini diterapkan di Editor Konfigurasi Diagram, lihat contoh Mewarnai nilai maksimum, minimum, dan persentil.

Atribut style

Atribut style dapat digunakan untuk menerapkan gaya yang didukung HighCharts. Misalnya, Anda dapat mewarnai nilai deret menggunakan style.color, mewarnai batas deret menggunakan style.borderColor, dan menyetel lebar batas deret menggunakan style.borderWidth. Untuk daftar opsi gaya yang lebih lengkap, lihat Opsi Highcharts untuk series.column.data.

Untuk visualisasi garis, gunakan style.marker.fillColor dan style.marker.lineColor, bukan style.color. Untuk daftar opsi gaya garis yang lebih lengkap, lihat opsi Highcharts untuk series.line.data.marker.

Untuk melihat pemformatan warna yang diterapkan di Editor Konfigurasi Diagram, lihat contoh Mewarnai nilai maksimum, minimum, dan persentil.

Metadata kolom

Drop-down Metadata kolom memungkinkan Anda menyalin nama deret untuk kolom apa pun dalam visualisasi. Anda dapat menggunakan nama deret ini dengan menggunakan atribut series formatters untuk membandingkan nilai dari deret yang berbeda. Lihat bagian Seri warna dibandingkan dengan nilai seri lainnya untuk melihat contohnya.

Contoh

Bagian berikut memberikan contoh beberapa kasus penggunaan umum untuk Editor Konfigurasi Diagram. Untuk mengetahui daftar lengkap atribut yang dapat Anda edit, lihat dokumentasi HighCharts API.

Mengubah warna latar belakang dan warna teks sumbu

Untuk mengubah warna latar belakang visualisasi, gunakan atribut chart.backgroundColor.

Demikian pula, untuk mengubah warna teks sumbu dalam visualisasi, gunakan atribut berikut:

JSON HighCharts berikut mengubah warna latar belakang visualisasi menjadi ungu, dan teks judul serta label sumbu menjadi putih.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Menyesuaikan warna tooltip

Untuk menyesuaikan warna tooltip, gunakan atribut berikut:

JSON HighCharts berikut mengubah warna latar belakang tooltip menjadi cyan, dan mengubah warna teks tooltip menjadi hitam.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Menyesuaikan konten dan gaya tooltip

Untuk menyesuaikan konten tooltip, gunakan atribut berikut:

JSON HighCharts berikut mengubah format tooltip sehingga nilai sumbu x muncul di bagian atas tooltip dengan font yang lebih besar, diikuti dengan daftar semua nilai deret pada titik tersebut.

Contoh ini menggunakan fungsi dan variabel HighCharts berikut:

  • {key} adalah variabel yang menampilkan nilai sumbu x dari titik yang dipilih. (dalam contoh ini, bulan dan tahun).
  • {#each points}{/each} adalah fungsi yang mengulangi kode terlampir untuk setiap deret dalam diagram.
  • {series.name} adalah variabel yang menampilkan nama deret.
  • {y:.2f} adalah variabel yang menampilkan nilai sumbu y dari titik yang dipilih, dibulatkan ke dua tempat desimal.
    • {y} adalah variabel yang menampilkan nilai sumbu y dari titik yang dipilih.
    • {variable:.2f} membulatkan variable menjadi dua angka desimal. Lihat dokumentasi pembuatan template Highcharts untuk contoh pemformatan nilai lainnya.
{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

Menambahkan anotasi dan teks diagram

Untuk menambahkan anotasi, gunakan atribut annotations. Untuk menambahkan teks ke diagram, gunakan atribut caption.

Untuk mendapatkan koordinat suatu titik, klik Periksa Metadata Titik di bagian atas dialog Edit Konfigurasi Diagram. Kemudian, tahan kursor di titik data yang ingin Anda beri anotasi. Looker menampilkan ID titik, yang dapat Anda gunakan dalam atribut annotations.labels.point.

JSON HighCharts berikut menambahkan dua anotasi ke diagram untuk menjelaskan penurunan item inventaris setelah jangka waktu tertentu. Tindakan ini juga menambahkan teks di bagian bawah diagram untuk menjelaskan anotasi secara lebih mendetail.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Menambahkan anotasi dinamis

Anda juga dapat menggunakan parameter annotationsSource dan annotationsTarget untuk menggunakan data dari kolom sebagai anotasi.

Untuk mendapatkan nama kolom, Anda dapat menggunakan drop-down Metadata kolom. Perhatikan bahwa kolom annotationsTarget harus berupa ukuran.

JSON HighCharts berikut menggunakan nilai dari kolom orders.annotations sebagai anotasi pada kolom orders.count:

{
  annotations: [{
    labels: [{
      annotationsSource: 'orders.annotations',
      annotationsTarget: 'orders.count'
    }]
  }]
}

Menambahkan rentang rujukan vertikal

Untuk menambahkan rentang rujukan vertikal, gunakan atribut xAxis.plotBands.

JSON HighCharts berikut menambahkan rentang rujukan vertikal antara 24 November 2022 dan 29 November 2022 untuk menunjukkan periode penjualan. Fungsi ini juga menambahkan teks di bagian bawah diagram untuk menjelaskan signifikansi rentang.

Perhatikan bahwa atribut to dan from dari xAxis.plotBands harus sesuai dengan nilai data dalam diagram. Dalam contoh ini, karena datanya berbasis waktu, atribut menerima nilai stempel waktu Unix (1669680000000 untuk 29 November 2022 dan 1669248000000 untuk 24 November 2022). Format tanggal berbasis string seperti MM/DD/YYYY dan DD-MM-YY tidak didukung dalam atribut HighCharts to dan from.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Menambahkan garis putus-putus dan garis putus-sambung

Untuk mengubah garis solid menjadi garis putus-putus atau garis putus-sambung, gunakan atribut series.dashStyle.

JSON HighCharts berikut mengubah atribut dashStyle dari deret Customers menjadi garis putus-putus, dan atribut dashStyle dari deret Sales menjadi garis putus-titik.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

Mewarnai nilai maksimum, minimum, dan persentil

Lihat halaman Cookbook untuk mendapatkan hasil maksimal dari visualisasi Looker: Penyesuaian format bersyarat dalam diagram Cartesius untuk contoh mendalam tentang mewarnai nilai maksimum, minimum, dan persentil dari visualisasi Cartesius.

Seri warna dibandingkan dengan nilai seri lainnya

Mulai Looker 25.0, parameter formatters.select memungkinkan Anda membandingkan nilai data saat ini dengan nilai dari deret lainnya.

Misalnya, pertimbangkan visualisasi yang menampilkan harga jual rata-rata dan harga jual median untuk beberapa kota. JSON HighCharts berikut mengubah warna harga jual rata-rata menjadi hijau jika lebih besar dari atau sama dengan harga jual median, dan menjadi merah marun jika tidak:

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select: 'value >= order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },
      {
        select: 'value < order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

Perhatikan bahwa baris select: 'value >= order_items.median_sale_price' mereferensikan kolom Harga Jual Median dalam format VIEW_NAME.FIELD_NAME. Untuk menyalin nilai kolom ini secara langsung, klik drop-down Metadata kolom dalam dialog Edit Konfigurasi Diagram, lalu pilih nama kolom.

Membandingkan nilai deret dengan nilai rata-rata atau median

Parameter formatters.select mendukung kata kunci mean di Looker 25.0+ dan kata kunci median di Looker 25.2+. Kata kunci ini memungkinkan Anda membandingkan nilai data saat ini dengan rata-rata aritmatika atau median deret.

Misalnya, pertimbangkan visualisasi yang menampilkan laba pesanan untuk setiap bulan tahun lalu. JSON HighCharts berikut mengubah warna setiap batang menjadi abu-abu (diwakili oleh kode hex #aaa) jika laba pesanan kurang dari laba pesanan rata-rata:

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select: 'value < mean',
      style: {
        color: '#aaa'
      }
    }]
  }]
}

Untuk membandingkan nilai deret dengan median, bukan dengan rata-rata, ubah baris select: 'value < mean' menjadi select: 'value < median'.

Menggunakan template untuk menyimpan dan membagikan konfigurasi

Anda dapat menyimpan konfigurasi sebagai template sehingga Anda dapat menggunakannya kembali dalam visualisasi lain atau membagikannya sebagai titik awal bagi pengguna lain.

Menyimpan template

Saat mengedit JSON HighCharts di editor Konfigurasi Diagram, Anda dapat menyimpan kode sebagai template dengan mengikuti langkah-langkah berikut:

  1. Di dialog Chart Config Editor, klik Save as template.
  2. Beri nama unik untuk template Anda.
  3. Masukkan deskripsi yang memberi tahu pengguna lain tentang fungsi template Anda.
  4. Edit dan pratinjau kode Anda sesuai kebutuhan.
  5. Klik Simpan untuk memvalidasi kode Anda.
  6. Perbaiki error validasi.
  7. Klik Simpan lagi untuk menyimpan template.

Perhatikan hal-hal berikut saat Anda membuat template:

  • Pengguna yang menyematkan tidak dapat membuat, mengedit, atau menerapkan template.
  • Semua pengguna non-sematan di instance Anda yang memiliki akses ke Editor Konfigurasi Diagram akan dapat melihat template Anda.
  • Tidak semua template berfungsi dengan baik untuk semua jenis visualisasi. Pertimbangkan untuk menentukan jenis visualisasi yang harus digunakan template Anda di kolom Deskripsi.

Terapkan template

Anda dapat menerapkan template ke visualisasi saat ini. Perhatikan hal-hal berikut saat Anda menerapkan template:

  • Menerapkan template akan menggantikan kode apa pun yang telah Anda tulis di Editor Konfigurasi Diagram.
  • Tidak semua template berfungsi dengan baik untuk semua jenis visualisasi. Misalnya, jika penulis template menulis kode untuk diagram batang, kode tersebut mungkin memiliki efek yang berbeda pada diagram garis.

Untuk menerapkan template, ikuti langkah-langkah berikut:

  1. Di dialog Chart Config Editor, klik Saved templates.
  2. Klik template, lalu klik Terapkan template.
  3. Klik Lanjutkan.

Looker akan menerapkan template, dan Anda dapat melanjutkan pengeditan di Editor Konfigurasi Diagram.

Menghapus template

Untuk menghapus template, ikuti langkah-langkah berikut:

  1. Di dialog Chart Config Editor, klik Saved templates.
  2. Klik menu tiga titik di samping template yang ingin Anda hapus.
  3. Klik Hapus.

Setelah selesai melakukan perubahan, klik tombol X dalam dialog Template Tersimpan untuk kembali ke dialog Editor Konfigurasi Diagram.

Mengedit template

Untuk mengedit template, ikuti langkah-langkah berikut:

  1. Di dialog Chart Config Editor, klik Saved templates.
  2. Klik menu tiga titik di samping template yang ingin Anda edit.
  3. Klik Edit.
  4. Setelah selesai melakukan perubahan, klik Simpan.

Membuat jenis visualisasi baru

Anda dapat menggunakan Editor Konfigurasi Diagram untuk membuat jenis visualisasi yang tidak disertakan dalam jenis visualisasi default Looker. Artikel berikut memberikan contoh beberapa visualisasi yang dapat Anda desain dengan Editor Konfigurasi Diagram: