/    Sign up×
Community /Pin to ProfileBookmark

Bar Graph Creation Help

I used a script from another website to build a bar graph for my website. Here is the code:

[code=php]<?php
echo “<h2>Margaret Lackey State Offering</h2>”;
# ——- The graph values in the form of associative array
$values=array(
“Goal” => 500,
“Current” => 405
);

$img_width=150;
$img_height=200;
$margins=20;

# —- Find the size of graph by substracting the size of borders
$graph_width=$img_width – $margins * 2;
$graph_height=$img_height – $margins * 2;
$img=imagecreate($img_width,$img_height);

$bar_width=20;
$total_bars=count($values);
$gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);

# ——- Define Colors —————-
$bar_color=imagecolorallocate($img,0,64,128);
$background_color=imagecolorallocate($img,240,240,255);
$border_color=imagecolorallocate($img,200,200,200);
$line_color=imagecolorallocate($img,220,220,220);

# —— Create the border around the graph ——

imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);

# ——- Max value is required to adjust the scale ——-
$max_value=max($values);
$ratio= $graph_height/$max_value;

# ——– Create scale and draw horizontal lines ——–
$horizontal_lines=20;
$horizontal_gap=$graph_height/$horizontal_lines;

for($i=1;$i<=$horizontal_lines;$i++){
$y=$img_height – $margins – $horizontal_gap * $i ;
imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
$v=intval($horizontal_gap * $i /$ratio);
imagestring($img,0,5,$y-5,$v,$bar_color);

}

# ———– Draw the bars here ——
for($i=0;$i< $total_bars; $i++){
# —— Extract key and value pair from the current pointer position
list($key,$value)=each($values);
$x1= $margins + $gap + $i * ($gap+$bar_width) ;
$x2= $x1 + $bar_width;
$y1=$margins +$graph_height- intval($value * $ratio) ;
$y2=$img_height-$margins;
imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);imagestring($img,0,$x1+3,$img_height-15,$key,$bar_color);
imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
}
header(“Content-type:image/png”);
imagepng($img);
$_REQUEST[‘asdfad’]=234234;

?>

[/code]

This is the output that I get:

[CODE]<h2>Margaret Lackey State Offering</h2>&#65533;PNG

&#65533;&#65533;&#65533;
IHDR&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;w&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;PLTE&#65533;@&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;OS&#65533;
&#65533;&#65533;mIDATX&#65533;&#65533;AN&#65533;0&#65533;&#65533;R&#65533;&#65533;l`_ye&#65533;&#65533;&#65533;=#&#65533;N&#65533;&#65533;|
&#747;_&#65533;Y8@0NJ@&#65533;&#1379;J”&#65533;&#65533;&#65533;U?&#65533;&#65533;&#65533;&#65533;&#65533;o&#65533;&#65533;+&#65533;D5&#65533;&#65533;&#1648;X&#65533;D`I&#65533;gfs&#65533;&#65533;&#65533;&#65533;!&#65533;q.&#53192;;&#65533;&#65533; &#65533;&#65533;&#65533;&#65533;q&#65533;Z
{m&#65533;3&#65533;&#65533;^&#1968;&#65533;.&#65533;&#1706;;l7&#65533;&#65533;~&#65533;&#65533;a7&#65533;3&#65533;y&#65533;&#65533;&#22229;&#65533;kI&#65533;n”&#65533;,:&#65533;ns&#65533;b~R&#65533;&#65533;B&#65533;L&#65533;7&#65533;%&#65533;&&#65533;&#65533;[“&#65533;&#65533;&#65533;[_&#65533;&#65533;&#506;&#65533;&#65533;&#65533;7&#373;&#65533;=>?&#65533;&#65533;&#65533;r&#65533;?W&#65533; A&#65533;&#65533;&#65533;v&#1495;&#65533;k&#65533;&#65533;!
&#65533;&#65533;a&#65533;-&#65533;&#65533;vt>&#1197;&#65533;&#65533;S;&#65533;5&#65533;
l&#774;9&#65533; &#65533;&#65533;&#65533;7&#65533;S&#65533;o&#65533;&#1664;&#65533;&#1058;&#65533;&#65533;&#65533;-&#65533;|&#65533;A&#65533;2&#65533;&#65533;L&#65533;oH7&#65533;oP7&#65533;o&#65533;P~&#65533; &#65533;N&#65533;&#65533;7&#65533;&#65533;oe&#65533;&#65533;&#65533;o &#65533;N&#65533;&#65533;O$&#65533;&#1720;&#65533;P&#65533;&#65533;t[&#65533;&#65533;&#65533;&#65533;-‘9&#65533;&#1959;@&#65533;&#430;>&#65533;tK&#65533;(&#65533;&#65533;7&#65533;&#65533;&#65533;&#65533;M&#65533;o&#65533;m&#65533;&#65533;|#&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;o&#65533;{v&#65533;&#65533;&#65533;&#65533;;e&#65533;F&#65533;
&#65533;&#65533;{a&#65533;|C&#65533;S&#65533;8&#65533;&#2047;&#65533;&#65533;&#935;P&#65533;%&#65533;&#65533;&#65533;:&#65533;&#2047;M&#65533;%&#65533;<&#1825;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;m&#65533;|&#65533;/#j6C>&#65533;Y&#65533;&#65533;r&#65533;&#65533;nI&#65533;E’&#65533;&#65533;Q&#65533;&#65533;v&#65533;pX~&#65533;R&#65533;ZJ&#65533;&#65533;&#815;[&#65533;{&#65533;-p~&#65533;}&#65533;&#65533;~&#65533;}&#65533;&#65533;}w&#65533;+&#65533;n&#65533;&#65533;&#65533;&#65533;/&#65533;@&#65533;&#729;&#65533;q?|&#65533;P&#65533;&#65533;(&#65533;&#65533;0&#65533;&#65533;VM&#65533;%LL&#65533;B&#65533;&&#65533;&#65533;l&#65533;t&#65533;&#65533;&#65533;1&#65533;Q&#65533;&#65533;[&#65533;*&#65533;&#2019;xu&#1092;&#65533;&#65533;&#65533;&#65533;’a&#65533;&#65533;a&#65533;OïGg&#65533;&#65533;&#65533;&#65533;IEND&#65533;B`&#65533;
[/CODE]

Any thoughts?

to post a comment
PHP

3 Comments(s)

Copy linkTweet thisAlerts:
@NogDogOct 13.2008 — You cannot combine HTML text and image output in the same HTTP response. You will need an <img> tag in the main HTML page output that will point to a separate PHP script for generating the graph image.
Copy linkTweet thisAlerts:
@monarch_684authorOct 13.2008 — I am not exactly sure what you are saying. Can you give an example.
Copy linkTweet thisAlerts:
@NogDogOct 13.2008 — Main HTML output:
<i>
</i>&lt;h2&gt;Example:&lt;/h2&gt;
&lt;p&gt;Here comes a bar graph....&lt;br /&gt;
&lt;img src="bargraph.php" width="300" height="50" alt="bar graph" /&gt;
&lt;/p&gt;

bargraph.php:
[code=php]
<?php
// do image stuff to create graph in $img, then...
header('Content-Type: image/png');
imagepng($img);
[/code]
×

Success!

Help @monarch_684 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...