Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. ChartJS
Webdesign

Membangun Dashboard Dinamis dengan ChartJS

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Hari ini kita akan membuat dashboard dinamis dengan grafik hidup, melalui kekuatan ChartJS. ChartJS adalah perpustakaan JavaScript bebas dependensi yang kuat, yang membangun grafik melalui elemen canvas. Yang terbaik, mudah bagi desainer untuk bersiap dan berjalan. Kita akan berfokus pada bagian-bagian perpustakaan yang membuat Anda bersiap dan berjalan dengan grafik yang indah dan fungsional dengan cepat. Kita akan membuat dashboard yang ramah seluler dari awal sampai akhir.

Mencari Solusi yang Cepat?

Jika Anda mencari solusi yang cepat, ada banyak skrip bagan dan grafik di Pasar Envato. Mulai dari beberapa dolar saja, cara cepat untuk mendapatkan fungsi ini di situs web atau aplikasi Anda. Inilah salah satu favorit kami - "Chartli" - untuk membuat grafik interaktif (terlihat cantik!)


Persiapan

Kita akan membangun dashboard kita di atas HTML5 Boilerplate. Unduh file zip, atau kloning repositori via Git. Kita akan memberi nama direktori proyek kita "chartjs_dashboard", dan letakkan semua file langsung di sana.

Selanjutnya, kita akan mengambil ChartJS. Buka versi uminified di raw.github.com/nnnick/Chart.js/master/Chart.js, dan salin isinya ke file js/plugins.js Anda. Memiliki versi yang unminified akan menjadikan kesalahan lebih mudah dibaca jika Anda mengalaminya.

Tip: dalam produksi, Anda akan menggunakan versi minified dari JavaScript, untuk membuat dashboard lebih berkinerja.

Struktur file Anda akan terlihat seperti ini:

Catatan: ini tidak termasuk beberapa file yang disertakan dalam H5BP yang tidak akan kita gunakan.


Palet Warna

Sebelum kita masuk ke dalam pengkodean situs, mari kita mulai dengan membuat palet warna yang akan kita gunakan di seluruh desain. Dengan melakukan ini, kita bisa membangun semacam "panduan gaya" masa depan; ini adalah praktik umum untuk setiap desain yang diberikan.

Jika Anda membangun dashboard dengan merek tertentu, mulailah dengan menggunakan warna-warna mereknya. Hari ini, kita akan mendefinisikan dua warna utama dan dua warna tambahan. Kita juga akan menggunakan versi warna gelap atau pudar dari warna-warna ini.

  • biru tua: #637b85
  • hijau: #2c9c69
  • kuning: #dbba34
  • merah: #c62f29

Kita juga akan menggunakan warna biru tua yang lebih terang, #d0dde3. Terakhir, kita akan memanfaatkan warna grayscale.


Dasar-dasar ChartJS

ChartJS menggunakan elemen canvas. Elemen canvas menyediakan antarmuka hanya JavaScript untuk menggambar piksel ke area persegi panjang tertentu. Hal ini sering dibandingkan dengan SVG, yang menawarkan solusi berbasis node DOM untuk membuat grafis vektor di browser. Namun, piksel yang ditarik ke elemen canvas tidak tersimpan dalam memori dan karenanya tidak merespons event JavaScript.

Tapi cukup dengan pembicaraan teknologi - bagaimana kita memulai dengan cepat dengan ChartJS?

Untungnya, halaman beranda ChartJS memiliki banyak contoh untuk memulai dengan cepat. Pola dasarnya adalah membuat elemen canvas di HTML, pilih dengan JavaScript, dan membuat Chart saat mengirimkan data tabel yang dibuat.

Contoh di atas akan mengasumsikan bahwa Anda telah mendefinisikan `data` dan` options` sebagai objek, dan akan menghasilkan grafik garis yang sesuai.

Dalam contoh kita, kita akan menggunakan grafik Doughnut, grafik Line, dan grafik Radar. Grafik ini akan mewakili metrik berorientasi bisnis yang berbeda, namun tentu saja Anda dapat mengambil ini dan menyesuaikannya dengan kebutuhan Anda.

Markup Halaman

Mari kita mulai dengan mendefinisikan beberapa HTML dasar untuk tata letak halaman kita.

Di sini, kita dapat melihat bahwa kita memiliki bagian header, tengah, dan footer dasar. Kita menggunakan kelas .wrapper dan kelas .push untuk membuat footer yang melekat (lihat di sini untuk info lebih lanjut). Kita akan membuat tata letak kita agar ramah mobile terlebih dahulu, dan untuk menskala keatas dari sana. Ada beberapa trik yang akan kita tarik di sepanjang jalan, tapi struktur ini akan banyak melakukan pekerjaan untuk kita.


