Panduan ini mendemonstrasikan metode pembuatan kombinasi interaktif antara grafik batang bertumpuk (stacked bar chart) dan grafik batang radial (radial bar chart) di Power BI melalui penggunaan visual bawaan (built-in visuals). Visualisasi ini awalnya saya kembangkan sebagai desain statis di Excel dan PowerPoint untuk Onyx Data challenge, namun kemudian saya rekonstruksi di Power BI guna menambahkan interaktivitas dinamis.
Implementasi Kasus
Penggabungan dua grafik dalam satu visualisasi secara efisien menyajikan beragam wawasan kepada para pemangku kepentingan. Dalam studi kasus ini, grafik batang bertumpuk 100% (100% stacked bar chart) memaparkan kontribusi setiap lini bisnis terhadap pengeluaran kategori, sementara grafik batang radial (radial bar chart) menampilkan jumlah pengeluaran operasional aktual per kategori. Visualisasi ganda ini memfasilitasi pemahaman cepat bagi para pemangku kepentingan mengenai total pengeluaran per kategori serta proporsi kontribusi dari setiap lini bisnis. Informasi komprehensif ini memungkinkan pengambilan keputusan yang lebih baik terkait penyesuaian pengeluaran di seluruh kategori dan lini bisnis yang spesifik.
Keterbatasan
Menciptakan visualisasi kompleks di Power BI dapat menjadi tantangan ketika bekerja dengan visual bawaan. Meskipun saya mencapai hasil yang memuaskan dalam proyek ini, prosesnya memakan waktu, terutama saat membangun grafik batang radial (radial bar chart).
Karena Power BI tidak memiliki dukungan bawaan untuk grafik batang radial, kita harus membuatnya secara manual menggunakan grafik donat dan beberapa ukuran DAX untuk merepresentasikan setiap kategori. Untuk studi kasus ini, saya merancang batang radial 3/4 untuk mencegah tumpang tindih dengan batang bertumpuk (stacked bar chart). Untuk melihat nilai di semua kategori dalam batang radial, tooltip kustom diperlukan, karena tooltip bawaan hanya dapat menampilkan nilai dari satu kategori dalam satu waktu karena struktur grafik donat bertumpuk.
Salah satu keterbatasan dari grafik batang radial (stacked bar chart) yang dibuat secara manual adalah ketidakmampuan untuk mengurutkan kategori secara dinamis berdasarkan nilai. Kita terbatas pada pengurutan alfabet atau pengurutan manual berdasarkan total kategori keseluruhan. Meskipun saya memilih untuk mengurutkan berdasarkan total nilai dalam studi kasus ini, penting untuk dicatat bahwa peringkat kategori dapat berubah saat menggunakan pemotong (slicer), dan grafik batang radial tidak akan secara otomatis mencerminkan perubahan ini.
Mengenai Studi Kasus
Visualisasi ini memanfaatkan data dari tantangan Onyx Data Agustus 2024 mengenai keuangan bisnis. Anda dapat mereplikasikan analisis ini dengan mengunduh himpunan data.
Himpunan data tersebut menelaah data keuangan dari sebuah bisnis olahraga yang memiliki tiga lini bisnis berbeda. Data tersebut memecah baik pendapatan maupun pengeluaran ke dalam kelompok dan subkelompok yang semakin detail di berbagai kolom, sebagaimana diilustrasikan di bawah ini:
Dalam studi kasus ini, kita akan mengkonstruksi visualisasi gabungan yang mengintegrasikan grafik batang bertumpuk dan grafik batang radial guna menganalisis pengeluaran operasional. Grafik batang bertumpuk 100% akan memaparkan kontribusi lini bisnis terhadap setiap kategori pengeluaran, sedangkan grafik batang radial akan menampilkan total jumlah pengeluaran per kategori (sub-kelompok pengeluaran). Pendekatan dualistik ini menyajikan tinjauan komprehensif mengenai kontribusi relatif serta nilai absolut.
Langkah 1: Membuat Grafik Batang Bertumpuk 100%
Buat grafik batang bertumpuk 100% dengan memulai ukuran untuk menghitung total pengeluaran operasional. Kalikan nilai pengeluaran dengan -1 untuk mengubah nilai negatif menjadi positif agar visualisasi lebih mudah (lewati langkah ini jika dataset Anda sudah menampilkan pengeluaran sebagai nilai positif).
_Total Opex =
CALCULATE(
SUM(revenue_expense[Amount, $]),
revenue_expense[Revenue / Expense Group] = "Opex"
) * -1
Bangun grafik dengan menempatkan ukuran [Total Opex] pada sumbu x, kolom [Revenue/Expense subgroup] pada sumbu y, dan kolom [Business Line] di legenda. Format ukuran [Total Opex] untuk ditampilkan sebagai persentase dari total keseluruhan, yang akan menampilkan label data Anda sebagai persentase. Kemudian, sesuaikan warna untuk setiap lini bisnis agar sesuai dengan preferensi desain Anda. Untuk mengakomodasi grafik batang radial (radial bar chart) yang akan kita tambahkan nanti, posisikan label seri di sisi kiri batang. Tata letak ini menciptakan ruang untuk grafik radial di sisi kanan visualisasi.
Langkah 2.1: Membangun Versi Pertama Grafik Batang Radial
Dikarenakan Power BI tidak menyediakan dukungan bawaan untuk grafik batang radial (radial bar chart), kita akan melakukan konstruksi manual menggunakan grafik donat bertumpuk. Setiap grafik donat (donut chart) merepresentasikan sebuah kategori, dan jumlah kategori akan menentukan jumlah grafik donat yang diperlukan. Dalam contoh ini, kita akan memvisualisasikan enam kategori pengeluaran operasional (Payroll, Equipment, Marketing, Rent, R&D, and Other), yang memerlukan enam grafik donat.
Grafik batang radial awal ini akan menunjukkan pengeluaran operasional setiap kategori sebagai proporsi dari total pengeluaran operasional. Persentase ini bertindak seperti bilah kemajuan (progress chart) di dalam batang radial. Kita akan mengulangi proses ini untuk keenam kategori, membuat enam grafik donat yang, ketika digabungkan, membentuk grafik batang radial.
Untuk memulai, kita akan mendefinisikan ukuran. Grafik donat mengumpulkan nilai ketika sebuah ukuran ditambahkan. Hanya menempatkan ukuran [Total Opex] pada grafik akan menampilkannya sebagai 100% karena tidak ada ukuran lain yang ditambahkan.
Mari kita definisikan sebuah ukuran untuk menghitung pengeluaran operasional kategori “Payroll” dan tambahkan ukuran ini ke grafik lagi. Sekarang kita lihat bahwa kedua ukuran ini ditambahkan untuk membentuk grafik 100%
Payroll =
CALCULATE(
[Total Opex],
revenue_expense[Expense subgroup] = "Payroll"
)
Bangun grafik dengan menempatkan ukuran [Total Opex] pada sumbu x, kolom [Revenue/Expense subgroup] pada sumbu y, dan kolom [Business Line] di legenda. Format ukuran [Total Opex] untuk ditampilkan sebagai persentase dari total keseluruhan, yang akan menampilkan label data Anda sebagai persentase. Kemudian, sesuaikan warna untuk setiap lini bisnis agar sesuai dengan preferensi desain Anda. Untuk mengakomodasi grafik batang radial (radial bar chart) yang akan kita tambahkan nanti, posisikan label seri di sisi kiri batang. Tata letak ini menciptakan ruang untuk grafik radial di sisi kanan visualisasi.
Langkah 2.1: Membangun Versi Pertama Grafik Batang Radial
Dikarenakan Power BI tidak menyediakan dukungan bawaan untuk grafik batang radial (radial bar chart), kita akan melakukan konstruksi manual menggunakan grafik donat bertumpuk. Setiap grafik donat (donut chart) merepresentasikan sebuah kategori, dan jumlah kategori akan menentukan jumlah grafik donat yang diperlukan. Dalam contoh ini, kita akan memvisualisasikan enam kategori pengeluaran operasional (Payroll, Equipment, Marketing, Rent, R&D, and Other), yang memerlukan enam grafik donat.
Grafik batang radial awal ini akan menunjukkan pengeluaran operasional setiap kategori sebagai proporsi dari total pengeluaran operasional. Persentase ini bertindak seperti bilah kemajuan (progress chart) di dalam batang radial. Kita akan mengulangi proses ini untuk keenam kategori, membuat enam grafik donat yang, ketika digabungkan, membentuk grafik batang radial.
Untuk memulai, kita akan mendefinisikan ukuran. Grafik donat mengumpulkan nilai ketika sebuah ukuran ditambahkan. Hanya menempatkan ukuran [Total Opex] pada grafik akan menampilkannya sebagai 100% karena tidak ada ukuran lain yang ditambahkan.
Mari kita definisikan sebuah ukuran untuk menghitung pengeluaran operasional kategori “Payroll” dan tambahkan ukuran ini ke grafik lagi. Sekarang kita lihat bahwa kedua ukuran ini ditambahkan untuk membentuk grafik 100%
Grafik donat yang ditampilkan saat ini memvisualisasikan kombinasi antara [Total Opex] dan [Payroll], yang secara akumulatif berjumlah $7.394.800. Konsekuensinya, [Total Opex] mencakup sekitar 75,8% dari grafik, dan [Payroll] mencakup sekitar 24,2%, merefleksikan kontribusi masing-masing terhadap total keseluruhan. Namun, target yang ingin kita capai adalah merepresentasikan [Total Opex] sebagai grafik penuh, dengan [Payroll] sebagai porsi dari total tersebut.
Untuk merealisasikan hal ini, kita perlu menghitung selisih antara [Total Opex] dan [Payroll]. Selisih ini akan divisualisasikan sebagai bagian ‘tidak terpenuhi’ dari grafik donat, sementara [Payroll] akan merepresentasikan bagian ‘terpenuhi’, sehingga secara efektif menghasilkan visualisasi bilah progres.
Dikarenakan segmen grafik donat tidak memungkinkan tumpang tindih, kita harus melakukan pengurangan [Payroll] dari [Total Opex] untuk mencapai visualisasi tersebut. Hal ini mengimplikasikan bahwa grafik akan menampilkan proporsi, bukan nilai aktual. Keterbatasan ini akan kita atasi dengan penambahan tooltip kustom yang menampilkan nilai-nilai yang sebenarnya.
Payroll vs. Total Opex =
VAR _subgrouplvstotalopex = [_Total Opex] - [Payroll]
RETURN
IF(_subgrouplvstotalopex >= 0, _subgrouplvstotalopex, 0)
Rumus DAX ini menghitung sisa Total Pengeluaran Operasional (Opex) setelah dikurangi Gaji, memastikan hasilnya tidak pernah negatif.
Grafik donat secara akurat merepresentasikan proporsi dari kedua ukuran. Namun, kita menghadapi tantangan untuk menyesuaikan grafik batang bertumpuk di sampingnya. Ini membutuhkan pengurangan grafik donat menjadi tiga perempat lingkaran. Karena Power BI tidak menyediakan cara langsung untuk mengontrol busur donat, kita memerlukan solusi alternatif.
Kita mulai dengan mendefinisikan ukuran DAX untuk menghitung sepertiga dari total nilai:
Payroll_Dummy = ([Payroll] + [Payroll vs. Total Opex]) * (1/3)
Kalkulasi ini, ketika ditambahkan ke grafik donat, menempati tepat sepertiga lingkaran, seperti yang ditunjukkan di bawah. Tujuan kita adalah membuat grafik donat tiga perempat. Karena kita tidak dapat secara langsung menyembunyikan bagian sepertiga ini atau membuatnya transparan, kita mencapai efek yang diinginkan dengan mengatur warnanya agar sesuai dengan latar belakang.
Untuk memvisualisasikan kategori lain, kita cukup mengganti [Payroll] dengan kategori yang sesuai dan mengulangi prosesnya.
Langkah 2.2: Membangun Versi Kedua Grafik Batang Radial
Grafik batang radial kedua menggunakan pendekatan yang mirip dengan yang pertama, tetapi dengan ukuran dasar yang berbeda. Grafik ini memvisualisasikan pengeluaran operasional setiap kategori relatif terhadap kategori dengan pengeluaran tertinggi. Kategori dengan pengeluaran tertinggi direpresentasikan sebagai 100% dari grafik.
Meskipun “Payroll” saat ini memiliki pengeluaran operasional tertinggi, ini dapat berubah dengan interaksi pemotong (slicer). Oleh karena itu, ukuran tersebut harus secara dinamis mengidentifikasi kategori pengeluaran tertinggi untuk setiap pilihan dan menggunakannya sebagai titik referensi 100%.
Untuk mencapai ini, kita mendefinisikan ukuran yang memeriksa apakah setiap kategori mewakili pengeluaran operasional tertinggi. Jika suatu kategori adalah yang tertinggi, ukuran tersebut mengembalikan nol (tidak ada varians). Jika tidak, ukuran tersebut akan menghitung selisih antara pengeluaran tertinggi dan pengeluaran kategori tersebut. Selisih ini berfungsi sebagai bagian yang akan “dikurangi.” Ukuran DAX untuk kategori “Payroll” adalah:
Variance_Payroll & Highest Opex =
IF(
[_Highest Opex] = [Payroll],
0,
[_Highest Opex] - [Payroll]
)
Pertama, kita menghitung pengeluaran operasional tertinggi di semua kategori menggunakan ukuran DAX berikut:
_Highest Opex =
MAXX(
VALUES(revenue_expense[Expense subgroup]),
[_Total Opex]
)
Sebagaimana dapat diamati, grafik donat hanya memvisualisasikan Gaji. Hal ini disebabkan oleh ukuran [Variance_Payroll & Highest Opex] yang telah mengidentifikasi [Payroll] sebagai kategori dengan pengeluaran operasional maksimum. Mari kita telaah sebuah skenario dengan kategori yang berbeda.
Karena [Marketing] bukan kategori pengeluaran tertinggi ([Payroll] sebelumnya), varians dihitung. Varians ini adalah selisih antara pengeluaran tertinggi ([Payroll]) dan pengeluaran [Marketing]. Kita akan menerapkan pendekatan yang sama untuk kategori yang tersisa.
Kita mengurangi lingkaran menjadi tiga perempat dari ukuran penuhnya untuk memberi ruang bagi grafik batang bertumpuk 100%. Untuk melakukan ini, pertama-tama kita mendefinisikan ukuran yang menghitung, untuk setiap kategori, jumlah pengeluarannya dan variansnya dari pengeluaran operasional tertinggi (jika ada). Ukuran DAX untuk kategori “Payroll” adalah:
Payroll_Dummy_2 = ([Payroll] + [Variance_Payroll & Highest Opex]) * (1/3)
Dua opsi tersedia: menambahkan ukuran ini langsung ke visualisasi atau menggabungkannya dengan ukuran varians yang didefinisikan sebelumnya. Karena kita bermaksud membuat ukuran ini transparan secara visual dengan mencocokkan warnanya dengan latar belakang, menggabungkan kedua ukuran tersebut disarankan untuk menghindari tampilan pemisah antar seri.
Payroll_Helper = [Variance_Payroll & Highest Opex] + [Payroll_Dummy_2]
Karena kita ingin grafik batang radial di sebelah kiri dan grafik batang bertumpuk 100% di sebelah kanan, kita menyesuaikan rotasi setiap grafik batang radial sebesar 180 derajat searah jarum jam, dimulai dari bawah. Label seri dan legenda grafik batang bertumpuk ditempatkan di sebelah kanan.
Langkah 3: Menggabungkan Enam Grafik Donat Menjadi Grafik Batang Radial
Setelah membuat grafik donat untuk setiap kategori, fase selanjutnya melibatkan konstruksi grafik batang radial dengan mengintegrasikan elemen-elemen ini. Tantangan utamanya adalah mencocokkan dimensi batang radial secara tepat dengan batang bertumpuk untuk menciptakan tampilan yang mulus. Berikut adalah proses langkah demi langkahnya:
Pertama, sesuaikan dimensi setiap donat secara individual melalui panel Properti > Ukuran. Penting untuk mempertahankan rasio aspek persegi (1:1) untuk memfasilitasi penyesuaian di masa mendatang.
Selanjutnya, modifikasi jari-jari bagian dalam setiap grafik donat menggunakan panel Irisan > Spasi. Saat Anda bekerja ke dalam dengan grafik yang semakin kecil, kurangi spasi secara proporsional. Sesuaikan pengukuran ini agar sejajar dengan batang bertumpuk. Anda mungkin juga perlu menyesuaikan spasi antar kategori di grafik batang bertumpuk untuk memastikan lebar yang konsisten di kedua visualisasi.
Kemudian, rata tengahkan setiap grafik donat baik secara horizontal maupun vertikal untuk membuat formasi batang radial bertumpuk. Atur kategori dengan pengeluaran tertinggi di cincin luar dan pengeluaran terkecil ke arah tengah.
Terakhir, nonaktifkan fitur “Snap to Grid” untuk memungkinkan penempatan yang tepat saat menyelaraskan dengan grafik batang bertumpuk 100%.
Langkah 4: Merancang Tooltip Kustom
Langkah terakhir adalah membuat tooltip grafik batang radial untuk menampilkan semua nilai kategori. Tambahkan halaman laporan baru dan atur ukuran kanvasnya menjadi 240×240 piksel (ukuran tooltip default terlalu besar).
Bagi para profesional data yang ingin meningkatkan efisiensi dalam pengelolaan data, mengikuti Pelatihan Power BI akan memberikan wawasan yang lebih mendalam tentang bagaimana memaksimalkan potensi Gateway dan fitur-fitur lainnya di Power BI.