HighCharts merupakan sebuah library javascript yang mempunyai fungsi untuk membuat sebuah grafik yang interaktif pada website. Grafik sendiri berguna untuk memantau bagaimana aktivitas data yang telah dilakukan.
Mulai Membuat Grafik
Sebelum kita membuat grafik, ada beberapa hal yang perlu dilakukan. Seperti:
Persiapan
Untuk persiapan, kita memerlukan bahan yang akan kita butuhkan nantinya. Antara lain:
- Library HighCharts. Jika Belum punya, bisa download disini;
- Library jQuery. Jika Belum punya, bisa download disini;
- Software XAMPP. Disini admin menggunakan XAMPP (versi 5.6) sebagai web server serta databasenya. Jika belum punya, bisa download disini;
- Text Editor. Admin menggunakan sublime, mungkin kamu tertarik dengan rekomendasi admin disini;
Setelah melakukan apa yang sudah dibutuhkan, kita lanjut ke proses koding!
Proses
- Buka folder htdocs pada directory install XAMPP;
- Buat folder dengan nama apa saja (grafik);
- Masukkan file HighCharts.js dan jQuery.js pada folder yang tadi dibuat;
- Buat file koneksi.php (Rekomendasi: Membuat Koneksi);
- Buat file index.php;
Koding!
- Pada file index.php, buatlah kodingan memanggil file koneksi.php;
- Setelah itu buatlah kodingan html keseluruhan di index.php, seperti:
- Masukkan library HighCharts dan jQuery ke file index.php sebelum diantara tag
<head> letakkan disini </head>; - Masukkan kodingan yang dibutuhkan untuk memanggil grafik tersebut. Masukkan kodingan diantara tag
<head>Letakkan disini</head>. Sama seperti pada tahap ke 3; - Pada bagian tag
<body> Masukkan id untuk memanggil grafiknya </body>; - Kira-kira keseluruhan kodenya seperti ini:
- Selesai!;
Hasil Akhir
Kira-kira jadinya seperti ini:
Penjelasan
| renderTo:’grafik’ | Merupakan id pada tag div |
| title:{text:’Grafik Barang’}, | Judul Grafik |
| xAxis:{categories:[‘Nama Barang’]}, | Posisi nya ada dibawah |
| yAxis:{title:{text:’Jumlah Barang’}}, | Posisi nya ada disamping kiri |
| $sql = “SELECT * FROM tbl_grafik”; | Mengambil data dari tbl_grafik |
| $merk = $barang[‘nama_barang’]; | Memilih nama baris pada tbl_grafik |
| $jumlah = “SELECT jumlah_barang FROM tbl_grafik WHERE nama_barang=’$merk'”; | Memilih nama baris pada tbl_grafik |
| name:'<?php echo $merk; ?>’ | Menampilkan Data |
| data:[<?php echo $total; ?>] | Menampilkan Grafik |
Penutup
Sekian artikel tentang Cara Membuat Grafik Dengan HighCharts, MySQLi, dan jQuery semoga bermanfaat untuk kita semua 😀
Terima kasih,
JADIDEWA.COM
