Tutorial tentang FusionCharts Drill-down di jQuery

Diterbitkan: 2022-03-11

Memvisualisasikan Data Membuatnya Lebih Mudah Dibaca

Ketika berhadapan dengan analisis data, sebagian besar perusahaan mengandalkan MS Excel atau Google Sheets. Meskipun itu adalah alat yang kuat, sulit untuk melihat tren, apalagi masuk akal dari deretan besar data spreadsheet. Berurusan dengan data yang disajikan dengan cara ini tidak terlalu menarik, tetapi setelah Anda menambahkan visualisasi ke data itu, semuanya menjadi lebih mudah untuk dikelola, dan itulah topik tutorial hari ini - membuat grafik interaktif menggunakan jQuery.

Berurusan dengan data spreadsheet itu membosankan.

Sulit untuk melihat tren dari deretan data spreadsheet, tetapi begitu Anda menambahkan visualisasi...

Menciak

Saya akan menggunakan pustaka bagan JavaScript FusionCharts untuk proyek ini karena ia menawarkan pustaka besar berisi 90+ bagan, kompatibel dengan setiap peramban, dan cukup mudah digunakan. Ia juga menawarkan plugin khusus untuk jQuery yang akan membuat pekerjaan kita lebih mudah.

Saya akan mulai dengan membuat bagan dasar menggunakan pustaka inti JavaScript FusionCharts dan plugin bagan jQuery, kemudian saya akan menambahkan kemampuan menelusurinya. Drill-down memungkinkan Anda untuk berpindah dari satu grafik ke grafik lainnya dengan mengklik plot data.

Istilah 'plot data' bersifat kontekstual; itu mengacu pada kolom dalam bagan kolom, garis dalam bagan garis, irisan pai dalam bagan pai. Dengan mengklik plot data dari bagan induk, Anda disajikan dengan bagan anak, yang menunjukkan data relatif satu tingkat lebih dalam.

Mengklik plot data pada bagan induk akan memunculkan bagan anak.

Memahami FusionCharts

Sebelum kita memulai tutorial, mari kita bahas anatomi dasar FusionCharts. Setiap bagan terdiri dari elemen-elemen kunci ini:

Caption: Judul pada grafik. Ini menjelaskan apa yang sedang dipetakan.
Sub-keterangan: Teks di bawah keterangan yang menentukan informasi bagan tambahan, seringkali menyatakan kerangka waktu dari mana data dikumpulkan.
Legenda: Ini menampilkan simbol untuk setiap plot data pada bagan. Plot tertentu dapat diaktifkan atau dinonaktifkan dengan mengklik ikon legenda masing-masing.
Plot data: Ini adalah representasi data pada grafik. Plot data dapat berupa kolom dalam bagan kolom, garis dalam bagan garis, atau irisan pai dalam bagan pai.
Keterangan alat: Teks yang muncul saat Anda mengarahkan kursor ke plot data, digunakan untuk menyampaikan informasi tambahan tentang plot data tertentu.

Membuat Bagan Perincian

Sebelum kita mulai, berikut adalah screenshot dari grafik yang akan kita buat dalam tutorial ini. Anda dapat melihat JSFiddle di sini atau mengakses kode sumber lengkap proyek di repo GitHub saya.

Pratinjau proyek jquery akhir tutorial ini.

Saya telah membagi proses pembuatan diagram drill-down menjadi lima langkah, jadi mari kita mulai.

Langkah 1: Menyertakan File JavaScript dan Membuat Wadah Bagan

Pertama, kita perlu memasukkan semua file JS yang menjadi tumpuan proyek kita dengan menggunakan tag <script> . Jika halaman belum ada, buat dokumen HTML kosong dan sertakan file di bawah ini di bagian <head> . Sekarang kita membutuhkan empat file berikut:

jQuery yang diperkecil
Pustaka JS utama FusionCharts (termasuk fusioncharts.js dan fusioncharts.charts.js )
Plugin jQuery FusionCharts

Bagian <head> kita sekarang akan terlihat seperti ini:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Sekarang kita memiliki semua dependensi yang disertakan, saatnya membuat wadah <div> untuk bagan dan menyematkannya di halaman kita dengan kode HTML berikut:

 <div>drill-down chart will load here</div>

Sekarang, kita dapat memilihnya menggunakan pemilih $ jQuery di dalam kode:

 $("#drill-down-chart")

Catatan: Jika Anda memiliki lebih dari satu bagan di halaman Anda, Anda memerlukan wadah terpisah untuk setiap bagan dengan id unik .

Memvisualisasikan data membuatnya lebih mudah dibaca.

Langkah 2: Mendapatkan dan Menyusun Data

