Buscar

Membuat Grafik dengan Menggunakan Highcharts

Hai teman,
sudah lama sekali saya tidak menulis, akhir-akhir ini lumayan sibuk. Hehe...
Kali ini saya akan berbagi coding membuat grafik sederhana menggunakan Highcharts.
Ikuti langkah-langkahnya yuuu.

Seperti biasa yang pertama kita lakukan adalah membuat database, buat database dengan nama penjualan. Lalu buat tabel sederhana dan beri nama tabel penjualan
Setelah itu buat struktur tabel dan isi tabel seperti di bawah ini

Lalu  buat nama file config.php , dan isikan coding seperti di bawah ini:
<?php

 //defined('ROOT') or die('');
 
 define('db_host','localhost');
 define('db_user','root');
 define('db_pass','');
 define('db_name','penjualan');
 
 mysql_connect(db_host,db_user,db_pass);
 mysql_select_db(db_name);
 
?>

Selanjutnya kita buat file dengan nama file grafik.php dan isi seperti di bawah ini :
<html>
 <head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/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: 'Grafik Penjualan Kamera '
         },
         xAxis: {
            categories: ['brand']
         },
         yAxis: {
            title: {
               text: 'Jumlah terjual'
            }
         },
              series:             
            [
            <?php 
         include('config.php');
           $sql   = "SELECT brand  FROM penjualan";
            $query = mysql_query( $sql )  or die(mysql_error());
            while( $ret = mysql_fetch_array( $query ) ){
             $brand=$ret['brand'];                     
                 $sql_jumlah   = "SELECT jumlah FROM penjualan WHERE brand='$brand'";        
                 $query_jumlah = mysql_query( $sql_jumlah ) or die(mysql_error());
                 while( $data = mysql_fetch_array( $query_jumlah ) ){
                    $jumlah = $data['jumlah'];                 
                  }             
                  ?>
                  {
                      name: '<?php echo $brand; ?>',
                      data: [<?php echo $jumlah; ?>]
                  },
                  <?php } ?>
            ]
      });
   }); 
</script>
 </head>
 <body>
  <div id='container'></div>  
 </body>
</html>

Jangan lupa download folder js lalu simpan di dalam folder aplikasi grafik kamu. klik DOWNLOAD.

Hasilnya seperti di bawah ini :


Selamat mencoba. Semoga bermanfaat :)

1 comments:

rama dian

Assalamua alaikum...
Teh, maaf...
Link download nya sudah tidak berlaku...

Posting Komentar