Sebelum Kita Pergi Terlalu Jauh...

Perhatikan bahwa canvas tidak bermain dengan baik dengan kueri media. Untuk tutorial ini, kita akan membuat solusi yang memungkinkan grafik digambar ulang pada berbagai ukuran di JavaScript.

Di dalam file main.js kita, kita perlu memiliki fungsi pengukuran yang dipicu oleh perubahan ukuran jendela. Kita juga memerlukan fungsi "redraw" untuk dijalankan setelah fungsi resize dijalankan. Akhirnya, ketika kita menggambar ulang grafik, kita tidak ingin mereka beranimasi, seolah inilah saat pertama kali mereka digambar.

Jika ini nampaknya sedikit menakutkan, jangan khawatir! Ajukan pertanyaan di komentar, dan kami dan Komunitas Tuts+ akan membantu Anda memahami sepenuhnya!


Beberapa CSS untuk Kita Memulai

Kita ingin membuat beberapa struktur CSS dasar untuk kita memulai. HTML5 Boilerplate tentu saja termasuk normalize dan beberapa default lainnya yang bisa Anda ubah, tapi demi tutorialnya, kita  akan menulis CSS kita setelah baris "Author's custom styles".

Di sini, kita mendefinisikan CSS yang diperlukan untuk footer yang melekat, serta kelas tombol, kelas kontainer yang terpusat sendiri, kelas yang berisi elemen canvas kita di dalam widget kita, dan widget kita sendiri. Kita juga perlu menambahkan font Google yang kita definisikan untuk body dengan memasukkan ini ke dalam tag head kita.


Grafik Donat

Grafik Doughnut sangat mirip dengan grafik pie, kecuali bagian tengah yang dipotong. Secara default, ChartJS mendefinisikan bahwa 50% area grafik harus ditinggalkan; kita akan tetap dengan standar ini. Kode untuk membuat grafik donat ditunjukkan di bawah ini.

Di sini, Anda dapat melihat bahwa kita telah menentukan data dan warna grafik donat kita. Ini semua diperlukan untuk membuat grafik donat bekerja. Namun, apa yang diwakili masing-masing bagian? Sayangnya, ChartJS belum memiliki cara mudah untuk menentukan label untuk grafik donat; namun, kita bisa membuat legenda sendiri untuk menggambarkan masing-masing bagian yang berbeda. Ubah html widget donat untuk memasukkan yang berikut ini.

Kita menggunakan li ini oleh kelas mereka dengan sangat sederhana di CSS, dengan memanfaatkan pseudo-class `:before`.

Selanjutnya, kita ingin memiliki "jempol" bagus di tengah donat. Ini melibatkan beberapa trik CSS, termasuk versi Padded Box dari Uncle Dave's Ol agar lingkaran bisa responsif. Kita akan menggunakan span dengan kelas .status untuk mendapatkan lingkaran ini. Tambahkan aturan berikut ke main.css:

Mungkin elemen yang paling mencolok berdiri di sini adalah penggunaan data URI untuk gambar latar belakang. Ini memungkinkan kita untuk menghindari permintaan HTTP tambahan, dan secara sintaksis identik dengan menggunakan url http yang sebenarnya. Kita juga mengatur elemen ini untuk diposisikan absolute di dalam elemen widget-nya, yang sebelumnya kita tetapkan pada posisi relative.

Mari sekarang maju dan siapkan tipografi widget. Kita hanya menggunakan elemen h3 dan p di dalam widget; inilah css yang menyertainya.

Aturan margin dan padding pada elemen h3 memungkinkan elemen meregang ke tepi elemen widget di bagian atas 12px dari padding widget. Kita juga mengatur margin atas menjadi 0 pada elemen p agar sesuai dengan header dari widget.


Grafik Garis

Salah satu fitur ChartJS yang paling berguna adalah beberapa grafik memungkinkan beberapa kumpulan data. Kumpulan data ini akan digambar ke bagan yang sama secara berurutan, memungkinkan satu dataset dibandingkan dengan yang lain. Contoh sempurna dari kegunaan hal ini adalah grafik garis. Kita akan menggunakan dua dataset untuk mengeksplorasi fungsi ini.

