Cara Bikin Grafik Interaktif dengan Excel dan HTML

Dalam menjalankan usaha, data angka sering kali menjadi dasar pengambilan keputusan. Namun, deretan angka dalam tabel tidak selalu mudah dipahami, terutama ketika pemilik usaha harus membandingkan pendapatan dari bulan ke bulan, mengevaluasi perkembangan tahunan, atau menyampaikan laporan kepada mitra bisnis.

Bagi pengelola perkebunan kelapa sawit skala kecil, misalnya, catatan keuangan dapat mencakup hasil penjualan tandan buah segar (TBS), biaya pupuk, upah tenaga kerja, biaya angkut, perawatan kebun, serta setoran atau penerimaan dana setiap bulan. Jika catatan itu hanya berbentuk tabel panjang, pola kenaikan dan penurunan mungkin tidak langsung terlihat.

Salah satu cara untuk menyajikan informasi tersebut adalah mengubah tabel menjadi grafik interaktif. Microsoft Excel dapat digunakan untuk mengolah data dan membuat grafik dengan cepat. Sementara itu, HTML, CSS, dan JavaScript memungkinkan kita menyusun dashboard yang tampilannya dapat disesuaikan dengan kebutuhan usaha.

Dalam tutorial ini, kita menggunakan contoh perusahaan fiktif bernama CV. Semoga Lancar Barokah – Kota Amarta, sebuah usaha perkebunan sawit skala kecil. Data contoh berupa pencatatan setoran bulanan selama 2022–2026. Nama perusahaan dan data ini digunakan sebagai ilustrasi pembuatan laporan, bukan sebagai laporan keuangan perusahaan nyata.

1. Apa yang Dimaksud dengan Grafik Interaktif?

Grafik interaktif adalah grafik yang memungkinkan pengguna berinteraksi dengan data, bukan hanya melihat gambar yang statis. Pengguna dapat memilih jenis grafik, mengarahkan kursor ke titik tertentu untuk melihat angka, membandingkan beberapa tahun, atau mengunduh data yang digunakan dalam visualisasi.

Misalnya, pemilik CV. Semoga Lancar Barokah ingin mengetahui apakah setoran pada bulan September 2026 lebih tinggi dibandingkan September tahun sebelumnya. Dalam tabel, ia harus membaca beberapa angka dan membandingkannya secara manual. Dengan grafik interaktif, perbedaan itu dapat terlihat lebih cepat.

2. Kenali Data yang Akan Diolah

Sebelum membuat grafik, kita harus memiliki tabel yang terstruktur. Data yang digunakan dalam contoh ini berisi pencatatan setoran bulanan dari Januari sampai Desember untuk tahun 2022, 2023, 2024, dan 2025. Tahun 2026 baru memiliki data Januari sampai September.

Dalam contoh perkebunan sawit, pencatatan seperti ini dapat menjadi latihan untuk membangun dashboard keuangan. Apabila angka yang digunakan sebenarnya merupakan pos keuangan tertentu, label tersebut harus dipertahankan sesuai arti aslinya. Jangan menganggap angka setoran otomatis merupakan omzet penjualan TBS atau laba bersih kebun.

Tabel Penerimaan CV. Semoga Lancar Barokah – Kota Amarta

Keterangan: tanda — berarti data belum tersedia. Total tahun 2026 merupakan total Januari–September, bukan total setahun penuh.

3. Cara Menyiapkan Data di Microsoft Excel

Langkah pertama adalah memasukkan data ke lembar kerja Excel. Pastikan nama bulan dan tahun tersusun konsisten, sedangkan nilai uang dimasukkan sebagai angka, bukan teks yang diawali tulisan “Rp”. Simbol rupiah dapat ditampilkan menggunakan format mata uang.

Langkah 1 — Buat judul kolom

Buka Excel, kemudian masukkan susunan kolom berikut pada baris pertama:

