Visualisasi Data Dengan DataTables.js dan Highcharts.js

 

 

Dalam tutorial kali ini, kalian akan belajar bagaimana untuk memvisualisasikan data dengan mengambil keuntungan dari DataTables.js dan Highcharts.js libraries JavaScript.

Berikut adalah apa saja yang akan kita untuk membangun project dalam tutorial ini (Lihat versi Code disini agar klian bisa lebih mengerti):

See the Pen Visualisasi Data Dengan DataTables.js dan Highcharts.js by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

 

Libraries yang Dibutuhkan

Untuk keperluan tutorial kali ini, kita harus memuat libraries berikut :

• jQuery
• DataTables.js
• ijjjHighcharts.js
  

Setelh itu semua kalian persiapkan, jika kalian melihat di bawah tab Settings, kalian akan melihat bahwa saya telah menyertakan satu file CSS eksternal: 

 

 

Dengan cara yang sama, saya juga menyertakan empat file eksternal JavaScript :

Catatan: kita harus menambahkan jQuery untuk proyek kit karena DataTables.js adalah sebuah plugin jQuery. Namun, perlu diingat bahwa Highcharts.js adalah sebuah library JavaScript yang murni, dan dengan demikian tidak memerlukan jQuery.

HTML

Sebelum memulai ada beberapa hal yang perlu kita definisikan, kita mendefinisikan sebuah elemen dengan class container yang berisi dua sub-elemen:

• Sebuah tabel dengan baris 26. Baris pertama merujuk pada header tabel th, sementara 25 baris lain membawa rincian negara. Sumber data (resource) kita untuk contoh ini adalah worldometers.info.
• Div kosong yang akan mengadakan grafik.
  

Berikut adalah struktur HTML nya:

1:  <div class="container">  
2:   <table id="dt-table">  
3:    <thead>  
4:     <tr>  
5:      <th>Country</th>  
6:      <th>Population (2017)</th>  
7:      <th>Density (P/Km²)</th>  
8:      <th>Med. Age</th>  
9:     </tr>  
10:    </thead>  
11:    <tbody>  
12:     <tr>  
13:      <td>China</td>  
14:      <td>1,409,517,397</td>  
15:      <td>150</td>  
16:      <td>37</td>  
17:     </tr>  
18:     <!-- 24 more rows here -->  
19:    </tbody  
20:   </table>    
21:   <div id="chart"></div>  
22:  </div>  

Kita telah menentukan data tabel hard-coded tersebut. Dalam sebuah proyek yang nyata walaupun, tabel mungkin biasanya dibuat secara dinamis.

Dengan markup yang sudh siap, dan warna background yang  sudah kita tambahkan untuk kejelasan, proyek terlihat seperti ini:

See the Pen Data Visualization: Step 1 by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

CSS

Pada tahap ini, kita mendefinisikan beberapa style dasar, seperti:

1:  .container {  
2:   display: flex;  
3:   flex-wrap: wrap;  
4:   align-items: center;  
5:   padding: 0 10px;  
6:  }  
7:  #dt-table_wrapper {  
8:   width: 35%;  
9:   margin-right: 2%;  
10:  }  
11:  #chart {  
12:   width: 63%;  
13:  }  
14:  table {  
15:   text-align: left;  
16:  }  
17:  @media screen and (max-width: 1200px) {  
18:   #dt-table_wrapper,  
19:   #chart {  
20:    width: 100%;  
21:   }  
22:   #dt-table_wrapper {  
23:    margin-right: 0;  
24:   }  
25:  }  

Penting untuk memahami bahwa:

• #dt-table_wrapper tidak ada di markup kita. Itu ditambahkan oleh DataTables segera setelah kits menginisialisasi kan.
• Meskipun kita mendefinisikan beberapa aturan dasar untuk layar yang kecil, perhatikan bahwa demo tidak akan sepenuhnya responsif. Ada banyak hal yang dapat kita lakukan untuk membuat tabel dan bagan terlihat lebih baik di layar yang kecil. Misalnya, untuk DataTables ada ekstensi Responsif yang tersedia, tetapi itu di luar cakupan tutorial ini.

Dengan CSS di tempat, mari kita lihat bagaimana tampilan proyek. Kita belum akan melihat perbedaan besar karena kita belum menginisialisasi libraries.

See the Pen Data Visualization: Step 2 by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

JavaScript

Sekarang untuk jendela JavaScript di source code kita. Ketika DOM sudah siap, fungsi init dijalankan; fungsi ini memicu sub-fungsi lainnya:

