Cara Membuat Grafik Line Dengan Plugin Dari Highcharts

kamarin saya sudah membuat tutorial Cara Membuat Grafik Sendiri di PHP kali ini saya akan share tutorial cara membuat grafik line, grafik line pada umumnya sering digunakan untuk menggambarkan suatu perkembangan atau perubahan dari waktu ke waktu.
dalam tutorial ini saya menggunakan plugin dari highcharts sebetulnya hightchart sudah menyediakan banyak type chart dan salah satunya adalah line. highcharts sendiri menggunakan format JSON dari javascript, jika anda belum tau apa itu format JSON saya sarankan untuk membaca artikel ini Pengertian JSON dan Cara Menggunakan JSON Di Javascript
selain membutuhkan plugin dari highcharts sendiri anda jaga membutuhkan plugin dari jquery, anda bisa mendownloadnya disini atau bisa menyalin kode berikut

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

untuk plugin dari highcharts anda bisa mendowloadnya disini atau bisa menyalin kode berikut

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>

sekarang buat project dengan nama terserah anda, kemudian salin kode berikut dan simpan file dengan nama index.php

<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK LINE DENGAN PLUGIN HIGHCHART</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
.container { margin: auto; padding: 5px; width: 800px; border: 2px solid #DBDBDB; }
</style>
</head>
<body>
<div class="container">
<div class="grafik" style="width:100%; height:400px;"></div>
</div>
<script type="text/javascript">
$('.grafik').highcharts({
 chart: {
  type: 'line',
  marginTop: 80
 },
 credits: {
  enabled: false
 }, 
 tooltip: {
  shared: true,
  crosshairs: true,
  headerFormat: '<b>{point.key}</b>< br />'
 },
 title: {
  text: 'JUMLAH SISWA SD TRITUNGGAL'
 },
 subtitle: {
  text: 'TAHUN 2013 - 2015'
 },
 xAxis: {
  categories: [2013,2014,2015],
  labels: {
   rotation: 0,
   align: 'right',
   style: {
    fontSize: '10px',
    fontFamily: 'Verdana, sans-serif'
   }
  }
 },
 legend: {
  enabled: true
 },
 series: [{
  "name":"pria",
  "data":[240,318,291]
  },{
  "name":"wanita",
  "data":[229,340,337]
 }]
});
</script>
</body>
</html>

lalu bagaimana jika data yang akan di jadikan grafik dari database, pertama buat database dengan nama terserah anda, kemudian buat table periode dan datas, salin kode berikut

-- ----------------------------
-- Table structure for datas
-- ----------------------------
DROP TABLE IF EXISTS `datas`;
CREATE TABLE `datas` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `periode_id` int(11) DEFAULT NULL,
  `pria` int(11) DEFAULT NULL,
  `wanita` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of datas
-- ----------------------------
INSERT INTO `datas` VALUES ('1', '1', '240', '229');
INSERT INTO `datas` VALUES ('2', '2', '318', '340');
INSERT INTO `datas` VALUES ('3', '3', '291', '337');

-- ----------------------------
-- Table structure for periode
-- ----------------------------
DROP TABLE IF EXISTS `periode`;
CREATE TABLE `periode` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `periode` year(4) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of periode
-- ----------------------------
INSERT INTO `periode` VALUES ('1', '2013');
INSERT INTO `periode` VALUES ('2', '2014');
INSERT INTO `periode` VALUES ('3', '2015');

dalam hal ini anda harus menggunakan array di PHP menjadi JSON, jika anda belum tau cara menggunakan JSON di PHP silahkan baca dulu atrikel ini Cara Menggunakan JSON Di PHP, tapi jika anda sudah tau silahka salin kode berikut dan simpan file dengan nama index2.php

<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK LINE DENGAN PLUGIN HIGHCHART</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
.container { margin: auto; padding: 5px; width: 800px; border: 2px solid #DBDBDB; }
</style>
</head>
<body>
<div class="container">
<div class="grafik" style="width:100%; height:400px;"></div>
</div>
<?php
 // koneksi ke database
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'belajar_grafik';
 mysql_select_db($db, mysql_connect($host, $user, $pass));

 // array data
 $array_periode = array();
 $array_kategori = array();
 $array_series = array();
 $array_datas = array();

 // set attribute
 $array_attribute = array('pria', 'wanita');

 // cari periode
 $sql = 'SELECT * FROM periode';
 $rs = mysql_query($sql);

 while($row = mysql_fetch_array($rs)){
  $periode_id = $row['id'];
  $periode = $row['periode'];

  // set periode
  array_push($array_periode, array('id'=>$periode_id, 'periode'=>$periode));

  // set kategori
  array_push($array_kategori, $periode);
 }

 foreach($array_periode as $key=>$val){
  // set datas
  $array_datas[$val['periode']] = array();

  $sql = 'SELECT * FROM datas';
  $sql .= ' WHERE periode_id='.intval($val['id']);
  $rs = mysql_query($sql);

  while($row = mysql_fetch_array($rs)){
   $pria = $row['pria'];
   $wanita = $row['wanita'];

   // value datas
   $array_datas[$val['periode']]['pria'] = intval($pria);
   $array_datas[$val['periode']]['wanita'] = intval($wanita);
  }
 }

 // set nama series grafik
 foreach($array_attribute as $attribute){
  array_push($array_series, array('name'=>$attribute, 'data'=>array()));
 }

 // set value per series grafik
 foreach($array_kategori as $kategori){
  $i = 0;
  foreach($array_attribute as $attribute){
   array_push($array_series[$i]['data'], $array_datas[$kategori][$attribute]);

   $i++;
  }
 }
?>
<script type="text/javascript">
$('.grafik').highcharts({
 chart: {
  type: 'line',
  marginTop: 80
 },
 credits: {
  enabled: false
 }, 
 tooltip: {
  shared: true,
  crosshairs: true,
  headerFormat: '<b>{point.key}</b>< br />'
 },
 title: {
  text: 'JUMLAH SISWA SD TRITUNGGAL'
 },
 subtitle: {
  text: 'TAHUN 2013 - 2015'
 },
 xAxis: {
  categories: <?php echo json_encode($array_kategori); ?>,
  labels: {
   rotation: 0,
   align: 'right',
   style: {
    fontSize: '10px',
    fontFamily: 'Verdana, sans-serif'
   }
  }
 },
 legend: {
  enabled: true
 },
 series: <?php echo json_encode($array_series); ?>
});
</script>
</body>
</html>

Keterangan :
- Ganti isi dari $user, $pass dan $db sesuai dengan username, password dan database anda.
setelah itu buka project anda dan alihkan link ke index2.php dan lihat hasilnya, akan sama seperti index.php
OK, sampai disini dulu tutorial kalli ini, selamat mencoba dan semoga bermanfaat.

Berbagi Via

Cara Membuat Grafik Line Dengan Plugin Dari Highcharts

Jangan lupa tinggalkan komentarnya ya :)

No comments:

Post a Comment