Question:
How can I add progress / percentage bars for goals?
Answer:
There are several ways to handle this. One method is to use some simple PHP. (Code snippet provided by Chris Curtis.)
First, set up a weblog where you will enter these goals. Then set up a custom field, for this example we’ll use {percent_complete}.
Make the custom field a drop down, formatting: none, and then put 1-100 in the drop downs, since progress is measured from 1% to 100%.
In a template, use the following code:
<img src="/images/gold.gif" width="{percent_complete}" height="12" alt="{percent_complete}%" />
<img src="/images/bgbar.jpg" width="<?php echo (100 - {percent_complete}); ?>" height="12" alt="{percent_complete}%" />
<span style="margin-left: 4px; font-weight: bold; font-size: 80%;">{percent_complete}%</span>
Without the linebreaks.
You can use any image that is 1 pixel wide for this to work, just set the height as tall as you want. The PHP gives the background bar so that there is a point of comparison for the progress bar - where the image is how much is complete and the background is 100%
You’ll need PHP set to OUTPUT for this template to work.
Category:Tips Category:Templates