Masukkan bulan Januari sampai Desember pada kolom pertama. Selanjutnya, isi nilai setoran setiap tahun pada kolom yang sesuai. Untuk Oktober–Desember 2026, biarkan sel kosong jika memang datanya belum tersedia.

Langkah 2 — Pastikan angka dikenali sebagai angka

Blok kolom nilai setoran, lalu pilih format Number atau Currency. Jika ingin menampilkan rupiah, pilih format mata uang Rupiah (Rp) atau gunakan format kustom yang sesuai dengan pengaturan regional Excel.

Jangan memasukkan angka sebagai teks seperti “Rp 88.262.500” jika angka itu nantinya akan digunakan untuk perhitungan. Masukkan nilai numeriknya terlebih dahulu, kemudian atur format tampilannya.

Langkah 3 — Ubah data menjadi Excel Table

1. Blok seluruh rentang data, termasuk judul kolom.
2. Tekan Ctrl + T pada Windows.
3. Centang pilihan bahwa tabel memiliki header.
4. Berikan nama tabel, misalnya TabelSetoran, melalui menu Table Design.

Excel Table memudahkan penyaringan, pengurutan, dan pengembangan laporan ketika data baru ditambahkan. Untuk laporan usaha, cara ini lebih praktis daripada mengelola rentang sel secara terpisah.

4. Cara Membuat Grafik di Excel

Excel sudah menyediakan fitur grafik sehingga pengguna tidak harus menulis kode program. Grafik Excel cocok untuk laporan internal, rapat, dan analisis awal sebelum data diubah menjadi dashboard berbasis web.

Membuat grafik garis

1. Blok kolom Bulan beserta kolom tahun yang ingin dibandingkan.
2. Buka menu Insert.
3. Pilih Line Chart atau grafik garis.
4. Pastikan bulan berada pada sumbu horizontal dan nilai setoran pada sumbu vertikal.
5. Tambahkan judul, misalnya “Tren Setoran Bulanan CV. Semoga Lancar Barokah”.
6. Atur warna setiap tahun agar mudah dibedakan.

Grafik garis cocok untuk melihat perubahan dari Januari sampai Desember. Dengan beberapa garis sekaligus, pengelola dapat melihat bulan yang mengalami kenaikan atau penurunan dan membandingkan pola antar-tahun.

Membuat grafik batang

Grafik batang lebih sesuai jika tujuan analisis adalah membandingkan nilai antar-tahun atau melihat perbedaan total tahunan. Pilih data total setiap tahun, kemudian gunakan menu Insert dan pilih grafik Column atau Bar.

Perlu diingat, grafik total tahunan harus memberikan keterangan bahwa 2026 hanya mencakup sembilan bulan. Membandingkannya langsung dengan tahun penuh dapat menghasilkan kesimpulan yang menyesatkan.

5. Apa Perbedaan Grafik Excel dengan Grafik HTML?

Keduanya bukan teknologi yang saling menggantikan. Excel tetap berguna sebagai tempat menyimpan dan memeriksa data, sedangkan HTML dapat menjadi lapisan penyajian yang membuat laporan lebih mudah dibaca oleh pengguna.

6. Contoh Dashboard Grafik Interaktif

Berikut contoh dashboard untuk CV. Semoga Lancar Barokah – Kota Amarta. Cobalah memilih tampilan tren bulanan atau total tahunan. Pengguna juga dapat mengganti jenis grafik garis menjadi grafik batang dan mengarahkan kursor pada grafik untuk melihat angka yang lebih rinci.

Dashboard tersebut merupakan demonstrasi berbasis HTML, CSS, JavaScript, dan pustaka grafik Chart.js. Data pada contoh sudah dimasukkan ke dalam kode. Dengan demikian, grafik langsung terbentuk tanpa harus mengetik ulang angka pada setiap titik grafik secara manual.

7. Bagaimana HTML, CSS, dan JavaScript Bekerja?

HTML: menyusun struktur

