Home | PHP Tutorial | Simple Chart | FreeTutorialWebsite.com

Free Tutorial

Forum Discussion

Miscellanous

Members Area

Tree View

Newest Scripts

	SimpleChart
	by Administrator
	AJAX File Uploader
	by Administrator

Newest Templates

Newest User

	whiteforce
	on 17th of July 2010

	kuman
	on 11th of July 2010

	putri
	on 09th of July 2010

	acchunk
	on 20th of June 2010

	ISWAN
	on 17th of June 2010

Web Statistic

	Today	: 36
	This Month	: 984
	Total	: 80161
	Total Hits	: 153477
	Member	: 357
	Post Tutorial	: 35
	Post Forum	: 56
	Free Script	: 2
	Free Templates	: 76

PHP Tutorial
Simple Chart Share
by Administrator on 20 Jun 2009 - 13:19:20 lasted edit on 23 Jun 2009 - 10:40:00

Dengan diagram batang ini kita dapat membuat laporan sebuah data, baik dalam bentuk vertikal maupun horizontal..
Aplikasi ini dibangun dengan PHP dan menggunakan CSS sebagai style'a..
Selain itu anda dapat juga mengatur lebar serta tinggi dari diagram batang ini..

kmrin member kami, rastavara28 meminta untuk mempostkan tutorial membuat diagram batang, nah ini dia...

karena aplikasi ini menggunakan beberapa fungsi dan class, maka buat terlebih dahulu file class berikut...

pertama, buat file class.php

Code :

<?php
class maxChart {
var $data; // data array
var $type = 1; // Vertical:1 or Horizontal:0
var $title; // title of the chart
var $width = 300; // width
var $height = 200; // height
var $metaSpaceHorizontal = 60; // Total space needed for chart title + bar title + bar value
var $metaSpaceVertical = 60; // Total space needed for chart title + bar title + bar value
var $variousColors = false;

function maxChart($data){
$this->data = $data;
}

function displayChart($title='', $type, $width=300, $height=200, $variousColor=false){
$this->type = $type;
$this->title = $title;
$this->width = $width;
$this->height = $height;
$this->variousColors = $variousColor;

echo '<div class="chartbox" style="width:'.$this->width.'px; height:'.$this->height.'px;">
<h2>'.$this->title.'</h2>'."\r\n";

if ($this->type == 1) $this->drawVertical();
else $this->drawHorizontal();

echo ' </div>';

}

function getMaxDataValue(){
$max = 0;

foreach ($this->data as $key=>$value) {
if ($value > $max) $max = $value;
}

return $max;
}

function getElementNumber(){
return sizeof($this->data);
}

function drawVertical(){
$multi = ($this->height -$this->metaSpaceHorizontal) / $this->getMaxDataValue();
$max = $multi * $this->getMaxDataValue();
$barw = floor($this->width / $this->getElementNumber()) - 5;

$i = 1;

foreach ($this->data as $key=>$value) {
$b = floor($max - ($value*$multi));
$a = $max - $b;

if ($this->variousColors) $color = ($i % 5) + 1;
else $color = 1;
$i++;

echo ' <div class="barv">'."\r\n";
echo ' <div class="barvvalue" style="margin-top:'.$b.'px; width:'.$barw.'px;">'.$value.'</div>'."\r\n";
echo ' <div><img src="style/images/bar'.$color.'.png" style="width:'.$barw.'px; height:'.$a.'px;" /></div>'."\r\n";
echo ' <div class="barvvalue" style="width:'.$barw.'px;">'.$key.'</div>'."\r\n";
echo ' </div>'."\r\n";

}

}

function drawHorizontal(){
$multi = ($this->width-170) / $this->getMaxDataValue();
$max = $multi * $this->getMaxDataValue();
$barh = floor(($this->height - 35) / $this->getElementNumber());

$i = 1;

foreach ($this->data as $key=>$value) {
$b = floor($value*$multi);

if ($this->variousColors) $color = ($i % 5) + 1;
else $color = 1;
$i++;

echo ' <div class="barh" style="height:'.$barh.'px;">'."\r\n";
echo ' <div class="barhcaption" style="line-height:'.$barh.'px; width:90px;">'.$key.'</div>'."\r\n";
echo ' <div class="barhimage"><img src="style/images/barh'.$color.'.png" style="width:'.$b.'px; height:'.$barh.'px;" /></div>'."\r\n";
echo ' <div class="barhvalue" style="line-height:'.$barh.'px; width:30px;">'.$value.'</div>'."\r\n";
echo ' </div>';

}

}

}

?>

kedua, buat file index.php

Code :