Beberapa hal yang perlu diperhatikan dalam kode baru ini: pertama, kita menggunakan kembali variabel yang kita gunakan untuk membuat grafik donat. Ini benar-benar berlaku di JavaScript, dan sebenarnya sedikit mengurangi memori yang digunakan oleh skrip secara keseluruhan. Namun, hal ini dapat menyebabkan kebingungan di masa depan, dan jika Anda berencana untuk menyesuaikan kode ini untuk digunakan dalam produksi, mungkin akan lebih efektif untuk menggunakan variabel baru untuk setiap bagan baru yang Anda buat.

Selanjutnya, grafik garis mendukung label. Ini penting, karena memungkinkan kita menghindari pembuatan legenda berbasis HTML. Namun, penting juga bahwa poin data sesuai dengan label yang diberikan. Dalam contoh ini, data pertama kita di dataset pertama, 65, cocok dengan "Mon" di label.

Terakhir, fillColors kita untuk kumpulan data ini adalah versi RGBa dari warna yang telah kita definisikan sebelumnya (biru tua dan kuning). Kita menemukan nilai RGB dengan memasukkan warna ke dalam pemetik warna Photoshop, tapi ini bisa dilakukan dengan menggunakan sejumlah alat pemetik warna lainnya.

Kita juga akan menambahkan markup untuk beberapa tombol dan rentang yang mudah dibaca manusia. Widget baris terakhir terlihat seperti berikut.

Kita bisa memoles HTML ekstra dan membantu pengguna menghubungkan tanggal dengan CSS berikut:


Grafik Radar

Grafik radar berguna untuk menyaring pilihan variabel menjadi grafik yang mudah dibaca untuk mendapatkan persepsi umum tentang interaksi antara variabel yang berbeda. Dalam contoh kita, misalnya, kita akan mengeksplorasi gagasan tentang layanan pelanggan, berdasarkan berapa kali kata kunci tertentu disebutkan. Pada grafik radar, titik-titik yang diplot akan menciptakan sebuah bentuk. Bentuk itu bisa memberi kita rasa keseluruhan tentang efektivitas layanan pelanggan.

Mari kita lihat bagaimana ini diciptakan! Sekali lagi, kita akan menggunakan kembali variabel kita dari sebelumnya.

Dan HTML yang menyertainya akan terlihat seperti berikut:

Secara intuitif, kita bisa mengerti bahwa bentuk yang lebih jauh ke atas dan ke kanan akan lebih baik daripada bentuk yang lebih ke bawah dan ke kiri. Namun, kita tidak kehilangan data spesifik yang tersedia bagi kita dalam grafik pada tingkat variabel tunggal granular. Dalam kasus ini, kata "kasar" sering disebutkan, namun keseluruhan rasa layanan pelanggan nampak positif berdasarkan kata kunci lainnya.


Membuat Semuanya Responsif

Kita telah menyiapkan elemen canvas kita agar responsif dengan JavaScript yang kita gunakan untuk merespons pengubahan ukuran jendela. Sekarang, kita perlu membuat CSS kita responsif menggunakan kueri media. Inilah css yang akan kita gunakan untuk melakukan ini.

Hal pertama yang harus diperhatikan tentang CSS ini adalah bahwa semua kueri media hanya berbasis min-width. Ini berarti bahwa kita merancang dari layar dengan lebar terendah dan menambahkan peraturan baru saat kita bergerak ke atas. Desain kita tidak memerlukan banyak perubahan pada setiap breakpoint, namun pola ini adalah praktik terbaik dalam desain semua skala.

chartjs-small
chartjs-mid
chartjs-large

chartjs-smallchartjs-midchartjs-largeKita bisa melihat beberapa perubahan tata letak dasar pada setiap breakpoint, termasuk elemen kontainer utama dan juga perawatan kelas .third yang kita gunakan pada masing-masing widget. Di bawah 400, kita menumpuk semua widget di atas satu sama lain. Antara 400 dan 600, kita membuat dua widget pertama setengah lebar kolom, dan widget ketiga (grafik radar) full-width. Akhirnya, di atas 960, kita menggunakan tiga kolom sejajar.


Kesimpulan

Tutorial ini telah membawa Anda melalui langkah-langkah dasar untuk membuat dashboard menggunakan ChartJS. Konsep dasar yang dijelaskan di sini akan membantu Anda menciptakan proyek yang lebih terlibat menggunakan ChartJS, dan juga harus mendorong Anda untuk memikirkan desain responsif dari perspektif bawah ke atas.

Pengalaman apa yang Anda miliki dengan perpustakaan grafik? Apakah Anda menggunakan SVG atau canvas untuk memetakan data? Hal-hal apa yang Anda inginkan agar ChartJS melakukan hal yang dia tidak bisa? Tambahkan komentar Anda di bawah ini!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.