FusionCharts menerima data dalam format JSON dan XML, tetapi saya telah memilih untuk menggunakan JSON karena JSON menjadi format standar untuk pertukaran data di seluruh aplikasi web. Larik data JSON untuk bagan dasar berisi objek untuk setiap plot data, dan di dalam setiap objek plot data, kami mendefinisikan label dan nilainya masing-masing. Struktur itu terlihat seperti:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Saat kami memplot bagan perincian kami, JSON-nya menjadi lebih kompleks. Tautan antara bagan induk dan anak memerlukan satu pasangan key - value lagi di dalam setiap objek larik data. Kunci baru (tidak mengejutkan, disebut link ) akan berisi id bagan anak yang akan Anda dapatkan ketika plot data induknya diklik. Format untuk mendefinisikan id bagan anak adalah newchart-dataFormat-childId . Karena kami menggunakan JSON, kami tahu bahwa apa pun yang kami tautkan akan terlihat seperti newchart-json-childId . Inilah cara kami mendefinisikannya untuk bagan kami:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Langkah 3: Memasukkan Data Bagan

Setelah data siap, saatnya untuk menyisipkan grafik di halaman Anda menggunakan metode insertFusionCharts yang disediakan oleh plugin jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Mari kita uraikan cuplikan kode di atas:

type mendefinisikan jenis bagan induk yang kita plot. Dalam hal ini, column2d . Setiap bagan di pustaka FusionCharts memiliki alias unik. Anda dapat menemukan alias untuk bagan yang ingin Anda plot di halaman daftar bagan FusionCharts.
id menetapkan id unik untuk bagan, jangan bingung dengan id elemen <div> yang berisi bagan kita. id bagan digunakan untuk memilih bagan untuk menerapkan pengendali acara dan metode pemanggilan. Kami akan menggunakan ini di Langkah 5.
width dan height mengatur dimensi bagan dalam piksel atau persentase. Lebar 100% memberi tahu bagan untuk menempati lebar kontainer penuh.
Kami mendefinisikan format data menggunakan atribut dataFormat . Kami menggunakan JSON untuk contoh kami tetapi ada format data lain yang dapat diterima juga, seperti URL XML. Untuk mempelajari lebih lanjut tentang format data, lihat halaman dokumentasi resmi FusionCharts.
dataSource berisi konten sebenarnya dari bagan, dan objek chart di dalamnya berisi opsi konfigurasi bagan, seperti keterangan dan subjudul. Larik data akan terlihat familier karena kita membuatnya di Langkah 2 (berisi data yang akan diplot), dan linkedData berisi konten untuk bagan anak (bagan yang Anda dapatkan setelah Anda mengeklik plot data pada bagan induk).

Terkait: Pekerjakan 3% arsitek lepas Big Data teratas.

Langkah 4: Membuat Array Data Tertaut untuk Bagan Anak

Sekarang setelah kita menentukan bagan induk, saatnya membuat bagan anak untuk setiap plot data, proses yang sangat mirip dengan membuat bagan induk. Array linkedData , dibuat dalam metode 'insertFusionCharts', akan mendefinisikan objek terpisah untuk setiap bagan anak. Berikut tampilan data untuk bagan anak pertama:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id adalah id dari bagan anak individual yang kita definisikan di Langkah 2. linkedChart mirip dengan dataSource dari Langkah 3 karena berisi konten sebenarnya dari bagan itu. Ada banyak atribut lain yang masuk ke dalam objek bagan, yang saya bahas secara rinci di bagian selanjutnya, “Meningkatkan Desain dengan Atribut Bagan”.

Langkah 5: Konfigurasi Penelusuran Khusus

Beragam Jenis Bagan

Sejauh ini, kode sampel kami memiliki bagan induk dan anak yang berbagi jenis bagan yang sama. Jika Anda ingin menelusuri ke jenis bagan yang berbeda (dari kolom ke pai, misalnya), Anda melakukannya dengan mengikat acara fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Dalam kode di atas, acara fusionchartsrendered akan memanggil metode configureLink , yang mendefinisikan jenis semua bagan anak ditambah opsi tombol overlay. Anda juga dapat menentukan jenis bagan terpisah untuk setiap bagan anak. Ada banyak opsi yang tersedia dalam metode configureLink , jadi Anda mungkin perlu meninjau dokumentasi referensi API-nya dari FusionCharts.

Rendering Bagan di Divs Berbeda