<?php require_once('class.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Max's Chart</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><div id="header_main">FreeTutorialWebsite.com Simple Chart</div><div id="header_right"></div></div>

<div id="main">
<?php
$data['Jan'] = 112;
$data['Feb'] = 7;
$data['Marc'] = 22;
$data['Apr'] = 18;
$data['May'] = 2;
$data['Jun'] = 15;
$data['July'] = 45;
$data['Aug'] = 22;
$data['Sep'] = 99;
$data['Oct'] = 35;
$data['Nov'] = 72;
$data['Dec'] = 19;

$mc = new maxChart($data);
$mc->displayChart('Demo chart - 1',1,500,150);
echo "<br/><br/>";

$data1['today'] = 2;
$data1['this week'] = 45;
$data1['this month'] = 567;
$data1['total'] = 118;
$mc1 = new maxChart($data1);
$mc1->displayChart('Demo chart - 2',0,500,150,true);

echo "<br/><br/>";
$data2['Man'] = 840;
$data2['Woman'] = 358;
$mc2 = new maxChart($data2);
echo '<div style="float:left; margin-left:20px; width:220px;">';
$mc2->displayChart('Demo chart - 3',1,200,150);
echo '</div>';

$data3['Windows'] = 55;
$data3['Linux'] = 7;
$data3['Mac'] = 3;
$mc3 = new maxChart($data3);
$mc3->displayChart('Demo chart - 4',1,200,150,true);

?>

</div>
<div id="footer"><a href="http://www.freetutorialwebsite.com"> FreeTutorialWebsite.com </a></div>
</div>

</body>

untuk mempercantik style dari aplikasi ini, buat file style.css'a

Code :

body {
padding:20px;
margin:0px;
background-color: #fff;
}

#container {
margin: auto;
padding:0px;
width: 560px;
border:1px solid #111;
border-top:0px;
background-color: #f6f6f6;
}

/* HEADER */
#container #header {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 42px;
}

#container #header #header_main {
float: left;
padding: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#container #header #header_left {
float: left;
height: 42px;
width: 45px;
}
#container #header #header_right {
background-image: url(images/header_right.gif);
background-repeat: no-repeat;
height: 42px;
width: 6px;
float: right;
}

/* FOOTER */
#container #footer {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #000033;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 5px;
clear:both;
}
#container #footer a {
color: #999999;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}

#container #main{
padding:5px;
width:550px;
margin:0px;
text-align:center;
}

/* The sorrounding chart box */

.chartbox {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333;
text-align: center;
margin:auto;
border:1px solid #333;
padding:5px;
padding-top:0px;
overflow:hidden;
background-color:#fff;
}

.chartbox h2{
font-size: 14px;
font-weight:bold;
padding:0px;
margin:5px 0px;
}

/* Vertical chart elements */

.barv{
margin: 2px;
float:left;
}

.barvvalue {
padding:0px;
margin:0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

/* Horizontal chart elements */

.barh{
margin: 4px;
text-align:left;
clear:both;
}

.barhvalue {
padding:0px;
margin:0px 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
overflow:hidden;
float:left;
}

.barhcaption {
padding:0px;
margin:0px 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: right;
overflow:hidden;
float:left;
}

.barhimage {
float:left;
}

download file image untuk aplikasi ini, DOWNLOAD IMAGE

Rating

Currently 3.67/10
1
2
3
4
5
6
7
8
9
10

8 Current Comments

Administrator
on Tuesday 23rd of June 2009 10:45:17 AM

Silakan tinggalkan comment jika script ini membantu...
jika ada masalah dengan script di atas, silakan bertanya..

thanks
Administrator

rastavara28
on Tuesday 23rd of June 2009 10:59:47 PM

wah makasih mas admin....

bener2 membantu proyek Kerja Praktek ku neh..hehheheh

keep posting gan.....
:lol:

Administrator
on Wednesday 24th of June 2009 02:58:10 AM

yup, sama-sama bro..
keep visiting ya bro..
:roll:

rastavara28
on Wednesday 24th of June 2009 07:36:12 AM

min.....gmna klo neh tutorial web nya ada juga bagi pemula..

neh kan mo taun ajaran baru tuh....pasti banyak mahasiswa IT yg butuh2 tutorial....yah kek HTML dasar..hehehe

ane seh bisa dikit2 bantuin buat tutorial HTML dasar...
yah sbg bentuk interaksi user ajah seh..hehhehe

Administrator
on Wednesday 24th of June 2009 07:48:26 AM

boleh tu...ntar saya buka dulu permission'a utk posting...
trus member bisa melakukan posting tutorial jg, tp tolong dipostkan secara lengkap ya..

oya klo ada mslh dlm melakukan posting, lngsng tanyain saya aja ntar.. thanks

rastavara28
on Wednesday 24th of June 2009 07:58:24 AM

yupz..

disini fungsi admin tetep melakukan editing alias seleksi juga..coz demi imaj neh web juga mas..hehheeh

ga sembarangan member bisa posting artikel gituh maksudku mas...hehehhe

aq dukung neh web..klo perlu ntar ku arahin temen2 ku buat jd member sini...hehehhehe

bulugading
on Saturday 24th of October 2009 02:57:15 AM

materi yang lumayan membantu ... keep improver all ....tararengkyu ....

Administrator
on Saturday 24th of October 2009 09:29:48 AM

you're very welcome bro...
tks for joining...

Pages : 1

Restricted Area Sorry guys, you don't have permission to comment in this tutorial, please login first or you can register if you aren't our member yet.

Free Tutorial

Forum Discussion

Miscellanous

Members Area

Tree View

Newest Scripts

Newest Templates

Who's Online

Newest User

Web Statistic

Polling

Recent Comments

Recent Post Forum

Our Banner

	Member	: 0
	Guest	: 2