Analisis Perbandingan Kinerja Library Chart.js, D3, dan Highcharts Untuk Visualisasi Data Sensor IOT Pada Dashboard Berbasis Laravel

Ailsa Isnani Anubhawa, Divi Galih Prasetyo Putri, S.Kom., M.Kom., Ph.D.

2025 | Tugas Akhir | D4 Teknologi Perangkat Lunak

Website telah berkembang menjadi platform yang kompleks, salah satunya yaitu dengan penggunaanya sebagai dasbor untuk menampilkan informasi dari perangkat IoT. Dalam hal ini, website dashboard berfungsi sebagai antarmuka visual untuk menampilkan data hasil pembacaan sensor IoT dan memvisualisasikan data-data tersebut. Untuk membuat visualisasi data IoT, terdapat beberapa library yang dapat digunakan dan setiap library memiliki kelebihan serta kekurangannya masing-masing. Dengan beberapa pertimbangan seperti performa rendering, fleksibilitas, dan implementasi, library dari bahasa pemrograman JavaScript dapat menjadi salah satu pilihan karena fleksibilitasnya yang dapat dijalankan di semua browser modern tanpa membutuhkan dependensi tambahan. Penelitian ini membandingkan tiga library JavaScript, Chart.js, D3.js, dan Highcharts, untuk membantu pengembang memilih yang paling sesuai dalam menangani data IoT yang terus-menerus diperbarui. Evaluasi penggunaan library visualisasi JavaScript diukur berdasarkan performa rendering data real-time, skalabilitas tampilan chart, dan efisiensi penggunaan CPU serta memori. Berdasarkan hasil pengujian tersebut menunjukkan bahwa Chart.js memiliki performa rendering yang baik, efisien dalam penggunaan memori dan CPU, serta menunjukkan stabilitas tinggi tanpa fluktuasi signifikan. D3.js unggul dalam bersifat customizable tetapi kurang stabil untuk data besar dan lebih boros memori serta CPU. Highcharts mampu menjaga kecepatan, stabilitas rendering, dan efisiensi memori pada beban data besar karena fitur optimasi internal, sehingga cocok untuk visualisasi IoT berskala besar. Hasil penelitian ini diharapkan dapat memberikan pengetahuan dan panduan dalam memilih library visualisasi yang optimal untuk meningkatkan performa dashboard dan efisiensi sistem.

 The website has evolved into a complex platform, one of which is its use as a dashboard for displaying information from IoT devices. In this context, a dashboard website serves as a visual interface to present data collected by IoT sensors and to visualize that data. To create IoT data visualizations, there are various libraries available, each with its own advantages and disadvantages. Considering factors such as rendering performance, flexibility, and its implementation, JavaScript libraries are a suitable choice because of their flexibility and compatibility with all modern browsers without requiring additional dependencies. This study compares three JavaScript libraries, Chart.js, D3.js, and Highcharts, to help developers choose the most appropriate one for handling continuously updated IoT data. The evaluation of these JavaScript visualization libraries focuses on real-time data rendering performance, chart scalability, and the efficiency of CPU and memory usage. The results show that Chart.js delivers good rendering performance, is efficient in memory and CPU usage, and maintains high stability without significant fluctuations. D3.js excels in customization but is less stable for large datasets and tends to consume more memory and CPU resources. Highcharts maintains rendering speed, stability, and memory efficiency under heavy data loads because of its built-in optimization features, making it suitable for large-scale IoT visualizations. It is hoped that the findings of this study will provide insights and guidance in selecting an optimal visualization library to improve dashboard performance and overall system efficiency.

Kata Kunci : JavaScript, Highcharts, D3.js, Chart.js, Performa Rendering, CPU, Footprint Memory library