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.

Categories: jQueryPHP

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

61 Comments

ngurah · 6 May , 2019 at 11:57 am

ok mantap

Anonymous · 12 September , 2017 at 2:42 pm

terimakasih sangat membantu

zalfinm · 17 March , 2017 at 6:44 pm

pak mohon pencerahan nya

saya mau menampilkan “jumlah client” yang dilayani oleh “customer service”

hasil nya malah sperti ni
https://drive.google.com/open?id=0B3Qvtu0pSBzdZ3FGR3FyQ0RJbHc

var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
type: ‘column’
},
title: {
text: ‘Grafik Antrian CS ‘
},
xAxis: {
categories: [‘Customer Service’]
},
yAxis: {
title: {
text: ‘Jumlah Customer Service’
}
},
series:
[

{
name: ”,
data: []
},

]
});
});

terimakasih sebelumnya pak

salam luar biasa

cherryelf · 19 August , 2016 at 10:15 am

Kalau jumlahnya belum ada di database dan harus di count, dan pemanggilan apa seperti ini $jumlah = $data[‘count(tmpt_kej)’]; ?
Mohon bantuannya, Pak

Anggi Wisnu · 5 August , 2016 at 8:11 am

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.

Dara · 3 June , 2016 at 4:37 pm

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

Apriyanto · 20 March , 2016 at 6:37 am

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

johanes · 5 February , 2016 at 10:24 am

mas, mau tanya bagaimana membuat tabel dari suatu database oracle jika quary sudah ada

dana · 3 February , 2016 at 8:16 pm

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

eva · 18 January , 2016 at 10:47 pm

terima kasih banyak mas.. sangat membantu.. terima kasih terima kasih

Anonymous · 8 October , 2015 at 12:29 pm

Mas maskih buat sharenya kalo mau nampilin data berdasarkan thaun giman ya mas

olis · 5 September , 2015 at 5:12 pm

mas kok saya ga bisa download source lengkapnya ya…

fatim · 29 July , 2015 at 10:59 pm

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

    Candra Adi Putra · 30 July , 2015 at 5:15 pm

    kodenya PANJANG….

    fatim · 31 July , 2015 at 3:01 pm

    kalaw boleh saya minta contoh tutorial code nya mas.
    ini email saya : s1haf4@gmail.com
    mohon bantuannya

    Candra Adi Putra · 1 August , 2015 at 11:42 pm

    saya ga punya. saya cmn bilang…klo di implementasikan….kodex panjang

Bayue Riders Psht · 12 July , 2015 at 1:44 pm

mas untuk cara exportnya gmn?

Dewangga Rizky · 16 May , 2015 at 10:12 pm

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

Andrian Nopri · 14 April , 2015 at 8:56 pm

bro mau nanya dong. cara buat grfaik diagram cartesian gimana ya ? terima kasih

Cak Nun · 31 March , 2015 at 4:43 pm

gan… klo type chart-nya Speedometer gimana gan scriptnya ?.

Terima kasih…

Anonymous · 15 March , 2015 at 12:07 pm

izin download gan..
terimaksih banget nih,, top banget dah

fahrul fanani g · 7 March , 2015 at 1:56 pm

wah berhasil Gan (Y)

Imam Bastomi · 25 February , 2015 at 12:40 pm

manteb om…

andi · 14 February , 2015 at 10:17 pm

maaf amas kalau buat yang dianamis bagaimana atau datanya diambil dari databse?
terima kasih

    Candra Adi Putra · 15 February , 2015 at 12:24 pm

    tutorial ini kan pake database juga mas .

Anonymous · 8 January , 2015 at 11:29 am

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

ray · 16 September , 2014 at 12:15 am

ini javascript nya di include dmn gan? kok bingung ya :p

Nendi · 24 August , 2014 at 10:49 pm

Siip (y)

niceboyz · 11 August , 2014 at 2:12 pm

gan mnt pencerahan gan kalo seumpama kita mau buat combinasi chart gimana ya gan. . ngambil data nya dari my sql . . .

