Cara menggunakan line chart php mysql

Setelah sekian lama mencari-cari tutorial untuk membuat line chart yang datanya berasal dari database, akhirnya menemukan tutorial lengkap dan mudah dipahami di www.batekom.com.

Mungkin banyak dari rekan-rekan yang juga mencari cara agar data dari database dapat ditampilkan di line chart.

Banyak jenis chart yang tersedia untuk membuat grafik, salah satunya yang akan kita gunakan yaitu highchart. Kita dapat melihat sampel dan download library langsung situs resmi di www.highchart.com.

saya mengambil contoh untuk membuat sebuah diagram penjualan perbulan. langkah pertama kita buat database yang digunakan untuk menyimpan data yang akan ditampilkan. Setelah database di buat, selanjutnya buat tabel dengan nama rekapjual (sesuai selera). tabel digunakan untuk menyimpan data-data hasil pendapatan perbulan. Berikut query dalam pembuatan tabel rekapjual.

CREATE TABLE `rekapjual` (

`kode` int(5) NOT NULL AUTO_INCREMENT,

`tanggal` date DEFAULT NULL,

`total` double DEFAULT NULL,

PRIMARY KEY (`kode`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Kemudian isi tabel dengan data (sesuai selera)

insert into `rekapjual`(`kode`,`tanggal`,`total`) values

(1,'2015-01-28',2000000),(2,'2015-02-28',5000000),

(3,'2015-03-28',5030000),(4,'2015-04-28',2350000),

(5,'2015-05-28',5030000),(6,'2015-06-28',1320000),

(7,'2015-07-28',7170000),(8,'2015-08-28',8130000),

(9,'2015-09-28',5050000);

Siapkan directory baru pada folder htdocs (jika menggunakan xampp). lalu buat file koneksi.php untuk terhubung dengan database mysql.

<?php

mysql_connect("localhost","root","") or die ("Koneksi Gagal");

mysql_select_db("batekom_db") or die ("Database Tidak Terakses");

?>

kemudian buat file utama index.php.

<?php

include "koneksi.php";

$k=mysql_query("select * from rekapjual");

$q=mysql_query("select date_format(tanggal,'%b') as bulan from rekapjual");

?>

<script src="js/jquery.min.js"></script>

<script src="js/highcharts.js"></script>

<script src="js/exporting.js"></script>

 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/blog-post.css" rel="stylesheet">

<script type="text/javascript">

$(function () {

$('#view').highcharts({

title: {

text: 'Data Penjualan per bulan',

x: -20

},

subtitle: {

text: '',

x: -20

},

xAxis: {

categories: [<?php while($r=mysql_fetch_array($q)){ echo "'".$r["bulan"]."',";}?>]

},

yAxis: {

title: {

text: 'Jumlah'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

valueSuffix: ''

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

},

series: [{

name: 'Jumlah ',

data: [<?php while($t=mysql_fetch_array($k)){ echo $t["total"].",";}?>]

}]

});

</script>

<div id="view" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Agar program dapat berjalan maka perlu ditambahkan beberapa library antara lain: koneksi.php (yang sudah dibuat sebelumnya), jquery (download), highcharts.js dan exporting.js (download di situs resmi).