Bar chart HTML generator

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

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