| abstract |  |
This article contains PHP function ae_bar_html for generating HTML/CSS based one-column bar charts. It is suitable for simple diagrams and does not require libgd. | compatible |  |
- PHP 4, PHP 5 or higher
- Any sane browser with CSS support
- Internet Explorer 5+
Described function ae_bar_html uses four arguments:
- $values - associative array of values: array keys are category titles, array values are chart values. Values should be positive numbers(integers or floats)
- $height (default: 400px) - specify height of longest(maximum value) bar
- $color (default: 'black') - specify color of each column
- $width (default: 'auto') - specify width of each column.
ae_bar_html returns HTML code of two table rows, i.e. <tr>...</tr><tr>...</tr>.
You should insert this HTML code between <table> ... </table> tags.
<?php function ae_bar_html(&$values, $height=400, $color='black', $width='') { $max = -1; foreach($values as $k=>$v) if (abs($v) > $max) $max = abs($v); if ($max != 0) $kf = $height / $max; else $kf = 0; if ($width != '') $width = "width: {$width}px; ";
$out = "<tr style='vertical-align: bottom;'>"; foreach($values as $k=>$v) { $bar_h = abs(round($v*$kf)); $out .= "<td style='{$width}padding-top: 0; margin-top: 0;"; $out .= " height: {$height}px; border-bottom: {$bar_h}px solid {$color}; text-align: center;'>"; $out .= "{$v}</td>"; } $out .= '</tr>'; $out .= "<tr>";
foreach($values as $k=>$v) $out .= "<td style='text-align: center'>{$k}</td>"; $out .= "</tr>"; return $out; }
?>
This version of the function uses inline CSS (style=""). Resulting HTML code may be inserted anywhere, however inline CSS is quite messy and additional styling
requires modifying of the function source.
There is another version of the function, ae_bar_css which outputs 'clean' HTML code with CSS classes specified. All color and width settings are done in CSS class definition. You need to specify only three arguments: values, height and css-prefix. $css-prefix argument is a string which will be added before every css class: this may be useful if you need to insert several charts with different styles.
<?php function ae_bar_css(&$values, $height=400, $css_prefix='') { $max = -1;
foreach($values as $k=>$v) if (abs($v) > $max) $max = abs($v); if ($max != 0) $kf = $height / $max; else $kf = 0;
$out = "<tr class='{$css_prefix}barvrow'>"; foreach($values as $k=>$v) { $bar_h = abs(round($v*$kf)); $out .= "<td style='border-bottom-width: {$bar_h}px'>{$v}</td>"; } $out .= '</tr>'; $out .= "<tr class='{$css_prefix}bartrow'>";
foreach($values as $k=>$v) $out .= "<td>{$k}</td>"; $out .= "</tr>"; return $out; }
?> Here is a basic CSS classes for this function (assuming that ae_bar_css output is enclosed in <table class="chart"> ... </table>):
table.chart tr.barvrow td
{
width: 40px;
height: 400px;
vertical-align: bottom;
border-bottom-color: red;
border-bottom-style: solid;
text-align: center;
}
table.chart tr.bartrow td
{
text-align: center
}
Finally, some examples of using these functions. This is a trivial example which may be suitable for outputting visitor statistics: <?php
// loading data // setting values to associative array // day=>number of visitors $visitors = array('1.1.2007'=>450, '1.2.2007'=>420, '1.3.2007'=>440, '1.4.2007'=>430, '1.5.2007'=>421, '1.6.2007'=>318, '1.7.2007'=>234); ?> <table> <?php echo ae_bar_html($visitors, '300', 'red', 100); ?> </table> This example builds a bar chart based on rounded values of a function 1 + abs(sin($x)*10) <html><head> <title>strange bar chart example</title> <style type="text/css"> table.chart { width: 100%; } table.chart td { font-size: 8pt; font-family: Arial,serif; } table.chart tr.barvrow td { width: 5%; height: 300px; vertical-align: bottom; border-bottom-color: darkblue; border-bottom-style: solid; text-align: center; } table.chart tr.bartrow td { text-align: center; width: 100px; } </style> </head> <body> <? $sinus = array();
// filling array with values of // expression round(1 + abs(sin($x)*10), 1); for ($x = -pi(); $x < pi(); $x += pi() / 10) $sinus[strval(round($x, 1))] = round(1 + abs(sin($x)*10), 1); // array key for float numbers should be string
echo '<table class="chart">'; echo ae_bar_css($sinus, 300); echo '</table>'; ?> </body> </html> | warning |  |
- This function works only with positive values. Negative values are converted to positive (absolute value).
| tested by AnyExample.com
on 2007-05-07 |  |
- FreeBSD 6.2 :: PHP 5.2.1
- RHEL 5.0 :: PHP 4.4.5
- Browser :: Internet Explorer 6.0
- Browser :: Opera 9.1
- Browser :: Firefox 2.0
|