NucleoGraph
From Codevault
This class is based on the CSS graph originally made by meyerweb [1]. Renowned Media took the CSS and XHTML and wrapped a PHP class around it to easily generate graphs programatically.
This class is also hosted on phpclasses.org [2] but this page will usually contain the latest version.
This class is compatible with PHP version 4.x and up.
To use the class, save the contents into a PHP file and include it before calling the class.
For more information and discussion about this class, visit the blog post [3].
Looking for a web visitor statistics application making use of nucleoGraph? Look no further than RenownedStats [4].
Sample usage:
- include('nucleoGraph4.ssi.php');
- $myGraph = new nucleoGraph;
- $myGraph->construct(100, 1600, 100, 'daily', true, 5, 60);
- $myGraph->setColors(1, '1B86E1', '71b8f4', '2d6290');
- $myGraph->setColors(2, 'd438d2', 'e96ae8', '9a2b99');
- $myGraph->addBar('january', 500, 280);
- $myGraph->addBar('february', 400, 320);
- $myGraph->addBar('march', 300, 469);
- $myGraph->displayGraph();
<?php
class nucleoGraph {
var $graph_width; #generated automatically
var $graph_height; #static for now
var $chunk_width; #the width of the grey region in which two bars exist
var $max1; #max height of the first graph
var $max2; #duh
var $usable_graph_height; #just graph height minus 2
var $name; #the id of the graph for CSS purposes (don't have two on one page w/ same name)
var $fade; #whether or not to have the PNG fade image, not <=IE6 friendly
var $ticks; #The number of background rows (ticks)
var $tick_height;
var $data = Array(); #contains each bar's data (label, value1, value2)
var $color = Array(); #contains each bar's color (face, light, dark) [1 or 2]
# I don't know default constructors in PHP4, if they even exist
function construct($chunk, $max1, $max2, $name = "nucleoGraph", $fade = false, $num_ticks = 5, $tick_height = 60) {
$this->chunk_width = $chunk;
$this->max1 = $max1;
$this->max2 = $max2;
$this->name = $name;
$this->fade = $fade;
$this->ticks = $num_ticks;
$this->tick_height = $tick_height - 1;
$this->color[1] = array('face' => '666', 'light' => 'fff', 'dark' => '000');
$this->color[2] = array('face' => '666', 'light' => 'fff', 'dark' => '000');
$this->graph_height = $num_ticks * $tick_height;
$this->usable_graph_height = $num_ticks * $tick_height - 2;
}
function setColors($bar, $face, $light, $dark) {
$this->color[$bar] = array('face' => $face, 'light' => $light, 'dark' => $dark);
}
function addBar($label, $value1, $value2 = 0) {
$this->data[] = array('label' => $label, 'value1' => $value1, 'value2' => $value2);
$this->graph_width = sizeof($this->data) * $this->chunk_width;
}
function getCount() {
return sizeof($this->data);
}
function clearData() {
$this->data = array();
}
function displayDebug() { #it is a beta after all (-:
echo "<pre>";
print_r($this->data);
print_r($this->color);
echo "graph_width => " . $this->graph_width . "\n";
echo "graph_height => " . $this->graph_height . "\n";
echo "chunk_width => " . $this->chunk_width . "\n";
echo "max1 => " . $this->max1 . "\n";
echo "max2 => " . $this->max2 . "\n";
echo "usable_graph_height => " . $this->usable_graph_height . "\n";
echo "name => " . $this->name . "\n";
echo "</pre>\n";
}
function displayGraph($recalculateMaxHeights = FALSE) {
$number = sizeof($this->data);
if ($this->fade){
$bg = " url(fade-dark.png) repeat-x;";
} else {
$bg = '';
}
if ($recalculateMaxHeights) {
$max_height = 0;
foreach($this->data AS $data) {
if ($data['value1'] > $max_height)
$max_height = $data['value1'];
if ($data['value2'] > $max_height)
$max_height = $data['value2'];
}
$this->max1 = ceil($max_height / 100) * 100;
$this->max2 = $this->max1;
}
?>
<style type="text/css">
#<?=$this->name?> {position: relative; width: <?=($number * $this->chunk_width) ?>px; height: <?=$this->graph_height?>px;
margin: 10px 0 20px 20px; padding: 0;
background: #DDD;
border: 2px solid gray; list-style: none;
font: 9px Helvetica, Geneva, sans-serif;}
#<?=$this->name?> {margin: 0; padding: 0; list-style: none;}
#<?=$this->name?> li {position: absolute; bottom: 0; width: <?=$this->chunk_width?>px; z-index: 2;
margin: 0; padding: 0;
text-align: center; list-style: none;}
#<?=$this->name?> li.qtr {height: <?=$this->usable_graph_height?>px; padding-top: 2px;
border-right: 1px dotted #C4C4C4; color: #AAA;}
#<?=$this->name?> li.bar {width: 30px; border: 1px solid; border-bottom: none; color: #000;}
#<?=$this->name?> li.bar p {margin: 5px 0 0; padding: 0;}
#<?=$this->name?> li.sent {left: 13px; background: #<?=$this->color[1]['face']?><?=$bg?>; border-color: #<?=$this->color[1]['light']?> #<?=$this->color[1]['dark']?> #000 #<?=$this->color[1]['light']?>;}
#<?=$this->name?> li.paid {left: <?=($this->chunk_width) / 2 + 8?>px; background: #<?=$this->color[2]['face']?><?=$bg?>; border-color: #<?=$this->color[2]['light']?> #<?=$this->color[2]['dark']?> #000 #<?=$this->color[2]['light']?>;}
<?
for ($i = 1; $i <= $number; $i++) {
?>#<?=$this->name?> #q<?=$i?> {left: <?=(($i - 1) * $this->chunk_width) ?>px; <? if ($i == $number) { ?>border-right: none;<? } ?> }
<?
}?>
#<?=$this->name?> #ticks {width: <?=($number * $this->chunk_width) ?>px; height: <?=$this->graph_height?>px; z-index: 1;}
#<?=$this->name?> #ticks .tick {position: relative; border-bottom: 1px solid #BBB; width: <?=($number * $this->chunk_width) ?>px;}
#<?=$this->name?> #ticks .tick p {position: absolute; left: 100%; top: -0.67em; margin: 0 0 0 0.5em;}
</style>
<ul id="<?=$this->name?>">
<?php
$i = 1;
for ($i = 0; $i < sizeof($this->data); $i++) {
#this will be put into an array in a later version for variable bar group size support
$height = ceil(($this->data[$i]['value1'] / $this->max1) * $this->usable_graph_height);
$height2 = ceil(($this->data[$i]['value2'] / $this->max2) * $this->usable_graph_height);
if ($height > $this->usable_graph_height)
$height = $this->usable_graph_height;
if ($height2 > $this->usable_graph_height)
$height2 = $this->usable_graph_height;
?><li class="qtr" id="q<?=$i+1?>"><?=$this->data[$i]['label']?>
<ul>
<li class="sent bar" style="height: <?=$height?>px;"><p><?=$this->data[$i]['value1']?></p></li>
<?php if ($this->data[$i]['value2'] > 1) { ?>
<li class="paid bar" style="height: <?=$height2?>px;"><p><?=$this->data[$i]['value2']?></p></li>
<?php } ?>
</ul>
</li>
<?php
}
?>
<li id="ticks">
<?php
for($j = $this->ticks; $j >= 1; $j--) {
$value = ceil(($j/$this->ticks)*$this->max1);
?>
<div class="tick" style="height: <?=$this->tick_height?>px;"><p><?=$value?></p></div>
<?php
}
?>
</li>
</ul>
<?php
}
}
?>
