Google Answers Logo
View Question
 
Q: Creating a Monetary Goal Graphic on the Web ( No Answer,   4 Comments )
Question  
Subject: Creating a Monetary Goal Graphic on the Web
Category: Computers
Asked by: colinsummers-ga
List Price: $25.00
Posted: 29 Nov 2004 20:30 PST
Expires: 29 Dec 2004 20:30 PST
Question ID: 435855
There are so many great little tools on the web. I bet this one is out
there somewhere. I want to enter a goal ($15,000) and an amount raised
so far ($800), and have a graphic of the meter (or thermometer)
displayed. Then I could grab that image and stick it on my web page.
Amazon's Honor System includes such a graphic, but I am sure that they
are generating that internally. I don't need to do it dynamically, I
would just go the web site/web tool page once a day and create a new
one for that day.

Where would I go?
Answer  
There is no answer at this time.

Comments  
Subject: Re: Creating a Monetary Goal Graphic on the Web
From: alphamonkey-ga on 30 Nov 2004 01:37 PST
 
I couldn't find one after searching quickly, I can make one pretty easily. 
Right now the dimensions are 504x45 it is a red thermometer with
$15,000 on the far right side and it will generate PNGs. It looks
something like this :
http://tinyurl.com/5f59k
Are there any changes you want made before I program it?
Subject: Re: Creating a Monetary Goal Graphic on the Web
From: alphamonkey-ga on 30 Nov 2004 01:47 PST
 
Oops. Oh well, I though anyone could answer things. Turns out, only
resarchers can. I guess that is what I get for not reading the FAQ
first.
Well some resarcher will have an easy time with this one :-) 

Here is the code I was going to use : 
<?php

 /*
  * php+gd dynamic progress bar demo script.
  * copyright 2003, B. Johannessen <bob@db.org>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation; either version 2 of the License, or
  * (at your option) any later version, and provided that the above
  * copyright and permission notice is included with all distributed
  * copies of this or derived software.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * A copy of the GNU General Public License is available from the GNU
  * website at the following URL: http://www.gnu.org/licenses/gpl.txt
  *
  */

 $width = $_REQUEST['width'];
 $done = $_REQUEST['done'];
 $total = $_REQUEST['total'];
 $style = $_REQUEST['style'];

 if($_SERVER['PATH_INFO'] == '/source') {
  $source = str_replace(' ', ' ', htmlspecialchars(implode('',
file('progress.php'))));
  $show = 'source';
 }
 else if($_SERVER['PATH_INFO'] == '/source-demo') {
  $source = str_replace(' ', ' ', htmlspecialchars(implode('',
file('progress-demo.php'))));
  $show = 'source';
 }
 else if(!$width && !$done && !$total && !$style) {
  $show = 'form';
 }
 else if(!in_array($style, array('winxp', 'osx', 'led', 'solaris'))) {
  $show = 'form';
 }
 else {
  $uri  = 'http://db.org/demo/progress.php?img=';
  $uri .= $style . '/' . $width . '/' . $done . '/' . $total;

  if($done > 0) {
   $prev  = 'http://db.org/demo/progress-demo.php?style=';
   $prev .= $style . '&amp;width=' . $width . '&amp;done=' . ($done -
1) . '&amp;total=' . $total;
  }

  if($total > $done) {
   $next  = 'http://db.org/demo/progress-demo.php?style=';
   $next .= $style . '&amp;width=' . $width . '&amp;done=' . ($done +
1) . '&amp;total=' . $total;
  }
 }

 $title = 'PHP+GD Progress Bar Demo';

?>
<?php include('header.php'); ?>
        <?php if($show == 'form') { ?>
          <div class="metabox">
            <h2>Help</h2>
            <div class="metabox-content">
              <p>
                <b>Style</b>: The style of the resulting progress bar.
              </p>
              <p>
                <b>Width</b>: The width of the progress bar image.
              </p>
              <p>
                <b>Steps</b>: The number of steps from 0% to 100%.
              </p>
            </div>
          </div>
        <?php } ?>
        <div class="metabox">
          <h2>About</h2>
          <div class="metabox-content">
            <p>
              This demo shows how to create dynamic progress bar images using
              the <acronym title="PHP Hypertext Preprocessor">PHP</acronym>
              <abbr title="GD Graphics Library">GD</abbr> functions.
              To learn how it works, check out the
              <a href="http://db.org/demo/progress-demo.php/source-demo"
title="PHP source code for the demo script">source for the demo</a>
              and
              <a href="http://db.org/demo/progress-demo.php/source"
title="PHP source code for the image generator">the source for the
script creating the images</a>.
            </p>
            <p>
              If you want to use the script, you will need to download
              <a href="http://db.org/downloads/fragments.tar.gz"
title="Archive containing the style fragments used in this demo">the
style fragments</a>
            </p>
          </div>
        </div>
<?php include('middle.php'); ?>
        <?php if($show == 'form') { ?>
          <h2>Demo</h2>
          <form method="get" action="http://db.org/demo/progress-demo.php">
            <table>
              <tr>
                <td>
                  Style:
                </td>
                <td>
                  <select name="style">
                    <option value="winxp">Win XP</option>
                    <option value="osx">OSX</option>
                    <option value="led">LED</option>
                    <option value="solaris">Solaris</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  Width:
                </td>
                <td>
                  <select name="width">
                    <option value="120">120</option>
                    <option value="240">240</option>
                    <option value="480">480</option>
                    <option value="640">640</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  Steps:
                </td>
                <td>
                  <input type="text" name="total" value="12" size="4">
                  <input type="hidden" name="done" value="0">
                  <input type="submit" value="Start">
                </td>
              </tr>
            </table>
          </form>
        <?php } else if($show == 'source-demo' || $show == 'source') { ?>
          <h2>Source</h2>
          <pre class="php-source"><?=$source?></pre>
        <?php } else { ?>
          <h2><?=$done?>/<?=$total?></h2>
          <p>
            <img src="<?=$uri?>" alt="Progress: <?=$done?>/<?=$total?>"/>
          </p>
          <p>
            <?php if(isset($prev)) { ?>
              [<a href="<?=$prev?>">prev</a>]
            <?php } ?>
            [<a href="http://db.org/demo/progress-demo.php">new</a>]
            <?php if(isset($next)) { ?>
              [<a href="<?=$next?>">next</a>]
            <?php } ?>
          </p>
        <?php } ?>
<?php include('footer.php'); ?>
Subject: Re: Creating a Monetary Goal Graphic on the Web
From: colinsummers-ga on 30 Nov 2004 06:53 PST
 
Wow. That's really cool, but I'm running a tcl server, so PHP doesn't help me much.

Become a research. 

It's interesting that no one else has touched it, though.

--Colin
Subject: Re: Creating a Monetary Goal Graphic on the Web
From: marcbb-ga on 14 Dec 2004 09:01 PST
 
Most (if not all) browsers will happily scale an image from its
original size to whatever size is specified by the height and width
attributes in the <img> tag. The simplest way to do your progress bar,
without having to generate images server-side, is to provide 2 images,
one color for the "done" part of the bar, and another for the "to do"
section.

Let's say you want the total length of the bar to be 100 pixels (make
it nice and simple). If you're at $4,000 of $15,000, that's:

100 * (4000 / 15000) = 26.67% complete, so your "done" image is set to be
   <img src="done.gif" width=27 height=10>
and your "to do" image is

100 - 27 = 73
<img src="todo.gif" width=73 height=10>


Of course, this will only work for simple solid color bars that can be
stretched without distortion.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy