MiniChart - Horizontal Graph Bar

[MxGucci]

Hi,

 

I found a very neat and small vertical graph chart script on the net, however the owner of the script didn't give much explanation on how to use the script.

 

Below is the actual code he gives on his website (http://projects.littlewebthings.com/cssminicharts/) :

 

<?php

/**

* lwtCSSMiniChars.

* Version 0.1

* Copyright © 2008 Vassilis Dourdounis.

* http://projects.littlewebthings.com/cssminicharts/

*

* Permission is hereby granted, free of charge, to any person obtaining a copy

* of this software and associated documentation files (the "Software"), to deal

* in the Software without restriction, including without limitation the rights

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

* copies of the Software, and to permit persons to whom the Software is

* furnished to do so, subject to the following conditions:

*

* The above copyright notice and this permission notice shall be included in

* all copies or substantial portions of the Software.

*

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

* THE SOFTWARE.

*/

 

 

/**

* Renders a Horizontal Bar Chart

* Returns html string.

*

* @param (array) data

* @param (array) options

*/

function lwtMiniHorizontalBarChart($data, $options=null) {

 

    $width        = $options['width']        ? $options['width']            : 100;

    $height        = $options['height']    ? $options['height']        : 20;

   

    $show_grid    = $options['show_grid']    ? $options['show_grid']        : true;

   

    $scale        = $options['scale']        ? $options['scale']            : 100;

   

    $grid_width    = $options['grid_width']? $options['grid_width']    : 10;

 

    $default_colors = array('#dec', '#e88');

 

    $ret .= '<div class="lwtMiniBarChart" style="position: relative; width: '.$width.'px; height: '.$height.'px;">';

   

    $h = $height;

 

    // Render grid

    $grid_w = $width * $grid_width/$scale;

    if ($show_grid) {

        for ($i = 0; $i*$grid_w+$i < $width; $i++) {

            $ret .= '<div style="height: '.$height.'px; border-left: 1px solid #eee; width: 1px; position: absolute; left: '.($i*$grid_w).'px;"></div>';

        }

 

        for ($i = 0; $i*$grid_w+$i < $width; $i++) {

            $ret .= '<div style="height: 2px; border-left: 1px solid #333; width: 1px; position: absolute; left: '.($i*$grid_w).'px; bottom: 0px;"></div>';

        }

 

    }

 

    // Render Bars

    $h = $height * 0.6;

    $color_pivot = 0;

    foreach ($data as $color => $value) {

        if (is_numeric($color)) {

            $color = $default_colors[$color_pivot++ % count($default_colors)];

        }

 

        $ret .= '<div style="background-color: '.$color.'; position: absolute;  width: '.($value/$scale*100).'%; height: '.$h.'px; top: '.(($height-$h)/2).'px; padding: 0; margin: 0;  left: 0;"></div>';

        $h *= 0.5;

    }

 

    $ret .= '</div>';

   

    return $ret;

}

 

/**

* Renders a Vertical Bar Chart

* Returns html string.

*

* @param (array) data

* @param (array) options

*/

function lwtMiniVerticalBarChart($data, $options=null) {

 

    $width        = $options['width']        ? $options['width']            : 100;

    $height        = $options['height']    ? $options['height']        : 20;

   

    $show_grid    = $options['show_grid']    ? $options['show_grid']        : true;

   

    $colors        = $options['colors']    ? $options['colors']        : array('#e88', '#b55');

 

    $ret .= '<div class="lwtMiniBarChart" style="position: relative; width: '.$width.'px; height: '.$height.'px;">';

   

    $w = max(1, floor(($width-count($data))/count($data)));

    $i = 0;

    foreach ($data as $value) {

        $ret .= '<div style="background-color: '.$colors[$i%count($colors)].'; position: absolute; width: '.($w).'px; height: '.($value/max($data)*$height).'px; left: '.($i*$w + $i).'px; bottom: 0px;"></div>';

        $i++;

    }

   

    $ret .= '</div>';

   

    return $ret;

}

 

 

 

?>

 

 

He then goes and gives us 2 exampls but doesnt give us actual information on how to use the script.

 

lwtMiniHorizontalBarChart(

  array(

  'blue' => 90,

  'white' => 40,

  'red' => 20

  ),

  array(

  'width' => 300,

  'height' => 40

  )

);

 

That is the graph I want to draw, well for now because I will eventually customize it.

 

However, if any of you have an easier php script that will allow me to draw a simple horizontal graph, all I need is a vertical line graph (kind of how voting polls have it), all I want to do is say 9/10 and have the graph load a graph that is 9/10 full, then another graph under it as 5/10 and so forth, if someone can give me a simpler easier script that I can my self insert into my pages whenever I need to make a mini graph of 9/10 and 5/10, etc, I'd greatly appreciate it.

 

Sorry for the messy question and lengthy question.

 

Thanks,

Gucci

[kenrbnsn]

Double post. Locked.

 

Ken