Thread

Hello all, I’m new to EE and did some searching through the forum, and was shocked I didn’t find a result, so here it goes.

I need to use the power of EE to create a dynamic progress bar/area.  The purpose is so that the client can login and publish donation updates to the channel, and see the amount of donations rise toward the goal amount.

I have a good idea of how to represent the CSS styling, however my question is this.  Has anyone developed or do they know of an example resource of something like this I can use for reference? 

If not, what would or could be the easiest way to go about this combining EE with CSS? (Envision a vertical rectangle 100px high by 30px wide that will fill up every time an amount is updated)

Thanks.

You have {count} and {total_results} as a single variable, so outputting a number of results for a given channel should be trivial.
http://ellislab.com/expressionengine/user-guide/modules/channel/variables.html

Awesome, I will check this out.  Do you or anyone else have a sample or example to link and show?  I’d like to see some sort of visual example of where this comes into play.

Also, it’s less about showing entries or count… and more about showing a result based on what IS entered.  Example:

Step 1. Someone donates $1,000
Step 2. Client publishes their donation amount, name, date
Step 3. Tracker updates the total visually.

I know there are tons of ways outside of EE to go about this, but I’m looking for one within, and the best recommendation.

Thanks!

One last bump, in hope of an idea or 2 😊

i saw this widget used on an internet radio station… similar to what you are intending?

Chip In

i saw this widget used on an internet radio station… similar to what you are intending?

Chip In

That’s near exactly it actually.  Or the donation tracker stuff seen here http://www.mycharitywater.org/p/campaign?campaign_id=9776

After talking with a friend, he said that ExpressionEngine cannot handle the calculations I’d need alone.  I wanted a div that adjusted in width automatically when a new amount was published to the donations channel.  So the exp tags would read a calculation and show a percentage (changing the div width)

For instance: I’d have to use PHP for something like this….

<div id=“donationbox”>
<div id=“donationbar”>
exp:channel:entries (tag where donation value is published by client)
<?php donationvalue=${donationtotal};?>

next…WHERE DIV FOR WIDTH IS
width=”<?php e[]$donationvalue/totalamount[x100];?>”
</div>
</div>

Btw, I realize the php syntax is wrong, just getting the point across….

I thought perhaps through Expression Engines variable system and it’s own IF statements I could accomplish the same thing without using PHP, Coldfusion or another scripting language…but I guess not?

there is a Simple Math plugin, don’t know if it’s robust enough for your needs

Thanks for the replies.  Could use parts of that.

I guess I want ExpressionEngine to set a variable and then read a channel entry to adjust the width of a div on the fly with it.

I want exactly what the link was here… http://www.mycharitywater.org/p/campaign?campaign_id=9776

but if no other ways to do this STRICTLY in EE… I’ll drop some scripting code in there from another language.

In case anyone wants/needs to know, a friend helped me come up with a PHP solution.

The following code will set the div width to the percentage of goal met. Thereby matching the width of background picture within the bar to the percentage of goal met so far. (It’s important that template is set to use PHP and is set to OUTPUT, the strip is due to EE trying to read the entire line of PHP as a string, even with html disabled)

I also started to add some flair to it with EE if statements reading a specific channel FIELD.

<h2>{title}</h2><p><span><div class="goal_amt"><?php echo (((int) strip_tags('{donation_value}'))/10000)*100; ?>%</div></span><br />
                        <div class="current_amt"><br />
                {if donation_value <= "999"}Starting Strong!<br />
                {if:elseif donation_value >= "1000" AND donation_value < "4999"}Moving right along…<br />
                {if:elseif donation_value >= "5000" AND donation_value < "5999"}Over Halfway there!</p>

<p>                {/if}<br />
                </div>

Which gives a custom message based on progress/width of the current donation total.(image attached)