Free, tested & ready to use examples!
AnyExample.com
 
Web anyexample.com
 

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.

    source code: php
    <?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.

    source code: php
    <?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>):

    source code: CSS
     
    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:

    source code: php
    <?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)

    source code: php
    <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($x1))] = round(abs(sin($x)*10), 1);
    // array key for float numbers should be string 

    echo '<table class="chart">';
    echo 
    ae_bar_css($sinus300);
    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
  •  


     
    © AnyExample 2010-2013
    License | Privacy | Contact