indraeedyedy · 26 July , 2014 at 12:29 am

Mas Candra,..bagaimana meletakan pada sebuah tamplate,…mohon bantuannya misalkan saya menggunakan grafik yang mas buat PHP + Highchart

Elfin Saputra · 6 June , 2014 at 11:17 pm

gan di print preview tampil gak grafiknya…….????

Anonymous · 8 May , 2014 at 10:52 pm

Thanks mas candra
tutorialny keren ….

Anonymous · 23 February , 2014 at 3:35 pm

terima kasih sangat membantu dan bermanfaat.. sukses terus!

Kristian · 14 January , 2014 at 3:05 pm

THX tutornya mas! PKL saya terbantu sekali:D

    Kristian · 14 January , 2014 at 3:07 pm

    Tambahan : Simple dan responsive juga. Recommended tips

aji · 28 November , 2013 at 12:06 pm

kalau pake xampp 1.8 bisa gak ya. .ko aku coba gak keluar ap2. .thx

    Candra · 28 November , 2013 at 3:40 pm

    secara default short_open_tag di xampp di matikan, coba aktifkan short_open_tag =on di php.ini…

    aji · 30 November , 2013 at 1:54 pm

    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: []
    },

    ]
    });
    });

    aji · 2 December , 2013 at 3:50 pm

    untuk grafik solved mas, tapi jumlah datanya sama semua. .itu dikarenakan apa y mas?

Anonymous · 18 July , 2013 at 10:22 pm

Kalo coding untuk menampilkan data perbulan berdasarkan
Database???

TALI__KUTANK · 10 June , 2013 at 4:39 pm

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.

    Candra Adi Putra · 11 June , 2013 at 1:52 pm

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

    TALI__KUTANK · 12 June , 2013 at 4:42 pm

    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 :

    TALI__KUTANK · 12 June , 2013 at 4:44 pm

    jiah kok kepotong ya kode saya di komen ini [mungkin ada maksimalnya ya], untuk screenshotnya ada disini pak :

    http://i496.photobucket.com/albums/rr324/razor_x_photo/tanya-highcharts_zps509a748e.jpg

    TALI__KUTANK · 12 June , 2013 at 4:48 pm

    kode-nya ada di link ini pak
    http://jsfiddle.net/kimantep/TfVHa/

    TALI__KUTANK · 12 June , 2013 at 11:54 pm

    udah SOLVED pak, Terima Kasih

rizky · 20 May , 2013 at 12:13 pm

mas, kalo data nya biar terkoneksi ke database gimana, jdi otomatis berubah2 gitu??

    Candra Adi Putra · 21 May , 2013 at 11:11 pm

    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

bagus · 13 April , 2013 at 1:06 am

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

Anonymous · 4 March , 2013 at 11:18 am

mas kalau bkin highcharts yang pake CI ada gak?

Coretan Muttaqin1 · 25 February , 2013 at 10:08 pm

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 ?

nuna · 9 February , 2013 at 10:05 pm

itu kan nongolnya besar, bisa diatur jadi kecil misalnya jadi 1/4 halaman aja gitu?terimakasih

    Candra Adi Putra · 10 February , 2013 at 8:00 am

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

    , tingal kamu atur div containernya ini lebarnya berapa

Kak Azmi · 8 February , 2013 at 4:33 pm

Trims mas bro…. keren dan sangat membantu. web nya juga keren….

fajar riyan · 4 February , 2013 at 4:31 pm

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

Anonymous · 30 January , 2013 at 3:47 pm

kok gak bisa jalan ya tuh scriptnya

    Candra Adi Putra · 31 January , 2013 at 1:10 am

    pastikan short_open_tag=on di php.ini

maul · 25 January , 2013 at 2:42 pm

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?

    Candra Adi Putra · 31 January , 2013 at 1:14 am

    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

agung · 29 December , 2012 at 5:55 am

mantap bro thks tutornya

Mohon Isi komentar