Membuat Grafik Chart menggunakan PHP + Highchart

Grafik penjualan smarphone  menggunakan PHP, MySQ dan Highchart

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


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);

2. Script PHP dan javascript untuk mengambil data dara database plus menampilkannya seagai grafik

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 } ?>
            ]
      });
   });	

Hasil grafik

Grafik penjualan smarphone menggunakan PHP, MySQ dan Highchart

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.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

58 thoughts on “Membuat Grafik Chart menggunakan PHP + Highchart”

  1. Terima kasih mas.. sangat membantu sekali. Saya cuma mau nanya mas, kalo misalkan disamping nama barang mau ada penambahan kalimat gimana yah mas..

    misal.. di contoh grafiknya kan ada merk samsung dengan jumlah barang 80.
    Nah, saya mau menambahkan harga barangnya mas.

    jadi pas kursor digeser ke grafik. isi infonya…
    merk
    Samsung : 80
    harga : Rp. 90,000,00

    Terima kasih.. kurang lebihnya saya mohon maaf.

  2. mas, saya tanya dong, kalo contoh buat grafik scatter gimana ya mas, biar data nya juga bisa diambil dari database..??

  3. Terima kasih banyak sebelumnya buat Mas Candra, atas kesediaanya sharing ilmunya. Webnya sgt bermanfaat. saya sudah berhasil menjalankan script dr mas candra. tp ada yang saya bingung.

    grafik ini kan pakai yang Basic line ya (http://www.highcharts.com/demo/line-basic). script di highchart kan dimulai dengan baris seperti ini :

    $(function () {
    $(‘#container’).highcharts({

    tapi script dr Mas Candra dimulai dg baris berikut, dimana baris berikut tidak ada di script asli dr highchart.

    $(function () {
    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: ‘container’, //letakan grafik di div id container
    //Type grafik, anda bisa ganti menjadi area,bar,column dan bar
    type: ‘line’,
    marginRight: 130,
    marginBottom: 25
    },
    ….

    saya menyimpulkan, Berarti script yg di highchart itu tidak bisa copy paste langsung jalan. jd harus disesuaikan dulu/ditambahi bbrp syntax baru bisa jalan. Karena saya mencoba yang Solid gauge, scriptnnya sama persis dg yg di http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/ tidak bisa jalan.

    Mohon pencerahannya ya Mas. terima kasih banyak

  4. gini mas saya kan ingin membuat grafik dari data desa yang sama tapi belum berbentuk jumlah angka apa ada scrip biar menjumlah data yang sama dallam isi kolom di database

  5. terimakasih mas udah ngepost tutorial yang bermanfaat.,
    ini saya ada tugas kuliah mengenai grafik.
    contoh tugasnya seperti ini.
    misalkan ada data penjualan, form terdiri dari 3 kombo box . kombox pertama berisi bulan, combo box 2 berisi tahun, combo box ke 3 berisi nama ponsel. dan satu tombol proses.

    misalkan kombo box pertama saya pilih bulan : juli combo box 2 tahun :2015 nama ponsel : nokia setelah kombo bok sudah ter isi saya klik tombol proses, maka grafik otomatis muncul.
    bagaimana ya mas cara memunculkan grafik setelah memilih ketiga kombo box tersebut???

  6. Mas, ada contoh penggunaan type pie chart with drill down? Saya coba menggunakan tutorial yang ada di highchart setelah saya coba di localhost saya malah ga jalan (blank) . mohon bimbinganya gan…

    sementara saya sudah berhasil menggunakan type line

  7. makasih ya om,, yg kayak om gini in yg mesti di do’ain.. moga sehat terus om,, biar bisa terus memberi manfaat dg ilmunya..

    1. ini yg di bagian atas. .

      ; short_open_tag
      ; Default Value: On
      ; Development Value: Off
      ; Production Value: Off

      yg dibagian bawah sudah saya on kan, tetapi masih tidak muncul ap2. .

      short_open_tag = On

      dibawah ini source code nya. .

      var chart1; // globally available
      $(document).ready(function() {
      chart1 = new Highcharts.Chart({
      chart: {
      renderTo: ‘grafik’,
      type: ‘column’
      },
      title: {
      text: ‘GRAFIK PROSUKSI PUPUK UPPO’
      },
      xAxis: {
      categories: [‘Tanggal’]
      },
      yAxis: {
      title: {
      text: ‘Jumlah Stok Pupuk UPPO’
      }
      },
      series:

      ='”.$tgl_awal.”‘ and DATE_FORMAT (tgl_penggudangan, ‘%d/%m/%Y’)
      {
      name: ”,
      data: []
      },

      ]
      });
      });

  8. wah, nambah lagi nih ilmu saya, terima kasih mas,
    ini saya ada contoh kasus seperti ini, mohon bantuannya :
    saya memiliki 5 tabel dan tiap – tiap tabel tersebut mempunyai field contoh “kecamatan”, nah saya telah berhasil menghitung total kecamatan tersebut menggunakan fungsi “count” persoalannya yaitu tiap – tiap tabel tersebut tidak memiliki relasi, jadi harus di count satu – satu, yang mau saya tanyakan bagaimana caranya supaya hasil count tersebut di implementasikan dengan highchart tersebut [mungkin ada contoh kode sql-nya] ?

    berikut kode sql yang telah saya ganti – cuman masih belum berjalan –

    $sql_jumlah = “SELECT COUNT(kecamatan) FROM data_kecamatan_1 WHERE data_kecamatan_1.lokasi = ‘$namakec'”; << ini kan hanya count satu saja, nah untuk menghitung 5 tabel bagaimana caranya, terima kasih.

    1. simple, masukan hasil querynya kedalam array. baru masukan ke highchart. kalau bingung, belajar array lagi diphp

    2. Terima kasih pak, sudah saya coba menggunakan array, cuman ada persoalan baru lagi yang muncul, kenapa tidak pewarnaannya tidak selain biru tidak mau dieksekusi ?

      Berikut detil kode yang sudah saya buat, mohon dikoreksi jika salah :

      Coba Array Highcharts

      var chart;
      $(document).ready(function() {
      chart = new Highcharts.Chart({
      chart: {
      renderTo: ‘container’,
      },
      title: {
      text: ‘COBA ARRAY HIGHCHARTS’
      },
      xAxis: [{
      categories: [‘TEST ARRAY’],
      }],
      yAxis: [{
      labels: {
      formatter: function() {
      return this.value + ”;
      },
      style: {
      color: ‘#89A54E’
      }
      },
      title: {
      text: ‘Jumlah’,
      style: {
      color: ‘#89A54E’
      }
      }
      }],

      series: [{
      name: ‘ARAI KESATU’,
      color: ‘#4572A7’,
      type: ‘column’,
      data: []
      }, {
      name: ‘ARAI KEDUA’,
      color: ‘#89A54E’,
      type: ‘column’,
      data: []
      }, {
      name: ‘ARAI KETIGA’,
      color: ‘#000000’,
      type: ‘column’,
      data: []
      }]
      });
      });

      berikut hasil screenshotnya :

    1. itu namanya realtime kan? jadi ada perubahan data di database langsung mengubah data di depan? itu ada tutorialnya, tapi di highchart.com. saya sendiri belum pernah nyoba

  9. gan mau tanya. range sumbu Y nya bisa menghasilkan angka2 tersebut menggunakan rumus apa ya? apakah jumlah barang*2/2 co/ ada 2 batang dan jumlah keduanya 15 * 2(jumlah batang/product) lalu dibagi 2 menghasilkan 15 sumbu Y Tertinggi? mohon pencerahannya keren gan grafiknya

  10. wah ,, mantap nie tutorial nya ..
    tapi saya mau nanyak ni ,, ane kan pnya daftar pengunjung ,, mau ane tampilan di chart nya date nya ,, date1,date2,date3 di masing2 chart gmn cara nya :

    mhon pencerahan nya ?

    1. bisa, cuman di atur div nya saja…dalam contoh ini, grafik akan digambakan di

      , tingal kamu atur div containernya ini lebarnya berapa
  11. mas bagus ni tutornya..:D
    mas numpang tanya donk..kalo mw sya tambahin fitur download ..supaya diagram yang di tampilkan bisa didownload jd jpg, pdf..gmn ya??maaf ni saya new bie jd mohon bimbingan nya :)

  12. bro ini, range sumbbu Y (jumlah terjual), klo nilainya kecil, misal nilai tertinggi nya 2,

    itu range nya jadi ada yang koma koma,

    3
    2.5
    2
    1.5
    1
    0.5

    gitu bro, caranya gimana?

    1. semua sudah diatur oleh highchart, tapi kalau anda ingin menyertakan data yang berkoma, gunakan format englsih misal data 1,5 tulislah 1.5 otomatis akan diplot dengan benar kok

Tinggalin komentar dong!