04 January 2012

Contoh JQuery high chart dengan PHP membuat grafik yang menarik dan dinamis + contoh script

PENDAHULUAN


Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan menggunakan Jquery Highcarts, dapat didownload di Highchart pada web tersebut tampilannya statis dalam arti kalau kita mau merubah grafik maka kita harus merubah secara manual di file html-nya.
Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat langsung mengakses database MySQL.

LATAR BELAKANG


Atas permintaan teman yang meminta untuk dibuatkan skrip untuk menampilkan grafik, karena selama ini dia menggunakan access dan loadingnya sangat lama karena datanya menembus Gigabyte. Setelah berdiskusi akhirnya sepakat menggunakan PHP, MYSQL dan JQuery.

Kelebihannya lagi kita bisa menginstallnya di server kantor karena PHP dan MySQL merupakan server side program, sehingga komputer/ laptop kita ngak terbebani di komputer kita hanya menjalankan JQuery yang berbasis javascript yang merupakan client side program. hehehe...
 ^___^ b

IMPLEMENTASI


1. XAMPP (versi terbarunya 1.7.7) bisa didownload di http://www.apachefriends.org/en/xampp-windows.html
2.JQuery HighCart
Setelah lengkap kita akan memulainya:
<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>TCH Drop Rate vs TCH Traffic</title>

 <!-- 1. Add these JavaScript inclusions in the head of your page -->
 <script type="text/javascript" src="jquery/1.6.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/highcharts.js"></script>

 <!-- 1a) Optional: add a theme file -->
 <!--
  <script type="text/javascript" src="../js/themes/gray.js"></script>
 -->

 <!-- 1b) Optional: the exporting module -->
 <script type="text/javascript" src="js/modules/exporting.js"></script>


 <!-- 2. Add the JavaScript to initialize the chart on document ready -->
 <script type="text/javascript">

  var chart;
  $(document).ready(function() {
   chart = new Highcharts.Chart({
    chart: {
     renderTo: 'container',
     zoomType: 'xy'
    },
    title: {
     text: 'TCH Drop Rate vs TCH Traffic'
    },
    subtitle: {
     text: 'Source: Ericsson Statistik'
    },
    xAxis: [{
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    yAxis: [{ // Primary yAxis
     labels: {
      formatter: function() {
       return this.value +'';
      },
      style: {
       color: '#89A54E'
      }
     },
     title: {
      text: 'TCH Drop Rate (%)',
      style: {
       color: '#89A54E'
      }
     }
    }, { // Secondary yAxis
     title: {
      text: 'TCH Traffic',
      style: {
       color: '#4572A7'
      }
     },
     labels: {
      formatter: function() {
       return this.value +'';
      },
      style: {
       color: '#4572A7'
      }
     },
     opposite: true
    }],
    tooltip: {
     formatter: function() {
      return ''+
       this.x +': '+ this.y +
       (this.series.name == 'TCH Drop Rate' ? '' : '');
     }
    },
    legend: {
     layout: 'vertical',
     align: 'left',
     x: 100,
     verticalAlign: 'top',
     y: 50,
     floating: true,
     backgroundColor: '#FFFFFF'
    },
    series: [{
     name: 'TCH Traffic',
     color: '#4572A7',
     type: 'column',
     yAxis: 1,
     data: [49.9, 71.5, 99.9811, 129.2, 144.0, 176.0, 135.6, 148.5, 716.4, 194.1, 95.6, 54.4] 
   
    }, {
     name: 'TCH Drop Rate',
     color: '#89A54E',
     type: 'spline',
     data: [7.0, 6.9, 9.5, 14.5, 25.2, 21.5, 25.2, 10.5, 23.3, 18.3, 13.9, 9.6]
    }]
   });
  
  
  });
  
 </script>

</head>
<body>

 <!-- 3. Add the container -->
 <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

  
</body>
</html>

Skrip diatas adalah salah satu skrip high cart yang datanya sudah diganti namun masih statis dalam artian jika kita ingin mengubah datanya harus mengubah skrip HTML-nya secara manual.



Gambar html ini jika dijalankan.
Pada line 9 skrip diatas : mengisyaratkan bahwa skrip highcart.js harus ada disubfolder js, jika tidak maka tampilan akan blank.
Skrip line 93 dan 99 yang akan kita buat dinamis dalam artian data tersebut akan langsung diambil dari MySQL.

Membuat database dan table diMySql





Dengan database bernama fathan, jumlah table 1 statistik dengan 5 field:idstat,tchdroprate,tchtraffic,bulan dan tahun.

Skrip PHP


Kita cukup menambahkan ini pada awal skrip :
<?php
include "librari/koneksi.php";
$drop=array();
$traffic=array();
$sql = "SELECT * FROM statistik";
$qry = mysql_query($sql,$koneksi) or die ("Gagal Query - ".mysql_error());
while ($data=mysql_fetch_array($qry)){
//Atau bisa menggunakan: while($data=mysql_fetch_assoc($qry))
$drop[]  = $data['tchdroprate'];
$traffic[]  = $data['tchtraffic'];
}
//1.Membuat format tampilan: '7','6.9','9.5','14.5 '
//$tampildrop = "'".join("','",$drop)."'";
//2.Membuat format tampilan: 7 ,6.9 ,9.5 ,14.5 ,25.2
//$tampildrop  = join(" ,",$drop);
//3.Membuat format tampilan: 7, 6.9, 9.5, 14.5 , 25.2
//$tampildrop  =join(",  ",$drop);
$tampildrop  =join(",  ",$drop);
$tampiltraffic = "'".join("','",$traffic)."'";

echo "$tampildrop <br />";
echo "$tampiltraffic";
?>

Dan mengganti skrip html diatas dengan extension php dan menggubah line 93 dan 99 diatas menjadi:
93:
data: [<?php echo $tampiltraffic;?>]

99:
data: [<?php echo $tampildrop;?>]


Dan ini skrip koneksi.php yang akan mengkoneksikan php dengan my sql. Dan kalau kita lihat skrip php yang saya berikan pada line 2.
contoh script selengkapnya bisa anda download di SINI
Saya kasih bonus cara nambah, hapus dan menampilkan data menggunakan php.


Pertanyaan selanjutnya adalah bagaimana membuat label pada sumbu x menjadi vertical? karena jika datanya banyak pasti akan saling tindih





Caranya dengan menambahkan skrip ini pada x axis: (pada line 36)
 xAxis: [{
     labels:{
     rotation: -90
     },
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],


.

34 comments:

  1. You are really great Fathan, thank so much for your php and highcharts tutorial.

    Jainal

    ReplyDelete
  2. makasih tas tutorialnya sangat berguna banget,,,

    ReplyDelete
  3. Mau tanya Mas Fathan, sebelumnya terimakasih atas tutorialnya.
    Misal data dari mysql berubah terus alias dinamis bisa gak grafiknya ikut berubah terus.

    Terimakasih.

    ReplyDelete
  4. tutorial nya sangat berguna kakak....

    terima kasih banyak

    salam sukses dari saya

    ReplyDelete
  5. mantap mas bro.. sip tutorialnya..top markotop dech..

    ReplyDelete
  6. thx info nya gan , but kalo y dinamis nya ga muncul nih gan chart nya,, give me solution, thx.,,,

    ReplyDelete
  7. love you so much, i find tis tutorial for so long. Finally i know how to use highcharts. Thank you so much!! :)

    ReplyDelete
  8. tks agan, ane coba dulu yaks.. ijin nyedot gan..

    ReplyDelete
  9. thanks mas bro atas postingannya..
    tp saya mau tanya,klo saya gak konek internet,chart nya gak muncul..jd harus konek ke internet dulu ya baru bisa memakai jquery highchart??

    ReplyDelete
    Replies
    1. itu karena file .js-nya ngambil di server google, caranya biar gak online ya mengopy source code .js yg ada di server google.
      1.coba buka dengan notepad atau editor lainnya file TCH_Drop_Rate_vs_TCH_Traffic.htm yg saya sertakan pada link download.

      2. coba perhatikan line 8:http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
      masuklah ke link tersebut dan copy semua source codenya.

      3. buka notepad dan paste semua source codenya kemudian beri nama :jquery161.js dan simpan pada folder js

      4. ubah line 8:
      http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

      menjadi

      js/jquery161.js


      Selesai...
      :)

      Delete
  10. terima kasih atas postingannya..
    untuk yang statis,saya ubah ke php kok chart nya gak muncul ya mas ?? mohon pencerahannya mas.terima kasih mas.

    ReplyDelete
    Replies
    1. kan di atas sudah saya jelaskan, karena jsnya ngambil dari server google jadi harus online, kalau mau tdk OL ikutin cara di atas...

      Delete
  11. Mas Gmn caranya menampilkan data grafik x dan y yang berasal dari database. aku cari2 yang contoh dari hightchar belum ketemu yang koordinat x'nya dari database.

    ReplyDelete
    Replies
    1. silahkan download contoh yang saya sertakan di atas mas...

      Delete
  12. mas saya udah buat database laporan hasil produksi
    tpi biar bisa jdi grafik data yang dari databasenya kek mna mas

    ReplyDelete
    Replies
    1. dicoba2 aja mas contoh yang saya kasih...

      Delete
  13. saya punya sedikit masalah mas
    saya pengen format series (Y) supaya tampilnya begini 1.000 2.000 bukan 1K 2K dst
    gimana caranya ya ?

    sy ambil data dari mysql & ga tau gimana format series

    ReplyDelete
    Replies
    1. hmm.. bukannya itu data langsung di ambil dari mysql ubah saya data fieldnya dari 1k ke 1000 dst....

      Delete
  14. pak itu kan untuk database bulan-tahun di buat dalam field yg berbeda.gmn kl semisal tgl-bulan-tahun dibuat dlm 1 field dengan tipe date...sorce code ke dalam grafiknya spt apa? mksih untuk pencerahannya

    ReplyDelete
    Replies
    1. format date standard di mysql adalah yyyy-mm-dd, jadi kita buat skrip dulu untuk memecah2nya seperti:
      <?php
      $tglmysql = "2013-03-17";

      $tgl = substr($tglmysql,8,2);
      //ambil 2 character setelah 8 character dari kiri
      $bln = substr($tglmysql,5,2);
      $thn = substr($tglmysql,0,4);
      echo "$tgl &nbsp $bln &nbsp $thn";
      //maka akan ditampilkan 17 03 2013
      ?>

      semoga membantu ^^

      Delete
  15. mas fathan, mau nanya gmn caranya legend pada grafik bisa berada di bawah sumbu x, saya sdh coba edit script menjadi allign"bottom"tapi masih belum berhasil bahkan hilang..thnks mas

    ReplyDelete
  16. mas saya mw tanya, bagaimana jika script php nya menggunakan looping 'for'. bagaimana cara memasukkan categories: [bulan], dan data: [].

    ReplyDelete
  17. Mantap gan. Terima kasih. semoga jadi amal soleh. :)

    ReplyDelete
    Replies
    1. Amin..
      Terima kasih sudah mau berkunjung :)

      Delete
  18. kalau pake xampp 1.8 bisa ga y, kok saya coba g muncul apa2?
    thx

    ReplyDelete
  19. bisa, itu karena ada file yg ngelink ke server google jd harus online, klo mau filenya di copy ke lokal dulu.. caranya liat di komentar di atas gan..

    ReplyDelete
  20. makasih byk gan... membantu bgt nie

    ReplyDelete
  21. kalo menggunakan svg gimana ya gan ?

    ReplyDelete
  22. mau nanya nehh.. ini g support sm php 5.1 iah?

    ReplyDelete
  23. gan mau tanya soal monitoring beban listrik
    saya mau nampilkan grafik secara real time yang datanya itu dari arduino kira-kira databasenya gmna ya karena secara realtime.terimakasih

    ReplyDelete
  24. Gan saya mau tanya...
    kalo catagorinya di pindah ke sumbu y bagai mana?
    dan mohon di jelaskan syntag javascriptnya... sya belum paham

    ReplyDelete
  25. Supaya labelnya gak sampai pada grafik saat di rotasi gimana yah???

    ReplyDelete