Membuat Grafik Chart menggunakan PHP + Highchart

Candra Adi Putra

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

60 Responses

  1. Anonymous says:

    terimakasih sangat membantu

  2. zalfinm says:

    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

  3. cherryelf says:

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

  4. Anggi Wisnu says:

    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.

  5. Dara says:

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

  6. Apriyanto says:

    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

  7. johanes says:

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

  8. dana says:

    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

  9. eva says:

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

  10. Anonymous says:

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

  11. olis says:

    mas kok saya ga bisa download source lengkapnya ya…

  12. fatim says:

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

  13. Bayue Riders Psht says:

    mas untuk cara exportnya gmn?

  14. Dewangga Rizky says:

    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

  15. Andrian Nopri says:

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

  16. Cak Nun says:

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

    Terima kasih…

  17. Anonymous says:

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

  18. fahrul fanani g says:

    wah berhasil Gan (Y)

  19. Imam Bastomi says:

    manteb om…

  20. andi says:

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

  21. Anonymous says:

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

  22. ray says:

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

  23. Nendi says:

    Siip (y)

  24. niceboyz says:

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

  25. indraeedyedy says:

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

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

  27. Anonymous says:

    Thanks mas candra
    tutorialny keren ….

  28. Anonymous says:

    terima kasih sangat membantu dan bermanfaat.. sukses terus!

  29. Kristian says:

    THX tutornya mas! PKL saya terbantu sekali:D

  30. aji says:

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

    • Candra says:

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

    • aji says:

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

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

  31. Anonymous says:

    Kalo coding untuk menampilkan data perbulan berdasarkan
    Database???

  32. TALI__KUTANK says:

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

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

    • TALI__KUTANK says:

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

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

      udah SOLVED pak, Terima Kasih

  33. rizky says:

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

    • Candra Adi Putra says:

      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

  34. bagus says:

    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

  35. Anonymous says:

    mas kalau bkin highcharts yang pake CI ada gak?

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

  37. nuna says:

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

    • Candra Adi Putra says:

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

      , tingal kamu atur div containernya ini lebarnya berapa
  38. Kak Azmi says:

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

  39. fajar riyan says:

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

  40. Anonymous says:

    kok gak bisa jalan ya tuh scriptnya

  41. maul says:

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

      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

  42. agung says:

    mantap bro thks tutornya

Tinggalin komentar dong!