CSS Bar Graph function

•

What is DaniWeb IT Discussion Community?

You're currently browsing the PHP section within the Web Development category of DaniWeb, a massive community of 330,373 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,859 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

•

FAQ | Community Rules | Welcome Guide

Please support our PHP advertiser: Lunarpages PHP Web Hosting

•

5 Days Ago

Views: 150

ShawnCplus

This is a recursive function I made to draw purely CSS bar graphs. You pass it an array of data and the total amount, example:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
$someData = array('Oranges'=>4, 'Apples'=>10);
$total = 14;
echo drawCSSGraph($someData, $total);
$someData = array('Oranges'=>4, 'Apples'=>10);
$total = 14;
echo drawCSSGraph($someData, $total);

Also, you can pass it options in the form of an array or as space separated couples, exa:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
//perfectly fine
echo drawCSSGraph($data, $total, 'height=20 width=300 color=#c0c0c0');
//works just as well
$options = array('height'=>20, 'width'=>300, 'color'=>'#c0c0c0');
echo drawCSSGraph($data, $total, $options);
//perfectly fine
echo drawCSSGraph($data, $total, 'height=20 width=300 color=#c0c0c0');
//works just as well
$options = array('height'=>20, 'width'=>300, 'color'=>'#c0c0c0');
echo drawCSSGraph($data, $total, $options);

Also, you can put [var] in the label which will be parsed out when the graph is drawn

Help with Code Tags

(Toggle Plain Text)

$data = array('Data1: [var]'=>20, 'Data2: [var]'=>19);
echo drawCSSGraph($data, 39);
==>
    Data1: 20
    [graph here]
    Data2: 19
    [graph here]

It will detect whether you're making a vertical or horizontal bar graph and adjust accordingly. If you want it vertical just make the height greater than the width.

Last edited : 5 Days Ago.

Show Printable Version

•

php Syntax

Toggle Plain Text

function drawCSSGraph($data, $total, $settings='height=20 width=300 color=#c0c0c0'){
  //Emulate the symfony style of using settings
  if(is_array($settings)){
    $width = (isset($settings['width']))?$settings['width']:300;
    $height = (isset($settings['height']))?$settings['height']:20;
    $color = (isset($settings['color']))?$settings['color']:'#c0c0c0';
  } else {
    $settings = explode(' ', $settings);
    foreach($settings as $setting){
      $tmp = explode('=', $setting);
      $$tmp[0] = $tmp[1];
      if(!isset($width)) $width = 300;
      if(!isset($height)) $height = 20;
      if(!isset($color)) $color = '#c0c0c0';
    }
  }
 
  if(count($data) > 1){
    $HTMLoutput = '';
    foreach($data as $label=>$var){
      $labelv = preg_replace('/\[var\]/', $var, $label);
      $HTMLoutput .= drawCSSGraph(array($labelv=>$var), $total, $settings);
    }
    return $HTMLoutput;
  } else {
    $variable = $data[key($data)];
    $label = preg_replace('/\[var\]/', $variable, key($data));
    return 
     '<div><span>'.$label.'</span>
         <div style="width:'.$width.'px;height:'.$height.'px;border:1px solid black;padding:1px;">
            <div class=\'bargraph\' style=\''.
                (($width > $height)?'width':'height').':'.
                (($variable/$total)*($width > $height?$width:$height)).'px;background-color:'.$color.';\'></div>
         </div>
    </div>'."\n";
  }
}

Comments (Newest First)

ShawnCplus | Code Monkey | 4 Days Ago

•

Small addition, in the argument list, if you change $total to $total=null Then right before if(count... you add the following

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
if($total == 0 || $total == null){
    foreach($data as $key=>$value){
      $total += $value;
    }
  }
if($total == 0 || $total == null){
    foreach($data as $key=>$value){
      $total += $value;
    }
  }

You no longer have to pass a total since it will just do it for you. (small oversight on my part not to add it in the first place)

Post Comment

•

Only community members can submit or comment on code snippets. You must register or log in to contribute.

•

DaniWeb Marketplace (Sponsored Links)

DaniWeb Home > Code Snippets > php Syntax

CSS Bar Graph function