HTML membentuk bagian-bagian dashboard, seperti judul, tombol, area grafik, dan tabel. Elemen canvas digunakan sebagai tempat menggambar grafik melalui JavaScript.

CSS: mengatur tampilan

CSS mengatur warna, ukuran huruf, jarak, garis tepi, latar putih, dan responsivitas. Dengan desain yang tepat, dashboard dapat menyesuaikan diri dengan layar komputer maupun ponsel.

Nama class pada contoh di atas menggunakan bentuk awalan yang sama, yaitu `BIKIN GRAFIK INTERAKTIF`, dengan tanda hubung sebagai pemisah kata.

JavaScript: membuat grafik menjadi interaktif

JavaScript mengolah data dan menghubungkan tombol dengan grafik. Pada dashboard contoh, JavaScript memilih data bulanan atau total tahunan, menentukan jenis grafik, dan mengatur ekspor CSV.

Chart.js membantu menggambar grafik dan menyediakan tooltip. Untuk memakainya, halaman harus dapat memuat pustaka tersebut. Jika pustaka tidak berhasil dimuat, area grafik mungkin kosong meskipun tabel HTML tetap dapat ditampilkan.

8. Mengubah Grafik Menjadi Laporan Keuangan Kebun Sawit

Setelah memahami dasar pembuatan grafik, pemilik usaha dapat mengembangkan dashboard yang lebih relevan untuk pengelolaan perkebunan sawit skala kecil. Data setoran bulanan pada contoh ini dapat dijadikan latihan awal, tetapi laporan usaha sebenarnya akan lebih bermanfaat apabila memuat data operasional dan keuangan yang sesuai.

Grafik produksi TBS

Catat produksi TBS dalam kilogram atau ton per bulan. Grafik garis dapat memperlihatkan pola produksi sepanjang tahun, membantu membandingkan periode panen, dan menjadi bahan evaluasi untuk pemeliharaan kebun. Produksi aktual perlu dicatat secara terpisah dari nilai penjualan.

Grafik pendapatan penjualan

Catat berat TBS yang terjual, harga per kilogram, potongan, dan penerimaan aktual. Jika terdapat perbedaan harga antar-periode, grafik pendapatan perlu dibaca bersama data volume penjualan agar kenaikan nilai penjualan tidak keliru dianggap sebagai kenaikan produktivitas.

Grafik biaya operasional

Kelompokkan biaya pupuk, herbisida, tenaga kerja, transportasi, perawatan jalan kebun, peralatan, dan biaya lain yang relevan. Grafik batang dapat membantu menunjukkan pos biaya yang paling besar dan perubahan biaya dari bulan ke bulan.

Grafik laba atau arus kas

Untuk mengetahui kinerja usaha, bedakan pendapatan, biaya, laba, dan arus kas. Laba merupakan hasil perhitungan pendapatan dikurangi biaya yang relevan, sedangkan arus kas mencatat uang yang benar-benar masuk dan keluar pada periode tertentu.

9. Cara Memasang Dashboard di Blogger

Dashboard HTML dapat ditampilkan di halaman web, tetapi pemasangannya perlu memperhatikan kebijakan dan kemampuan editor Blogger. Tidak semua tempat untuk memasukkan HTML memperlakukan JavaScript dengan cara yang sama.

1. Buka Blogger dan pilih blog yang ingin digunakan.
2. Buat halaman atau postingan baru.
3. Beralih ke tampilan HTML, bukan Compose, saat memasukkan markup.
4. Tempelkan kode yang telah disiapkan.
5. Simpan sebagai draf dan periksa pratinjau.
6. Publikasikan setelah memastikan tabel, tampilan, dan fungsi interaktif bekerja dengan benar.

Apabila Blogger menghapus tag script atau grafik tidak muncul, pisahkan kode dashboard ke halaman atau layanan yang mendukung JavaScript, lalu sematkan halaman tersebut jika layanan sumber mengizinkan embedding. Hindari mengandalkan iframe dari layanan yang melarang penyematan karena dapat menimbulkan pesan “refused to connect”.

