1. height: The height of that individual bar in pixels or em.
2. left: The y-axis or horizontal offset for that bar group.
3. class(optional): So we can style individual data sets.

<ul class="barGraph">
	<li class="p1" style="height: 57px; left: 0px;">57</li>
	<li class="p2" style="height: 27px; left: 0px;">27</li>
	<li class="p3" style="height: 17px; left: 0px;">17</li>

	<li class="p1" style="height: 99px; left: 40px;">99</li>
	<li class="p2" style="height: 74px; left: 40px;">74</li>
	<li class="p3" style="height: 54px; left: 40px;">54</li>

	...

</ul>

You won’t always have an appropriate height value to display, in which case you will need to scale the data relative to your desired graph height. This code walks through the process.

function printGraph()
{
	$days = array();
	$xOffset = 0;
	$xIncrement = 40; // width of bars
	$graphHeight = 500; // target height of graph
	$maxResult = 1;
	$scale = 1;

	// Database Connection Information

	// Connect to and select the database

	// Get the data and find max values
	$result = mysql_query($query);
	if (!$result) die("no results available!");

	while($row = mysql_fetch_assoc($result)) {
		$days[$row['date']] = array( "P1" => $row['priority1']
			, "P2" => $row['priority2']
			, "P3" => $row['priority3']);

		//Check if this column is the largest
		$total = $row['total'];
		if($maxResult < $total) $maxResult = $total;
	}
	mysql_free_result($result);

	// Set the scale
	$scale = $graphHeight / $maxResult;

	echo '<ul class="TGraph">';

	foreach($days as $date => $values){
		// Reverse sort the array
		arsort($values);

		foreach($values as $priority => $num){
			// Scale the height to fit in the graph
			$height = ($num*$scale);

			// Print the Bar
			echo "</li><li class='$priority' style='height: ".$height."px; left: ".$xOffset."px;' title='$date'>$num<br />$priority</li>";
		}
		// Move on to the next column
		$xOffset = $xOffset + $xIncrement;
	}
	echo '';
}

Styling the graph with CSS

Once you’ve got your list printed, it is time to turn it into a bar graph. To get you started, Figure 2.0 contains the minimum styles needed to complete the transformation.

.verticalBarGraph {
	border-bottom: 1px solid #FFF;
	height: 200px;
	margin: 0;
	padding: 0;
	position: relative;
	}

.verticalBarGraph li {
	border: 1px solid #555;
	border-bottom: none;
	bottom: 0;
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 39px;
	}

Adding some Style

Figures 2.1 through 2.3 show the styles used on the example implementation above. There are endless possibilities are endless, these are just a few ideas. Please feel free to share your creations with me, I would be delighted to see them.

.barGraph {
	background: url(images/horizontal_grid_line_50_pixel.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
	height: 200px;
	margin: 1em 0;
	padding: 0;
	position: relative;
	}

.barGraph li {
	background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right;
	border: 1px solid #555;
	border-bottom: none;
	bottom: 0;
	color: #FFF;
	margin: 0;
	padding: 0 0 0 0;
	position: absolute;
	list-style: none;
	text-align: center;
	width: 39px;
	}

.barGraph li.p1{ background-color:#666666 }
.barGraph li.p2{ background-color:#888888 }
.barGraph li.p3{ background-color:#AAAAAA }

Faux Line Graph:

.fauxLineGraph {
	background: url(images/horizontal_line_2.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
	height: 200px;
	margin: 1em 0;
	padding: 0;
	position: relative;
	}
.fauxLineGraph li {
	border-top: 3px solid #555;
	border-bottom: none;
	color: #000;
	bottom: 0;
	list-style: none;
	margin: 0;
	padding: 0 0 0 0;
	position: absolute;
	text-align: center;
	width: 39px;
	}

.fauxLineGraph li.p1{
	background: url(images/blue_shadow.png) repeat-x top right;
	border-color: #4E536B;
	}
.fauxLineGraph li.p2{
	background: url(images/red_shadow.png) repeat-x top right;
	border-color: #355B31;
	}
.fauxLineGraph li.p3{
	background: url(images/yellow_shadow.png) repeat-x top right;
	border-color: #88262B;
	}

Dotted Graph:

.pointGraph {
	background: url(images/horizontal_line_2.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
	height: 200px;
	margin: 1em 0;
	padding: 0;
	position: relative;
	}
.pointGraph li {
	border-bottom: none;
	bottom: 0;
	color: #000;
	margin: 0;
	padding: 15px 0 0 0;
	list-style: none;
	position: absolute;
	text-align: center;
	width: 39px;
	}

.pointGraph li.p1{ background: url(images/nav_step_1.png) no-repeat top center;}
.pointGraph li.p2{ background: url(images/nav_step_4.png) no-repeat top center; }
.pointGraph li.p3{ background: url(images/nav_step_6.png) no-repeat top center; }

Demo: http://www.terrill.ca/design/vertical_bar_graphs/

Source: http://www.terrill.ca/design/vertical_bar_graphs/

Related Listings:

1. CSS Bar Chart Script The above bar charts do not reflect the usage on...
2. CSS For Bar Graphs Having a working knowledge of XHTML and CSS when developing...
3. Digg Like Css Vertical menu Do you like Digg.com webdesign? I like much its menu,...
4. CSS Vertical Bar Graphs Here’s a fairly typical vertical bar graph showing a hypothetical...
5. Transparent Custom Corners The technique for creating a flexible box with Transparent custom...

Do you like this post?

Email: