Menyesuaikan visualisasi menggunakan Editor Konfigurasi Diagram

Anda dapat menggunakan Chart Config Editor untuk menyesuaikan opsi pemformatan pada visualisasi Looker yang menggunakan HighCharts API. Hal ini mencakup sebagian besar diagram Cartesian, seperti diagram kolom, diagram batang, dan diagram garis.

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 Chart Config Editor, Anda harus memiliki izin can_override_vis_config.

Menyesuaikan visualisasi

Untuk menyesuaikan visualisasi dengan Chart Config Editor, ikuti langkah-langkah berikut:

  1. Lihat visualisasi di Eksplorasi, atau edit visualisasi di Look atau dasbor.
  2. Buka menu Edit di visualisasi.

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

    • Panel Chart Config (Source) berisi JSON asli visualisasi Anda dan tidak dapat diedit.

    • Panel Chart Config (Override) berisi JSON yang akan mengganti JSON sumber. Saat pertama kali membuka dialog Edit Chart Config, 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 Chart Config (Override) dan masukkan beberapa JSON HighCharts yang valid. Nilai baru akan mengganti nilai apa pun di bagian Chart Config (Source).

    • 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 code) agar Looker dapat memformat JSON Anda dengan benar.

  6. Klik Pratinjau untuk menguji perubahan Anda.

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

Setelah menyesuaikan visualisasi, Anda dapat menyimpannya. Jika Anda melihat visualisasi di Eksplorasi, simpan Eksplorasi. 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 Autofix code di bagian bawah panel Chart Config (Override).

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

  1. Klik tombol Edit Chart Config di tab Plot. Looker akan menampilkan dialog Edit Chart Config.
  2. Salin teks di panel Chart Config (Override).
  3. Klik tombol Clear Chart Overrides untuk menghapus semua perubahan.
  4. Klik Terapkan.
  5. Edit visualisasi Anda menggunakan opsi visualisasi default.
  6. Klik tombol Edit Chart Config di tab Plot. Looker akan menampilkan dialog Edit Chart Config.
  7. Masukkan beberapa JSON HighCharts yang valid di panel Chart Config (Override). Anda dapat menggunakan teks yang Anda salin pada 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

Chart Config Editor menerima sebagian besar JSON HighCharts yang valid. Chart Config Editor juga menerima atribut series formatters, yang hanya ada di Looker. Setiap seri dapat memiliki beberapa pemformat untuk menggabungkan aturan gaya yang berbeda.

Atribut series formatters menerima dua atribut: select dan style.

  • Masukkan ekspresi logis di 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 nilai potensial atribut select dan style secara lebih mendetail.

Atribut select

Anda dapat menggunakan nilai berikut dalam ekspresi select:

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

Untuk melihat penerapan ekspresi ini di Chart Config Editor, 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 seri menggunakan style.color, mewarnai batas seri menggunakan style.borderColor, dan menetapkan lebar batas seri 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 penerapan pemformatan warna di Chart Config Editor, lihat contoh Mewarnai nilai maksimum, minimum, dan persentil.

Metadata kolom

Menu drop-down Field metadata memungkinkan Anda menyalin nama seri untuk kolom apa pun dalam visualisasi. Anda dapat menggunakan nama seri ini dengan menggunakan atribut series formatters untuk membandingkan nilai dari seri yang berbeda. Lihat bagian Mewarnai seri dibandingkan dengan nilai seri lainnya untuk mengetahui contohnya.

Contoh

Bagian berikut memberikan contoh beberapa kasus penggunaan umum untuk Chart Config Editor. Untuk 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 seri 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 mengulang kode terlampir untuk setiap seri dalam diagram.
  • {series.name} adalah variabel yang menampilkan nama seri.
  • {y:.2f} adalah variabel yang menampilkan nilai sumbu y dari titik yang dipilih, yang dibulatkan ke dua tempat desimal.
    • {y} adalah variabel yang menampilkan nilai sumbu y dari titik yang dipilih.
    • {variable:.2f} membulatkan variable ke dua tempat desimal. Lihat dokumentasi pembuatan template Highcharts untuk mengetahui 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 Inspect Point Metadata di bagian atas dialog Edit Chart Config. Kemudian, arahkan kursor ke titik data yang ingin Anda beri anotasi. Looker akan 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. JSON 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 menu drop-down Field metadata. 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. JSON 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 data 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 terputus-putus

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

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

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

Mewarnai nilai maksimum, minimum, dan persentil

Lihat halaman Cookbook Mendapatkan hasil maksimal dari visualisasi Looker: Penyesuaian format bersyarat di diagram Cartesian untuk mengetahui contoh mendalam tentang cara mewarnai nilai maksimum, minimum, dan persentil visualisasi Cartesian.

Mewarnai seri dibandingkan dengan nilai seri lainnya

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

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 Median Sale Price dalam format VIEW_NAME.FIELD_NAME. Untuk menyalin nilai kolom ini secara langsung, klik menu drop-down Field metadata di dialog Edit Chart Config, lalu pilih nama kolom.

Membandingkan nilai seri 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 aritmetika atau median seri.

Misalnya, pertimbangkan visualisasi yang menampilkan laba pesanan untuk setiap bulan pada 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 seri 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 dapat menggunakannya kembali dalam visualisasi lain atau membagikannya sebagai titik awal bagi pengguna lain.

Menyimpan template

Saat mengedit JSON HighCharts di Chart Config Editor, Anda dapat menyimpan kode sebagai template dengan mengikuti langkah-langkah berikut:

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

Perhatikan hal-hal berikut saat Anda membuat template:

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

Menerapkan template

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

  • Menerapkan template akan menimpa kode apa pun yang telah Anda tulis di Chart Config Editor.
  • 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 Apply template.
  3. Klik Lanjutkan.

Looker akan menerapkan template, dan Anda dapat terus melakukan pengeditan di Chart Config Editor.

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 di dialog Saved Templates untuk kembali ke dialog Chart Config Editor.

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 Chart Config Editor untuk membuat jenis visualisasi yang tidak disertakan dalam jenis visualisasi default Looker. Artikel berikut memberikan contoh beberapa visualisasi yang dapat Anda desain dengan Chart Config Editor: