BAB 1 Chart

BAB 1
Chart
Pada pertemuan kali ini akan membahas mengenai cara pembuatan Chart pada sebuah Website.
Sebelum populernya Chart Library berbasis JavaScript seperti sekarang ini misalnya HighChart,
GoogleChart, ChartJS dll, sebelumnya ada library untuk membuat Chart pada Web yaitu JPGraph
yang berbasis PHP. Kelebihan dari JPGraph yang berbasis library PHP adalah lebih mudahnya di
implementasikan ke dalam aplikasi karena tidak banyak library tambahan yang dibutuhkan. Seiring
perkembangan teknoliogi saat ini Chart Library pada Web yang berbasis JavaScript jauh lebih
berkembang dan lebih banyak diminati karena lebih dinamis secara visual, lebih menarik dan
interaktiv. Pada modul ini akan membahas bagaimana implementasi Chart pada sebuah Website.
Persiapan sebelum Instalasi
-
PHP dan MySQL sudah terinstal pada Komputer
Download Library jQuery dan HighChart
Berikut adalah detail dan cara untuk membuat Chart Dinamis pada Web menggunakan HighChart
dengan data yang langsung dari Database. Pada tahap ini Apache dan MySQL harus sudah siap pada
komputer Anda.
 Buka pada localhost pada komputer Anda dan buat Database pada MySQL. Pada tutorial ini
nama database adalah my_db dan nama tabel adalah jurusan.
Struktur Database yang akan digunakan untuk menampung data pada Database.
1
Terlihat pada database tersebut sudah terisi beberapa data yang akan ditampilkan pada
Chart
 Pada tahap ini adalah Download Library HighChart. Stelah Library berhasil anda Download
pilih salah satu type dari Chart yang ingin anda gunakan. Pada modul ini tipe Chart yang
digunakan adalah type Pie Basic Chart.
Bagian yang perlu anda perhatikan pada bagian ini adalah bagian Series karena pada
bagian inilah data ditampilkan pada Chrat. Yang perlu dilakukan pada tahap ini adalah
melakukan edit dengan kode PHP pada bagian Series sehingga data yang ditampilkan bisa
Dinamis dari Database. Berikut adalah bagian Series pada Chart Pie Basic pada HighChart
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
2
}]
Gambar di atas menunjukan bahwa instalasi HighChart dengan tipe Pie Basic berhasil
terinstal.
 Seperti pada tahap sebelumnya jika Chart sudah terinstalasi dengan benar maka akan
muncul tampilan Chart secara default seperti pada tampilan pada langkah sebelumnya.
Pada tahap ini yang harus dilakukan adalah melakukan Editing kode dari contoh-contoh
Chart yang ada untuk memudahkan. Selanjutnya adalah melakukan Editing dengan kode
PHP pada kode Series dan tampilan kode kan tampak seperti berikut.
Kode pada config.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_db";
$conn = mysqli_connect($servername, $username, $password,$dbname);
if (!$conn) {
die("Koneksi Gagal: " . mysqli_connect_error());
}
3
series: [{
name: 'Brands',
colorByPoint: true,
data: [
<?php
include 'config.php';
$sql='SELECT * FROM jurusan';
$query=mysqli_query($conn,$sql);
while ($row = mysqli_fetch_array($query)){
?>
{
name: '<?php echo $row['jurusan_nama']; ?>',
y: <?php echo $row['jurusan_mahasiswa']; ?>
},
<?php
}
?>
]
}]
Gambar Pie Basic Chart di atas menunjukan bahwa data pada database yang telah
dimasukan berhasil di tampilkan pada Chart.
4
WORKSHOP
1. Buatlah data Dummy transaksi pada Database di komputer Anda kemudian tampilkan pada
Chart dengan type Chart yang sesuai.
5