1:  function init() {  
2:   const table = $("#dt-table").DataTable();  
3:   const tableData = getTableData(table);  
4:   createHighcharts(tableData);  
5:   setTableEvents(table);  
6:  }  

Seperti yang akan kalian lihat, masing-masing sub-fungsi ini menyelesaikan tugas tertentu.

Menginisialisasi DataTables

Langkah pertama adalah mengubah tabel kita menjadi tabel “DataTables”. Kita dapat melakukannya hanya dengan satu baris kode: $("#dt-table").DataTable();

Jika kita sekarang melihat tabel, kita akan melihat bahwa itu telah mengadopsi kemampuan tabel DataTables, yaitu: kita dapat mengurutkannya, mencarinya, dan sebagainya. Bermainlah dengannya di demo berikut:

 

See the Pen Data Visualization: Step 3 by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

Sekarang, seperti yang kalian lihat, DataTables menerapkan pengurutan default ke tabel. Jika diperlukan, kita bisa menyesuaikan perilaku ini.

Mengekstrak Data Tabel

Langkah selanjutnya adalah mengambil data tabel dan membuat grafik. Kita tidak ingin semua data tabel. Faktanya, jika kalian melihat kembali versi demo kitayang telah selesai, kalian akan melihat bahwa bagan hanya berisi data dari tiga kolom pertama (Negara, Populasi, Kepadatan).

 

Dengan mengingat hal itu, untuk mengambil data yang diperlukan, kita akan memanfaatkan API DataTables. Fungsi yang bertanggung jawab atas perilaku ini adalah sebagai berikut:

1:  function getTableData(table) {  
2:   const dataArray = [],  
3:    countryArray = [],  
4:    populationArray = [],  
5:    densityArray = [];  
6:   // loop table rows  
7:   table.rows({ search: "applied" }).every(function() {  
8:    const data = this.data();  
9:    countryArray.push(data[0]);  
10:    populationArray.push(parseInt(data[1].replace(/\,/g, "")));  
11:    densityArray.push(parseInt(data[2].replace(/\,/g, "")));  
12:   });  
13:   // store all data in dataArray  
14:   dataArray.push(countryArray, populationArray, densityArray);  
15:   return dataArray;  
16:  }  

Di dalam fungsi ini, kita mengulangi melalui baris tabel dan untuk setiap baris, kitamengambil data kolom target dan menyimpannya dalam array terkait. Akhirnya, semua array tersebut disimpan di dalam array lain.

Berikut adalah visualisasi cepat dari array master (yaitu dataArray):

Sebelum melanjutkan, penting untuk memahami satu hal. Secara default, fungsi getTableData harus mengumpulkan data dari semua baris tabel. Tapi kemudian, jika kita mencari tabel untuk sesuatu yang spesifik, hanya baris yang cocok yang harus dikumpulkan dan diproses. Untuk mencapai hal-hal ini, kita meneruskan argumen ke fungsi baris. Secara khusus, objek dengan pencarian: nilai properti "terapan".

Sekali lagi perhatikan bahwa jika kita tidak melewatkan objek ini, kita akan selalu mengumpulkan data dari semua baris tabel (mengujinya). Untuk informasi lebih lanjut tentang properti yang dapat kita berikan ke objek ini, pastikan untuk melihat halaman ini.

 

Membangun Bagan

 

Sekarang setelah kitamemiliki data yang diinginkan, kita siap untuk membuat bagan. Ini akan berisi dua bagan bersarang (nested charts), satu bagan Kolom (column chart) dan satu bagan Spline (spline chart).

Inilah fungsi yang sesuai:

 