Untuk artikel yang berisi tutorial sekaligus demo interaktif, pilihan yang paling aman adalah menguji kode pada lingkungan terpisah terlebih dahulu. Pastikan semua ID dan class unik agar tidak berbenturan dengan elemen lain pada template Blogger.

10. Mengunduh Data dan Memperbarui Laporan

Tombol Unduh CSV pada dashboard contoh menghasilkan file yang dapat dibuka menggunakan Excel atau aplikasi spreadsheet lainnya. Format CSV berguna untuk memindahkan data antar-aplikasi, tetapi bukan pengganti berkas Excel asli yang dapat menyimpan rumus, format, beberapa lembar kerja, dan grafik Excel.

Ketika memasukkan data baru, lakukan pemeriksaan berikut:

• Pastikan nilai setoran sesuai dengan catatan sumber.
• Periksa kembali total bulanan dan tahunan menggunakan rumus SUM di Excel.
• Pastikan sel kosong tidak otomatis diartikan sebagai setoran nol.
• Perbarui data pada sumber dashboard jika data tidak terhubung secara otomatis.
• Periksa apakah label, satuan, dan periode grafik masih benar.
• Simpan salinan data asli sebelum mengubah format atau melakukan perhitungan.

Dalam sistem yang lebih canggih, dashboard bisa dihubungkan ke Google Sheets, basis data, atau layanan API sehingga pembaruan data tidak harus dilakukan langsung di dalam kode. Namun, integrasi semacam itu membutuhkan pengaturan tambahan, pengamanan akses, dan pengujian yang lebih menyeluruh.

11. Membaca Hasil Contoh dengan Benar

Data contoh memperlihatkan total Rp743.541.410 pada 2022, Rp823.342.250 pada 2023, Rp829.071.500 pada 2024, dan Rp896.572.625 pada 2025. Total yang tercantum untuk Januari–September 2026 adalah Rp808.740.800.

Angka tersebut dapat digunakan untuk menguji tampilan grafik dan fungsi dashboard. Namun, perbandingan yang adil memerlukan periode yang sama. Untuk membandingkan 2026 dengan tahun sebelumnya, bandingkan Januari–September 2026 dengan Januari–September 2022, 2023, 2024, dan 2025. Jangan menyamakan sembilan bulan dengan dua belas bulan penuh.

Dashboard juga tidak menggantikan pemeriksaan data. Grafik dapat menampilkan angka dengan sangat menarik, tetapi jika sumbernya salah, kesimpulan yang dihasilkan tetap salah. Karena itu, validasi angka di Excel tetap menjadi bagian penting dari proses pelaporan.

FAQ: Pertanyaan tentang Grafik Interaktif Excel dan HTML

Penutup: Data yang Baik Membantu Keputusan yang Lebih Baik

Membuat grafik interaktif tidak harus dimulai dari sistem yang rumit. Langkah pertama cukup dengan menyusun data secara konsisten di Excel, memastikan angka benar, dan memilih bentuk grafik yang sesuai. Setelah itu, HTML, CSS, dan JavaScript dapat digunakan untuk membangun dashboard yang lebih fleksibel dan menarik.

Bagi usaha perkebunan sawit skala kecil, keterampilan ini dapat dikembangkan menjadi sistem pemantauan produksi, pendapatan, biaya operasional, dan arus kas. Pemilik usaha tidak hanya melihat angka, tetapi juga memperoleh cara yang lebih mudah untuk memahami perubahan dan menentukan hal-hal yang perlu diperiksa lebih lanjut.

Intinya, Excel membantu mengolah dan memvalidasi data, sedangkan HTML membantu menyajikannya secara interaktif. Jika keduanya digunakan dengan benar, laporan yang sebelumnya hanya berupa deretan angka dapat berubah menjadi sarana analisis yang lebih informatif, profesional, dan mudah dipahami.