> For the complete documentation index, see [llms.txt](https://navixy.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://navixy.com/docs/analytics/id/explorer-for-iotquery/custom-analysis-sql-configurator/creating-custom-visualizations.md).

# Membuat visualisasi kustom

Buat grafik interaktif dari hasil kueri SQL menggunakan konfigurasi seret dan lepas. Tambahkan filter, ganti jenis grafik, dan susun panel berdampingan

Ubah hasil kueri SQL menjadi grafik interaktif melalui operasi seret dan lepas. Antarmuka visualisasi mengubah data mentah menjadi wawasan visual tanpa memerlukan pengodean.

## Mengakses antarmuka visualisasi

Setelah menjalankan kueri SQL, dua tab muncul di atas hasil Anda:

| **Tab**         | **Tujuan**                            |
| --------------- | ------------------------------------- |
| **Data**        | Tinjau hasil kueri dalam format tabel |
| **Visualisasi** | Buat grafik interaktif                |

Klik **Visualisasi** untuk mengakses pembuat grafik segera setelah kueri dijalankan.

## Ikhtisar antarmuka

<figure><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-5b324fb5f104043d6e90b5ce4e2eb7d1008b2737%2Fimage-20250819-101042.png?alt=media" alt="Query execution results showing Data and Visualization tabs with transition to chart builder"><figcaption></figcaption></figure>

Ruang kerja visualisasi terdiri atas tiga area yang terkoordinasi:

**Daftar bidang** (panel kiri):

* **Dimensi** - data kategoris dengan ikon bergaya dokumen
* **Ukuran** - data numerik dengan ikon tanda pagar
* **Waktu** - bidang temporal untuk analisis tren

**Rak konfigurasi** (tengah):

* **Sumbu X/Sumbu Y** - struktur grafik utama
* **Baris/Kolom** - perbandingan multi-panel
* **Filter** - pemilahan subdata
* **Warna/Ukuran/Opasitas** - pengodean visual

**Kanvas** (kanan):

* Tampilan grafik waktu nyata dengan pembaruan langsung
* Kemampuan zoom interaktif, geser, dan eksplorasi

## Kontrol penting

![](https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-0cb320c900f3f8a3d2eb023fef91d244da088372%2Fimage-20250819-101740.png?alt=media)

Perluas bagian di bawah ini untuk melihat tombol toolbar utama yang mempercepat pembuatan grafik.

<details>

<summary>Lihat deskripsi kontrol utama</summary>

| **Kontrol**                                                                                                                                                                                                                                                                                                                        | **Fungsi**                                                              | **Penggunaan**                                                                                       |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| <p><strong>Agregasi</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-db06e13e449a1bd9145f5b94146dd23792b8d810%2Fimage-20250819-095023.png?alt=media" alt="image-20250819-095023.png"></p>                                | Tampilan data mentah vs. agregat                                        | Matikan untuk melihat catatan individual; biarkan aktif untuk melihat total/rata-rata                |
| <p><strong>Jenis penanda</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-70a2afec31d1c5880a2f0aa71852404d847f660f%2Fimage-20250819-095030.png?alt=media" alt="image-20250819-095030.png"></p>                           | Pemilihan jenis grafik (Batang, Garis, dll.)                            | Beralih antara grafik batang, grafik garis, dan diagram pencar sesuai kebutuhan analisis Anda        |
| <p><strong>Mode tumpuk</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-82966d224213a82e7db649cf3260761c3364fafd%2Fimage-20250819-095135.png?alt=media" alt="image-20250819-095135.png"></p>                             | Buat grafik tumpuk atau normalkan grafik                                | Tumpuk batang untuk menampilkan total; normalkan untuk membandingkan persentase antar kategori       |
| <p><strong>Tukar sumbu</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-b3c64e5f52578991a6215146a9230d44013f53f4%2Fimage-20250819-095215.png?alt=media" alt="image-20250819-095215.png"></p>                             | Tukar sumbu X dan sumbu Y pada grafik                                   | Balik orientasi grafik saat kategori sulit dibaca atau dibandingkan                                  |
| <p><strong>Urutan</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-49b13a0e47379ed8926ea67ea7f38b38f7c2fa58%2Fimage-20250819-095235.png?alt=media" alt="image-20250819-095235.png"></p>                                  | Urutkan dalam urutan naik atau turun                                    | Susun data dari nilai tertinggi ke terendah (atau sebaliknya) untuk mengidentifikasi kinerja terbaik |
| <p><strong>Pengubahan ukuran sumbu</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-bbf5ed9b32f0e3acf7aeae48b974bbc72bc07d69%2Fimage-20250819-095259.png?alt=media" alt="image-20250819-095259.png"></p>                 | Ubah ukuran sumbu                                                       | Perbesar rentang nilai tertentu untuk memeriksa data secara lebih rinci                              |
| <p><strong>Mode tata letak</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-fe5a59221385122f318587bfd28d3e4513a5acf3%2Fimage-20250819-095318.png?alt=media" alt="image-20250819-095318.png"></p>                         | Ubah ukuran grafik atau gunakan grafik berukuran otomatis               | Beralih ke ukuran manual saat Anda memerlukan grafik yang lebih besar untuk presentasi               |
| <p><strong>Mode eksplorasi</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-bebc23f6350a62a089831171a9cc86f773d95d4d%2Fimage-20250819-095349.png?alt=media" alt="image-20250819-095349.png"></p>                         | Jelajahi data. Anda dapat memilih mode titik atau mode kuas             | Pilih titik data individual atau seret untuk memilih beberapa titik guna analisis mendetail          |
| <p><strong>Ekspor</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-f78b79c6d516e2312d37e86c4fed2e0e26d2734e%2Fimage-20250819-095401.png?alt=media" alt="image-20250819-095401.png"></p>                                  | Simpan visualisasi (PNG atau SVG)                                       | Unduh gambar grafik untuk laporan, presentasi, atau dokumentasi                                      |
| <p><strong>Ekspor sebagai CSV</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-cc11118cda791d081a4b367ffb3bdaf57c6d7520%2Fimage-20250819-095721.png?alt=media" alt="image-20250819-095721.png" data-size="original"></p> | Ekspor data yang divisualisasikan dalam format CSV                      | Unduh data dasar untuk dianalisis di Excel atau program spreadsheet lainnya                          |
| <p><strong>Ekspor kode</strong><br><br><img src="https://1696125515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoFNFEIINiGFbhi3Px3dE%2Fuploads%2Fgit-blob-23cb8613aaca86075f15f2f3c23f8ee2ce39f14a%2Fimage-20250819-095828.png?alt=media" alt="image-20250819-095828.png" data-size="original"></p>        | Ekspor visualisasi sebagai kode dalam Python atau JSON (Graphic Walker) | Dapatkan kode untuk membuat ulang grafik yang sama persis ini dalam skrip Python Anda                |

</details>

## Membangun visualisasi: alur kerja contoh

**Skenario contoh**: Menganalisis data operasional dengan field seperti `category_field`, `performance_metric`, `stempel waktu`, `region`.

{% stepper %}
{% step %}
**Buat grafik dasar**

* Seret bidang kategoris (misalnya, `category_field`) → **Sumbu X**
* Seret bidang numerik (misalnya, `performance_metric`) → **Sumbu Y**
* Antarmuka secara otomatis membuat grafik batang agregat
  {% endstep %}

{% step %}
**Perhalus jenis visualisasi**

Klik **Jenis penanda** Tombol untuk alternatif:

* **Grafik batang**: perbandingan kategori
* **Grafik garis**: analisis tren dari waktu ke waktu
* **Diagram pencar**: analisis korelasi (matikan agregasi)
  {% endstep %}

{% step %}
**Tambahkan kedalaman analitis**

* Seret bidang kategoris tambahan → **Warna** rak = diferensiasi visual
* Seret bidang numerik → **Ukuran** rak = representasi proporsional
* Beberapa dimensi mengungkap hubungan tersembunyi
  {% endstep %}
  {% endstepper %}

\[TANGKAPAN LAYAR: Pembangunan grafik bertahap yang menunjukkan grafik batang dasar berkembang menjadi analisis multidimensi]

## Teknik lanjutan

### Analisis multi-panel

Buat tampilan perbandingan menggunakan **Baris/Kolom** rak:

* Seret bidang kategoris → **Baris** = panel terpisah untuk setiap kategori
* Skala yang konsisten memungkinkan perbandingan lintas panel secara langsung
* Mengungkap pola yang tersembunyi dalam tampilan agregat

### Penyaringan dan fokus

Gunakan **Filter** rak untuk analisis terarah:

* Seret bidang kategoris untuk pemilihan subset
* Seret bidang numerik untuk pemfilteran berbasis rentang
* Beberapa filter digabungkan untuk eksplorasi data yang presisi

### Eksplorasi interaktif

* Pengubahan ukuran grafik secara manual menggunakan **Ubah ukuran** opsi tombol
* Kemampuan zoom dan geser untuk pemeriksaan mendetail
* Kemampuan ekspor untuk berbagi dan integrasi

{% hint style="info" %}
**Tip performa**: Terapkan filter sebelum visualisasi kompleks agar respons tetap terjaga dengan himpunan data besar.
{% endhint %}

## Mengevaluasi hasil Anda

Setelah membuat visualisasi kustom, nilai apakah pendekatan ini memenuhi kebutuhan analitis Anda:

**Kompleksitas visualisasi**: Dapatkah Anda membuat grafik dan wawasan yang diperlukan untuk keputusan operasional Anda?

**Kedalaman eksplorasi data**: Apakah kemampuan interaktif memberikan fleksibilitas analitis yang memadai?

**Berbagi dan integrasi**: Apakah opsi ekspor mendukung alur kerja pelaporan dan kolaborasi Anda?

**Performa dan skalabilitas**: Apakah antarmuka menangani volume data dan persyaratan kompleksitas Anda secara efektif?

## Langkah berikutnya

Berdasarkan pengalaman visualisasi kustom Anda, Anda mungkin memerlukan kemampuan yang lebih canggih. Untuk panduan komprehensif dalam memilih alat kecerdasan bisnis yang sesuai dengan kebutuhan spesifik dan kebutuhan organisasi Anda, lihat [Memilih alat BI](/docs/analytics/id/iot-query/connection-setup/selecting-bi-tools.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://navixy.com/docs/analytics/id/explorer-for-iotquery/custom-analysis-sql-configurator/creating-custom-visualizations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
