Hi ,
How can I create graphs like this..
<?= format_size($this->space_used); ?> out of <?= format_size($this->total_space); ?>
views:
71answers:
7
+2
A:
You can do this with a couple divs with background colors and borders.
buckbova
2010-07-16 19:19:01
+1. Using PHP for generating stuff like this is total overkill. Here are lots and lots of examples that can be used with no javascript required: http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/
hollsk
2010-07-16 19:43:18
A:
You can use the jQuery progress bar to do this easily http://jqueryui.com/demos/progressbar/
cesarnicola
2010-07-16 19:21:00
+2
A:
First of all, that is not a bar graph, it is a progress bar.
As far as implementing this goes, my preference would be to use JavaScript to do the actual rendering. For example, have a look at the jQuery UI Progress Bar.
Otherwise, since this appears to be static data, you could calculate the percentage in the PHP script and then either generate an image on-the-fly or pick from a set of predefined images (EG: progress_10_pct, progress_20_pct, etc). Or as others have mentioned, just use some HTML/CSS markup to give the appearance of the bar - the choice is up to you.
Justin Ethier
2010-07-16 19:22:28
A:
For a progress bar have a table with one row and two columns. Adjust width as percentage of area.
btw, we use OpenFlashChart. it allows you to create bar/pie/line/scattered etc. and it's very easy to use.
Ankit Jain
2010-07-16 19:23:46
+2
A:
Sample html :
<html>
<head>
<style>
.container
{
width: 200px;
height: 50px;
border-style: solid;
border-width: 1px;
}
.meter
{
width: 20%;
height: 100%;
background-color: rgb(0, 255, 0);
}
</style>
</head>
<body>
<div class="container">
<div class="meter">
 
</div>
</div>
</body>
</html>
Of course this only works if its static data, if its dynamic then you need some javascript, either by using a jQuery plugin as mentioned, or rolling your own.
Francisco Soto
2010-07-16 19:24:40
A:
Completely off the top of my head, so caveat emptor...
<head>
...
<style type="text/css">
#progressbar {
display:inline-block;
color:gray;
width:50%;
}
#progressbar div {
margin:0;
}
#progressbar > div {
width:100%;
border:1px solid #aaa;
}
#progressbar > div > div{
background-color:green;
width:<?php echo sprintf("%.0f", $u/$t); ?>%;
height:20px;
}
</style>
</head>
...
Disk Space Usage <div id="progressbar"><?php echo "{$u} MB / {$t} MB"; ?><br><div></div></div>
R. Hill
2010-07-16 19:29:27
+1
A:
If you really wanted to use PHP, you could use the gd library - look at this example.
Otherwise I would recommend using just a couple of divs -
<div class="bar_container">
<div class="bar" style="width: <?= $percentage ?>%;"> </div>
</div>
81403
2010-07-16 19:29:57