diedVIPs

html knowhow

Balkendiagramm anzeigen










Balkendiagramm anzeigen

Mit diesem Modul können Sie ein Balkendiagramm anzeigen. Sie müssen lediglich im Quelltext die Zahlen eingeben, die Sie als Diagramm anzeigen möchten

So sieht´s aus

WochentagBesucher
Monday Monday254
Tuesday Tuesday489
Wednesday Wednesday367
Thursday Thursday563
Friday Friday195

Quellcode
<?php
function drawChart($chartData){
global $tableSize;
$maxValue = 0;
foreach ($chartData as $item) {
if ($item['value'] > $maxValue) $maxValue = $item['value'];
}
$maxBar = 1;
while ($maxBar < $maxValue) $maxBar = $maxBar * 10;
$pxValue = ceil($maxBar/$tableSize);
echo '<table><tr><th>Wochentag</th><th colspan="2">Besucher</th></tr>';
foreach ($chartData as $item) {
$width = ceil($item['value']/$pxValue);
echo '<tr><td>'.$item['title'].'</td>';
echo '<td width="'.($maxBar*$pxValue).'">
<img src="../Bilder/barbg.gif" alt="'.$item['title'].'" width="'.$width.'" height="15" /></td>';
echo '<td>'.$item['value'].'</td></tr>';
}
echo '</table>';
}
$data = array();
$tableSize = 300;
$data[0]['title'] = 'Monday';
$data[0]['value'] = 254;
$data[1]['title'] = 'Tuesday';
$data[1]['value'] = 489;
$data[2]['title'] = 'Wednesday';
$data[2]['value'] = 367;
$data[3]['title'] = 'Thursday';
$data[3]['value'] = 563;
$data[4]['title'] = 'Friday';
$data[4]['value'] = 195;
?>
<html>
<head>

<style>
#main {width: 50%;background: white;font-size : 1.1em;}
form {margin-left: 8px;border: 1px solid #cccccc;width: 100%;background: #E9ECEF; font-size : 12px; padding:5px; margin-bottom:10px;}
#result {margin-left: 8px; border: 1px solid #cccccc;width: 400px; background: #E9ECEF; font-size : 0.9em; color:black; padding:5px; margin-bottom:5px;}
.text {border: 1px solid #cccccc;}
input {border: 0px solid #cccccc;}
.values{font-weight:normal; font-size : 10px; align:top; vertical-align:top;}
.key{font-weight:bold; font-size : 12px; padding-bottom:15px;}
.caption{font-family: Arial, Helvetica, sans-serif; font-weight:bold; margin:10px; font-size : 1.5em; color:#C64934;}
#source{text-align:right; align:right; padding-right:10px; font-size : 10px; color:#CCCCCC;}
</style>
</head>

<body>
 <div id="main">
<div id="result">
<?php drawChart($data); ?>
</div>
</div>

</body>
</html>








Kontakt    Datenschutz   Impressum