Membuat Dynamic Chart: Mysql + Php + ChartJs

Aplikasi web based tak akan lengkap jika tak disetai tampilan data dalam Chart. Dalam tulisan ini saya menggunakan library chart dari ChartJS.

Beberapa langkah untuk membuat tampilan Chart.

Pertama kali adalah memanggi library ChartJS ke page:

<script type=”text/javascript” src=”assets/js/Chart.min.js”></script>

 

Lalu, dilanjutkan dengan langkah-langkah sederhana berikut ini:

1. Menyiapkan data
Data yang disiapkan harus memenuhi standar Chart. Yaitu nilai Y, yang biasanya nilai masing-masing parameter. dan X, parameter. Dalam sample ini saya membuat chart dari data jaminan mutu pendidikan.

Data bahan Chart

Data bahan Chart diatas, akan diambil parameter kriteria yang diwakili dalam Chart nanti oleh kode_std,  sebagai X. dan nilai Y dalam rentang 0 – 100 oleh kolom nilai.

Data-data itu, diset seperti berikut:

Struktur table bahan

pada kolom nilai, jenis yang dipakai adalah desimal, dua angka  dibelakang koma (data yang disajikan dalam format inggris, menggunakan titik).

2. Menyiapkan JSON data untuk diproses oleh ChartJS.
Buatlah file chart-data.php, yang mana file ini akan query data diatas, dan menampilkan dalam format JSON.

Menghasilkan output JSON

karena data dinamis, maka pemanggilan data diset berdasarkan parameter tahun. Jika parameter kosong, data tahun dibuat 2017 (set default value). Script itu akan menghasilkan JSON output:

 

[
  {
    "kode_std": "std01",
    "nilai": "87.33"
  },
  {
    "kode_std": "std02",
    "nilai": "94.27"
  },
  {
    "kode_std": "std03",
    "nilai": "77.78"
  },
  {
    "kode_std": "std04",
    "nilai": "91.62"
  },
  {
    "kode_std": "std05",
    "nilai": "81.15"
  },
  {
    "kode_std": "std06",
    "nilai": "92.22"
  },
  {
    "kode_std": "std07",
    "nilai": "84.63"
  }
]

3. Memproses JSON output menjadi Chart dengan Javascript.
JSON output diproses oleh javascript berikut, untuk dihadirkan dalam format X,Y bar Chart. Opsi beginAtZero: true, dimaksudkan untuk menetapkan nilai terendah sumbu Y adalah NOL. Dengan men-set jadi FALSE, maka nilai terendah sumbu Y akan mengikuti nilai terendah data itu.

4. Menampilkannya dalam page.
Dengan baris kode berikut, Bar Chart akan tampil.

Call Chart dalam HTML

5. Hasilnya adalah sebagai berikut:

Hasil Generate ChartJS

Demikianlah cara “Membuat Dynamic Chart: Mysql + Php + ChartJs”.
Semoga bermanfaat.

Share to

Do You Know!