Hai para codinger selamat datang kembali di blog Dewa Coding 21 :)
Untuk kesempatan kali ini admin akan mem posting masih tentang seputar dunia PHP tentang Cara membuat grafik data dengan PHP, yah karna admin juga kan masih newbie jadi maaf-maaf lah kalo postingannya belum bisa disebut Dewa :D
Baik langsung saja kita ke pokok pembahasannya atau cara membuatnya, simple ko scriptnya karna yang admin posting sekarang itu masih sederhana atau dasarnya, biar sama anda bisa dikembangkan lebih bagus lagi jadi admin berharap agar anda tidak selalu memakai plugin atau memakai template orang tapi kita harus bisa buat sendiri.
1. Langkah pertama silahkan buat file Chart.php, fungsinya sebagai library untuk memanggil fungsi chartnya, setelah anda selesai membuat file Chart.php, silahkan masukkan script berikut.
<?php
class Chart{
private $data;
private $title;
public function __construct($data, $title='Data') {
$this->data = $data;
$this->title = $title;
}
public function show() {
$total = array_sum($this->data); ?>
<div class='grafik'>
<h2>Grafik Data</h2>
<table width='100%' cellpadding='3px'>
<tr>
<th><?php echo $this->title; ?></th>
<th colspan='2'>Persentase</th>
</tr>
<?php
foreach ($this->data as $row => $rows) {
$p = round($rows * 100 / $total, 1);
?>
<tr>
<td><?php echo $row; ?></td>
<td>
<div class='graph'>
<div class='bar' style='width: <?php echo round($p); ?>%;'>
<label><?php echo round($p); ?>%</label>
</div>
</div>
</td>
<td><?php echo $rows; ?></td>
</tr>
<?php
}
?>
<tr>
<td></td>
<td align='right'><b>Total</b></td>
<td><b><?php echo $total; ?></b></td>
</tr>
</table>
</div>
<?php
}
}
?>
class Chart{
private $data;
private $title;
public function __construct($data, $title='Data') {
$this->data = $data;
$this->title = $title;
}
public function show() {
$total = array_sum($this->data); ?>
<div class='grafik'>
<h2>Grafik Data</h2>
<table width='100%' cellpadding='3px'>
<tr>
<th><?php echo $this->title; ?></th>
<th colspan='2'>Persentase</th>
</tr>
<?php
foreach ($this->data as $row => $rows) {
$p = round($rows * 100 / $total, 1);
?>
<tr>
<td><?php echo $row; ?></td>
<td>
<div class='graph'>
<div class='bar' style='width: <?php echo round($p); ?>%;'>
<label><?php echo round($p); ?>%</label>
</div>
</div>
</td>
<td><?php echo $rows; ?></td>
</tr>
<?php
}
?>
<tr>
<td></td>
<td align='right'><b>Total</b></td>
<td><b><?php echo $total; ?></b></td>
</tr>
</table>
</div>
<?php
}
}
?>
2. selanjutnya silahkan buat kembali file index.php, fungsinya sebagai interface nya atau tampilan yang nanti akan di tampilkan pada browser anda, setelah anda selesai membuat silahkan masukkan kembali script berikut
<html>
<head>
<title>Grafik Data - Dewa Coding 21</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<?php
include "Chart.php";
/* Jumlah nilai dari setiap data */
$dat = array(
'A' => 12,
'B' => 20,
'C' => 54,
'D' => 34,
'E' => 70,
);
$bc = new Chart($dat);
$bc->show();
?>
</body>
</html>
<head>
<title>Grafik Data - Dewa Coding 21</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<?php
include "Chart.php";
/* Jumlah nilai dari setiap data */
$dat = array(
'A' => 12,
'B' => 20,
'C' => 54,
'D' => 34,
'E' => 70,
);
$bc = new Chart($dat);
$bc->show();
?>
</body>
</html>
3. Eittssss... Jangan lupa buat juga file style.css, fungsinya sebagai style untuk membuat visualisasinya, biar terlihat bagus kan kawan-kawan, soalnya kebanyakan client itu melihat tampilannya dulu baru sistemnya. bahkan ada juga client yang melihat tampilannya aja langsung mau :D setelah anda membuatnya silahkan masukkan script berikut.
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background: #2c3e50;
font-weight: 300;
font-size: 13px;
}
table {
width: 100%;
}
.grafik {
margin: 100px auto;
width: 500px;
background: #fff;
padding: 8px 10px;
border-radius: 3px;
}
.grafik h2{
color: #2a80b9;
text-transform: uppercase;
border-bottom: 1px solid #ecf0f1;
margin-top: 5px;
padding-bottom: 10px;
}
.grafik label {
color: #fff;
position: relative;
font-size: 13px;
}
.graph {
position: relative;
width: 400px;
font-size: 1px;
}
.bar {
display: block;
position: relative;
background: #2a80b9;
height: 25px;
}
Selesai sudah tutorial kali ini tentang cara membuat grafik data dengan PHP, simple kan scriptnya :D
Untuk source codenya bisa di download Disini / Here
Semoga bermanfaat yah kawan-kawan dan terima kasih juga sudah mengunjungi blog kami, Jangan lupa berkomentar :)
Cara membuat grafik data dengan PHP
4/
5
Oleh
Unknown
