Membuat Chart/Diagram Dengan PHP

Membuat Chart/Diagram Dengan PHP - Chart ataupun diagram merupakan suatu gambaran untuk memperlihatkan atau menerangkan suatu data yang akan disajikan. Atau definis lainnya adalah lambang-lambang tertentu yang dapat dipakai untuk menjelaskan sarana, prosedur serta kegiatan - kegiatan yang sudah biasa dilaksanakan dalam suatu sistem. 

Sebelumnya saya juga telah membahas tentang Melakukan Print PDF dengan Menggunakan Library TCPDF. Pada kesempatan kali ini saya akan membahas bagaimana cara membuat chart/diagram dengan menggunakan bahasa pemrograman php, dengan tidak lain disini saya memanfaatkan library chart dari framework bootsrapp. Disini saya akan membahas bagaimana caranya untuk menampilkan chart dari suatu pegawai berdasrkan golongan darahnya.

Yang harus anda lakukan pertama yaitu dengan membuat file index.php, chart-by-gol-darah.php, koneksi.php serta library chart sebagai library untuk menampilkan data dalam bentuk chart/diagram. Kurang lebih file yang digunakan seperti gambar berikut ini.

Berikut adalah script dari file index.php, chart-by-gol-darah.php dan koneksi.php.

1. Index.php

<section class="content-header">    <center><h1><a href="chart-by-gol-darah.php">Chart Golongan Darah<a></h1></center></section><h4><center>Klik link di atas</center></h4>

2. chart-by-gol-darah.php

<section class="content-header">    <h1>Chart<small> Golongan Darah</small></h1>    <h4><a href="index.php">Back<a></h4></section><section class="content"> <div class="row">        <div class="col-xs-12 table-responsive"> <div class="box box-primary"> <section class="content"> <div id='container'></div> </section> <div class="clearfix"></div> </div> </div> </div></section><!-- Chart --><script src="chart/jquery.min.js" type="text/javascript"></script><script src="chart/highcharts.js" type="text/javascript"></script><script type="text/javascript"> var chart1; // globally available $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column' },    title: { text: 'Chart Data Pegawai Berdasarkan Golongan Darah' }, xAxis: { categories: ['Golongan Darah'] }, yAxis: { title: { text: 'Jumlah Pegawai' } }, series:              [ <?php  include "koneksi.php"; $sql   = "SELECT gol_darah FROM tb_pegawai GROUP BY gol_darah"; $query = mysql_query( $sql )  or die(mysql_error()); while( $ret = mysql_fetch_array( $query ) ){ $gol_darah =$ret['gol_darah']; $sql_jumlah   = "SELECT * FROM tb_pegawai WHERE gol_darah='$gol_darah'";         $query_jumlah = mysql_query( $sql_jumlah ) or die(mysql_error()); $data = mysql_num_rows( $query_jumlah );                 ?> { name: '<?php echo $gol_darah; ?>', data: [<?php echo $data; ?>] }, <?php  }  ?> ] }); }); </script>

3. koneksi.php

<?php $Open = mysql_connect("localhost","root",""); if (!$Open){ die ("Koneksi ke Engine MySQL Gagal !<br>"); } $Koneksi = mysql_select_db("chart"); if (!$Koneksi){ die ("Koneksi ke Database Gagal !"); }?>

4. Untuk file library chart dan database silahkan anda download di akhir postingan ini.

5. Setelah semuanya selesai kemudian import database-nya dengan nama database "chart" (tanpa tanda petik) sebelumnya download telebih dahulu file databasenya di akhir artikel.

6. Masukan juga file "library chart" nya yang sudah anda download tadi bersama databasenya ke folder htdocs yang anda buat.

7. Setelah semuanya selesai silahkan melakukan pemanggilan melalui browser yang anda pakai, disini saya membuat folder htdocs dengan nama "chart", sehingga dilakukan pemanggilan dengan "localhost/chart"

8. Jika berhasil maka akan tampil seperti gambar di bawah ini, dan kemudian "klik Chart Golongan Darah"

9. Dan akan tampil hasil akhirnya seperti gambar berikut.

Jika ada yang kurang dipahami silahkan untuk memberikan komentarnya, semoga artikel yang kurang tertata dan sulit dipahami ini dapat bermanfaat.

Terimaskasih telah berkunjung ke website ini, jika butuh jasa pembuatan aplikasi murah tapi berkualitas silahkan langsung hubungi kami melalui menu kontak, untuk sekedar melihat produk-produk dari kami silahkan pilih menu produk.

Download File Library Chart dan database 

Share :