Ini adalah tutorial keempat yang membahas
materi highchart. perbedaan dengan tutorial sebelumnya, kali ini kita
akan menggunakan data yang tersimpan didalam MySQL sebagai sumber data
untuk grafik yang akan kita buat. Kalau direview ulang, data di tutorial
sebelumnya diletakan manual di code javascriptnya. Nah, kali ini saya
akan menunjukan cara membuat grafik berbasis web dengan data yang
tersimpan di MySQL. Studi kasus untuk kasus se perti ini sangat banyak.
Contoh kasus yang membutuhkan grafik misalkan grafik nilai mahasiswa,
grafik penjualan, grafik pemasukan dan pengeluaran keuangan dan
sebagainya.
Untuk kasus yang saya angkat adalah kasus membuat grafik penjualan
smartphone di toko fiktif candraphone. Hal yang perlu diperhatikan,
tidak semua code saya tuliskan, hanya code yang penting saja yang akan
saya tunjukan. Kode lengkap bisa anda download dibagian bawah artikel
ini.
1. Membuat Script SQL
01
02
03
04
05
06
07
08
09
10
11
12
| CREATE TABLE IF NOT EXISTS `penjualan` ( `id` int (11) NOT NULL AUTO_INCREMENT, `merek` varchar (30) NOT NULL , `jumlah` int (11) NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; INSERT INTO `penjualan` (`id`, `merek`, `jumlah`) VALUES (1, 'Samsung' , 80), (2, 'Nokia' , 20), (3, 'Blackberry' , 40), (4, 'Apple' , 60); |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| var chart1; // globally available $(document).ready( function () { chart1 = new Highcharts.Chart({ chart: { renderTo: 'container' , type: 'column' }, title: { text: 'Grafik Penjualan ' }, xAxis: { categories: [ 'merek' ] }, yAxis: { title: { text: 'Jumlah terjual' } }, series: [ <?php //config.php adalah file koneksi database bagian ini dipakai //untuk mengambil data dari mysql include( 'config.php' ); $sql = "SELECT merek FROM penjualan" ; $query = mysql_query( $sql ) or die(mysql_error()); while ( $ret = mysql_fetch_array( $query ) ){ $merek=$ret[ 'merek' ]; $sql_jumlah = "SELECT jumlah FROM penjualan WHERE merek='$merek'" ; $query_jumlah = mysql_query( $sql_jumlah ) or die(mysql_error()); while ( $data = mysql_fetch_array( $query_jumlah ) ){ $jumlah = $data[ 'jumlah' ]; } ?> //data yang diambil dari database dimasukan ke variable nama dan data // { name: '<?php echo $merek; ?>' , data: [<?php echo $jumlah; ?>] }, <?php } ?> ] }); }); |
source code
Source code bisa anda download disini. Source code sudah termasuk file PHP lengkap, file koneksi, file javascript yang dibutuhkan dan file script sql.
Sumber : Klik
0 komentar:
Post a Comment