html knowhow

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

Wochentag	Besucher
Monday		254
Tuesday		489
Wednesday		367
Thursday		563
Friday		195

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