Hal keren lainnya yang dapat Anda lakukan adalah membuat bagan anak dalam wadah yang berbeda daripada wadah yang sama dengan induknya. Untuk ini, tentukan wadah <div> HTML terpisah setelah wadah bagan induk dan berikan id-nya ke atribut renderAt seperti yang ditunjukkan di bawah ini:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Nilai yang diberikan ke atribut renderAt menentukan id dari <div> yang akan dirender oleh bagan anak ( chart-container2 ).

Meningkatkan Desain dengan Atribut Bagan

Mengikuti tutorial ini Anda akan mendapatkan bagan fungsional, tetapi akan agak jelek jika Anda membiarkannya begitu saja. Untuk presentasi yang lebih menarik, Anda harus menggunakan "atribut bagan" kosmetik. Atribut bagan didefinisikan di dalam objek chart dan digunakan untuk menyesuaikan opsi rendering. Anda mungkin merasa berguna untuk merujuk ke grafik penjelasan FusionCharts saat meninjau atribut kunci yang dapat dikonfigurasi ini:

paletteColors mendefinisikan warna plot data. Jika Anda memberi satu warna di sini, semua kolom akan menjadi warna itu. Jika Anda memberi beberapa warna, kolom pertama akan mengambil nilai pertama, kolom kedua akan mengambil nilai kedua, dan seterusnya.
plotSpacePercent mengontrol ruang antar kolom. Nilai default untuk ini adalah 20 (nilainya adalah int, tetapi unitnya adalah persentase) dan rentang yang diizinkan adalah 0-80. Nilai nol akan membuat kolom-kolom tersebut bertumpuk dan menempel satu sama lain.
baseFont mendefinisikan keluarga font bagan. Anda dapat menggunakan font apa pun yang Anda suka; Saya menggunakan Open Sans Google di bagan saya. Cukup sertakan file font eksternal di halaman HTML Anda untuk menggunakannya di bagan Anda.
plotToolText memungkinkan Anda menyesuaikan tooltips. Dengan menggunakan makro seperti $label dan * $dataValue , Anda dapat menampilkan informasi spesifik pada plot data tertentu dari dalam <div> , lalu gaya <div> tersebut menggunakan CSS sebaris. Inilah yang telah saya lakukan dalam contoh kita:

 "plotToolText": "<div>$label: $dataValue</div>"

theme memungkinkan Anda untuk menentukan atribut bagan Anda dalam file yang berbeda dan menerapkannya sekali di sini alih-alih mengacaukan objek bagan Anda dengan banyak atribut bagan. Anda dapat menemukan file tema untuk tutorial ini - toptal.js - di dalam folder JS dari repo GitHub proyek.

Itu saja yang akan saya bahas, tetapi ada lebih dari seratus atribut untuk bagan, jadi jika Anda ingin menjelajahi lebih jauh, silakan kunjungi halaman atribut bagan FusionCharts dan cari jenis bagan khusus Anda.

Lebih Banyak FusionCharts dan Sumber Daya jQuery

Meskipun saya telah membahas elemen yang paling penting dalam membuat grafik drill-down menggunakan jQuery, ada kemungkinan besar Anda akan memerlukan bantuan ketika Anda mencoba melakukannya sendiri. Untuk saat itu, berikut adalah beberapa sumber tambahan:

plugin grafik jQuery: Untuk inspirasi, kunjungi halaman plugin grafik jQuery resmi untuk melihat beberapa contoh langsung.
Dokumentasi: Jika Anda tidak dapat menemukan sesuatu, dokumentasi adalah tempat pertama yang harus Anda cari. Berikut adalah tautan praktis untuk plugin jQuery dan bagan perincian (juga dikenal sebagai bagan tertaut).
Demo: Setiap pustaka charting menawarkan sampel langsung untuk menunjukkan kemampuannya, dan FusionCharts tidak berbeda. Kunjungi galeri demo lebih dari 800 sampel langsung, dengan kode sumber lengkap jika Anda memerlukan beberapa ide. Ada kemungkinan besar bahwa apa pun yang Anda coba buat sudah tersedia. Tidak perlu memulai dari awal; garpu saja biola dan lanjutkan dari sana!
Ekstensi lainnya: Jika Anda tidak menggunakan vanilla JavaScript atau jQuery, Anda dapat menjelajahi lebih banyak plugin dan pembungkus yang ditawarkan oleh FusionCharts di halaman ini. Mereka memiliki plugin khusus untuk berbagai perpustakaan dan kerangka kerja seperti Angular, React, Java, ASP.NET dll.

PS: Saya akan nongkrong di bagian komentar di bawah, jadi jangan ragu untuk memposting pertanyaan apa pun yang mungkin Anda miliki tentang artikel saya. Saya senang membantu!

Terkait: Data Mining untuk Analisis Jaringan Sosial Prediktif