Koneksi Chart Ke Database Dengan PHP

Hai mblo :'v

Kali ini ana akan kasih trik gimana cara mengkoneksikan database ke dalam chart. Tapi, kali ini kita akan menggunakan amCharts sebagai library chart nya dan yang akan menjadi penghubung nya adalah PHP Native. Oke, langsung disimak ya turorialnya :)

Pertama, buat database dengan perintah seperti di bawah ini.

mysql> create database sample_chart;

Kedua, buat table dengan perintah dan field seperti di bawah ini.

mysql> create table nominal(
    -> id int(15) not null auto_increment primary key,
    -> jumlah int(15) not null,
    -> tanggal date not null);

Ketiga, untuk mempersingkat waktu, kita akan langsung memasukan 6 record ke dalam table nominal.

+----+--------+------------+
| id | jumlah | tanggal    |
+----+--------+------------+
|  1 |  70000 | 2015-05-19 |
|  2 |  60000 | 2015-05-19 |
|  3 |  50000 | 2015-05-19 |
|  4 |  10000 | 2015-05-19 |
|  5 |  20000 | 2015-05-19 |
|  6 |  30000 | 2015-05-19 |
+----+--------+------------+

Keempat, buat folder SampleChart pada htdocs dengan struktur seperti gambar di bawah ini.

Kelima, masukan source code di bawah ini pada koneksi.php .

<?php
class chart extends PDO{
	private $engine;
	private $host;
	private $database;
	private $user;
	private $pass;
	private $result;

	public function __construct()
	{
		$this->engine = 'mysql';
		$this->host = 'localhost';
		$this->database = 'sample_chart';
		$this->user = 'root';
		$this->pass = '';
		$dns = $this->engine.':dbname='.$this->database.";host=".$this->host;
		parent::__construct($dns,$this->user,$this->pass);
	}

	public function select($table, $rows, $where = null, $order = null, $limit = null)
	{
		$command = 'SELECT '.$rows.' FROM '.$table;
		if($where != null)
			$command .= ' WHERE '.$where;
		if($order != null)
			$command .= ' ORDER BY '.$order;
		if($limit != null)
			$command .= ' LIMIT '.$limit;

			$query = parent::prepare($command);
			$query->execute();

			$posts = array();
			while($row = $query->fetch(PDO::FETCH_ASSOC))
			{
				$posts[] = $row;
			}
			return $this->result = $posts;
	}

	public function getResult()
	{
		return $this->result;
	}
}
?>

Keenam, masukan source code di bawah ini pada index.php .

<?php
include "koneksi.php";
$db = new chart();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Chart - Revze</title>
<style type="text/css">
#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}		
#wrapper {
	max-width   : 1000px;
	margin      : 30px auto;
}			
</style>
</head>
<body>
<div id="wrapper">
<div id="chartdiv"></div>
</div>
</body>
</html>

Ketujuh, buka http://amcharts.com , lalu pilih menu DEMOS kemudian pilih submenu Charts and Maps

Kedelapan, pilih chart dengan cara klik pada chart yang diinginkan (di tutor kali ini ana memilih Simple Column Chart)

Kesembilan, kamu akan diarahkan ke halaman chart yang tadi kamu pilih, kemudia klik tombol Edit lalu pada menu Javascript copy semua source code yang tersedia.

Kesepuluh, paste source code pada menu Javascript tadi sebelum tag <div id="chartdiv"> pada halaman index.php .

Kesebelas, kembali lagi ke halaman chart yang dipilih, sekarang kita pilih menu Resources, kemudian copy semua source code yang tersedia.

Keduabelas, paste source code pada menu Resources tadi sebelum tag </head> pada halaman index.php .

Ketigabelas, ubah source code pada menu Javascript yang telah dipaste tadi, menjadi seperti di bawah ini.

<script type="text/javascript">
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ 
  <?php
  $db->select("nominal","*");
  $data = $db->getResult();
  for($i=0;$i<sizeof($data);$i++)
  {
  ?>
  {
    "country": <?php echo '"'.$data[$i]['tanggal'].'"'; ?>,
    "visits": <?php echo $data[$i]['jumlah']; ?>
  },
  <?php
  }
  ?>
  ],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

} );
</script>

Terakhir, dan inilah tampilan akhir nya \:'v/

CATATAN :

- Jika chart tidak muncul berarti kamu sedang offline / kamu tidak terkoneksi ke internet, cara untuk membuatnya agar bisa muncul saat kamu sedang offline adalah kamu harus simpan semua file Javascript yang ada pada menu Resource di sebuah folder atau boleh di luar (JANGAN DILUAR FOLDER SampleChart).

- Kamu bisa pilih chart lain yang menurut kamu lebih keren dengan menyesuaikan pada kodingan for() di javascript pemanggil chart nya dan pada file Javascript di menu Resource.

Sekian tutor kali ini, semoga bisa lebih bermanfaat..... yeay \:v/




Thursday, 17 Sep 2015 12:37 PM Revando
Sign In
Sign In to Your Account :)
Sign In or Sign Up
 
Follow Us on Twitter
Find Us on Facebook