Make Simple Graph

Today, I tried to make simple graph with PHP. I read it on PHP Hack book By Jack Herrington and I’ll share it for you. It seems as though every site you go to these days requires QuickTime or Flash so that you can see fancy images and graphs. With this tricks you don’t need fancy image rendering or Flash movies. So it doesn’t require any extra plug-ins or downloads. Nice^^

^?View Code PHP

<html>
<?
$data = array(
		array( "horror", 50 ),
		array( "drama", 20 ),
		array( "comedy", 80 ),
		array( "thriller", 10 )
);
$max = 0;
foreach ( $data as $d ) { $max += $d[1]; } //count total data max=50+20+80+10=160
?>
<body>
<table width="400" cellspacing="0" cellpadding="2">
<? foreach( $data as $d ) {
$percent = ( $d[1] / $max ) * 100; //count percent if 50, then 50/160*100 = 31.25
?>
	<tr>
		<td width="20%"><? echo( $d[0] ) ?></td> <!--d[0] = film category-->
		<td width="10%"><? echo( $d[1] ) ?>%</td> <!--d[1] = percent-->
		<td>
			<table width="<? echo($percent) ?>%" bgcolor="#000000"> <!--draw graph-->
			<tr>
				<td>
				</td>
			</tr>
			</table>
		</td>
	</tr>
<? } ?>
</table>
</body>
</html>

Preview from browser:

Simple Graph

You can use several techniques to create HTML graphs. I chose to use two tables; the first contains the textual data, and the second contains a set of nested tables, each with a width value based on the graph value in that row.

I calculate the width by first finding the maximum value of the combined data, and storing that in $max. I then derive the percentage by dividing $max by the current value, and multiplying the result by 100 (to set the scale between 0 and 100). That number is stored in $percent, which is then used in the width attribute of the table.

Adding color:

^?View Code PHP

<html>
<?
$data = array(
		array( "horror", 50, "red" ),
		array( "drama", 20, "green" ),
		array( "comedy", 80, "orange" ),
		array( "thriller", 10, "blue" )
);
$max = 0;
foreach ( $data as $d ) { $max += $d[1]; } //count total data max=50+20+80+10=160
?>
<body>
<table width="400" cellspacing="0" cellpadding="2">
<? foreach( $data as $d ) {
$percent = ( $d[1] / $max ) * 100; //count percent if 50, then 50/160*100 = 31.25
?>
	<tr>
		<td width="20%"><? echo( $d[0] ) ?></td> <!--d[0] = film category-->
		<td width="10%"><? echo( $d[1] ) ?>%</td> <!--d[1] = percent-->
		<td>
			<table width="<? echo($percent) ?>%" bgcolor="<? echo($d[2]) ?>"> <!--draw graph-->
			<tr>
				<td>
				</td>
			</tr>
			</table>
		</td>
	</tr>
<? } ?>
</table>
</body>
</html>

Preview from browser:
Simple Graph Color

Einchi