1:  function createHighcharts(data) {  
2:   Highcharts.setOptions({  
3:    lang: {  
4:     thousandsSep: ","  
5:    }  
6:   });  
7:   Highcharts.chart("chart", {  
8:    title: {  
9:     text: "DataTables to Highcharts"  
10:    },  
11:    subtitle: {  
12:     text: "Data from worldometers.info"  
13:    },  
14:    xAxis: [  
15:     {  
16:      categories: data[0],  
17:      labels: {  
18:       rotation: -45  
19:      }  
20:     }  
21:    ],  
22:    yAxis: [  
23:     {  
24:      // first yaxis  
25:      title: {  
26:       text: "Population (2017)"  
27:      }  
28:     },  
29:     {  
30:      // secondary yaxis  
31:      title: {  
32:       text: "Density (P/Km²)"  
33:      },  
34:      min: 0,  
35:      opposite: true  
36:     }  
37:    ],  
38:    series: [  
39:     {  
40:      name: "Population (2017)",  
41:      color: "#0071A7",  
42:      type: "column",  
43:      data: data[1],  
44:      tooltip: {  
45:       valueSuffix: " M"  
46:      }  
47:     },  
48:     {  
49:      name: "Density (P/Km²)",  
50:      color: "#FF404E",  
51:      type: "spline",  
52:      data: data[2],  
53:      yAxis: 1  
54:     }  
55:    ],  
56:    tooltip: {  
57:     shared: true  
58:    },  
59:    legend: {  
60:     backgroundColor: "#ececec",  
61:     shadow: true  
62:    },  
63:    credits: {  
64:     enabled: false  
65:    },  
66:    noData: {  
67:     style: {  
68:      fontSize: "16px"  
69:     }  
70:    }  
71:   });  
72:  }  

 

Jangan kewalahan dengan kode di atas! Tanpa ragu cara terbaik untuk memahami cara kerjanya adalah dengan mencobanya. Plus, kalian pasti harus membaca dokumentasi. Bagaimanapun, mari kita secara singkat menyoroti konsep-konsep kunci:

• Sumbu x berisi semua negara.
• Kita mendefinisikan dua sumbu y. Yang pertama menampung semua nilai populasi, sedangkan yang kedua mencakup semua kepadatan yang tersedia.
• Jika bagan kita tidak berisi data apa pun, sebuah pesan akan muncul. Perhatikan bahwa kita bisa menyesuaikan teks pesan melalui objek lang.
  

Dengan grafik di tempat, mari kita lihat lagi kemajuan kita:

See the Pen CodePen Home Data Visualization: Step 4 by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

 

Menyinkronkan Tabel dan Bagan

Di bagian sebelumnya, kita membuat bagan berdasarkan data tabel, tetapi masih belum ada sinkronisasi penuh antara tabel dan bagan. Untuk membuktikannya, kembali ke demo terakhir dan ubah urutan (pengurutan) tabel, atau cari sesuatu. Kalian akan melihat bahwa bagan tidak bereaksi terhadap perubahan tabel.

Untuk memperbaikinya, kita akan memanfaatkan draw event DataTables. Event ini diaktifkan setiap kali tabel diperbarui. Jadi segera setelah kita memodifikasi tabel, kita harus mengumpulkan kembali data tabel dan merekonstruksi grafik.

Inilah hal yang rumit. Sraw event juga diaktifkan selama paginasi tabel; tidak ada alasan untuk membangun kembali bagan selama proses ini. Idealnya, kita harus mencegah perilaku ini. Untungnya, ada page event yang membantu kita menyelesaikan tugas ini.

Berikut kode yang mengimplementasikan fungsionalitas yang diinginkan:

1:  let draw = false;  
2:  function setTableEvents(table) {  
3:   // listen for page clicks  
4:   table.on("page", () => {  
5:    draw = true;  
6:   });  
7:   // listen for updates and adjust the chart accordingly  
8:   table.on("draw", () => {  
9:    if (draw) {  
10:     draw = false;  
11:    } else {  
12:     const tableData = getTableData(table);  
13:     createHighcharts(tableData);  
14:    }  
15:   });  
16:  }  

Sekarang setelah tabel dan bagan disinkronkan, jika kita melakukan pencarian "buruk", kita akan melihat pesan berikut:

Dukungan Browser

Kedua plugin memiliki dukungan browser yang hebat (dukungan DataTables, dukungan Highcharts), sehingga kalian bisa berharap bahwa demo ini akan bekerja dengan baik di semua browser terbaru.

Sekali lagi perlu diingat bahwa demo ini tidak dioptimalkan untuk layar kecil.

Terakhir, seperti biasa, kita menggunakan Babel untuk mengkompilasi kode ES6 hingga ES5.
 

Kesimpulan

Itu saja! Kita berhasil memvisualisasikan data kita dengan menggabungkan dua librarie JavaScript yang populer dan kuat.

Sekarang setelah kalian terbiasa dengan prosesnya, lanjutkan dan uraikan fungsionalitas demo terakhir. Misalnya, coba tambahkan filter khusus ke tabel.

Seperti biasa, jika kalian memiliki pertanyaan atau jika ada hal lain yang ingin kalian lihat sebagai langkah selanjutnya dari tutorial ini, beri tahu saya di kolom komentar di bawah.