Cara Membuat Grafik Dengan HighCharts, MySQLi, dan jQuery - Jadidewa.com
Cara Membuat Grafik Dengan HighCharts, MySQLi, dan jQuery - Jadidewa.com

Cara Membuat Grafik Dengan HighCharts, MySQLi, dan jQuery 5/5 (5)

Diposting pada

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:

  1. Library HighCharts. Jika Belum punya, bisa download disini;
  2. Library jQuery. Jika Belum punya, bisa download disini;
  3. Software XAMPP. Disini admin menggunakan XAMPP (versi 5.6) sebagai web server serta databasenya. Jika belum punya, bisa download disini;
  4. Text Editor. Admin menggunakan sublime, mungkin kamu tertarik dengan rekomendasi admin disini;

Setelah melakukan apa yang sudah dibutuhkan, kita lanjut ke proses koding!

 

Proses

  1. Buka folderĀ htdocs pada directory installĀ XAMPP;
  2. Buat folder dengan nama apa saja (grafik);
  3. Masukkan file HighCharts.js dan jQuery.js pada folder yang tadi dibuat;
  4. Buat file koneksi.php (Rekomendasi: Membuat Koneksi);
  5. Buat file index.php;

 

Koding!

  1. Pada file index.php, buatlah kodingan memanggil file koneksi.php;
  2. Setelah itu buatlah kodingan html keseluruhan di index.php, seperti:
  3. Masukkan library HighCharts dan jQuery ke file index.php sebelum diantara tagĀ <head> letakkan disini </head>;
  4. Masukkan kodingan yang dibutuhkan untuk memanggil grafik tersebut. Masukkan kodingan diantara tag <head>Letakkan disini</head>Ā . Sama seperti pada tahap ke 3;
  5. Pada bagian tagĀ <body> Masukkan id untuk memanggil grafiknya </body>;
  6. Kira-kira keseluruhan kodenya seperti ini:
  7. Selesai!;

 

Hasil Akhir

Kira-kira jadinya seperti ini:

Cara Membuat Grafik Dengan HighCharts, MySQLi, dan jQuery - Jadidewa.com

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

Ayo Nilai Artikel Ini!

Gambar Gravatar
berbagi ilmu selain pahala , bermanfaat , support me

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.