Line Chart dengan PHP

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.

1 2 3 4 5 6

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)

1 2 3 4 5 6

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.

1 2 3 4

<?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.

1 2 3 4 5 6 7 8 9 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 45 46 47 48 49 50 51 52 53 54 55 56

<?php  //Include Koneksi  include "koneksi.php";  //Membuat Query  $k=mysql_query("select * from rekapjual");  $q=mysql_query("select date_format(tanggal,'%b') as bulan from rekapjual"); ?> <!-- File yang diperlukan dalam membuat chart --> <script src="js/jquery.min.js"></script> <script src="js/highcharts.js"></script> <script src="js/exporting.js"></script> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/blog-post.css" rel="stylesheet">       <script type="text/javascript"> $(function () {     $('#view').highcharts({         title: {             text: 'Data Penjualan per bulan',             x: -20 //center         },         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).

lineCharts

Selamat mencoba...

Thanks to http://www.batekom.com

souce program lengkap silahkan mengunjungi :
http://batekom.blogspot.com/2015/06/cara-membuat-diagram-garis-line-chart.html