By dshaw on

Can anyone point me to a simple "fundraising thermometer" suitable for use with Drupal? By this I mean the classic image of a thermometer representing target of funds to raise and the amount the thermometer is full represents how far towards your target you are.

I've checked out the ChipIn module, but it requires you to use their services. All I'm after is something where I could manually enter the target and the current funds raised and a simple thermometer image could be presented in a block somewhere.

Any suggestions?

⋅ Categories: Drupal 4.7.x

Comments

vm’s picture

vm commented

http://www.entropyfarm.org/software/thermo/

there were quite a few other scripts on google as well, using search term: fundraising thermometer.

I do not know of any community released modules of this nature, except for the chip in module.

newms’s picture

newms commented

CiviCRM has a block that displays a fundraising thermometer as part of its CiviContribute. CiviCRM has a lot of other stuff too as well, so I'm not sure if this is what you want as it may be too involved. But you can have a look here to see for yourself.

newms

psynapz’s picture

psynapz commented

FastTrack Fundraising has a pretty nice thermometer: http://www.fasttrackfundraising.com/fundtracker_create.php.

Looks like it is exactly what you're looking for - you just enter in the target and current funds raised and it presents the thermometer in a block that you can copy and paste anywhere.

dshaw’s picture

dshaw commented

Thanks for the tip. I think I found them when I was looking. The thermometer is exactly what I need. However there were two issues I had with them: they collect (and hence control) the money; and they don't operate internationally (which is no good for me as I'm in Australia).

david.benoit’s picture

david.benoit commented

Try http://xdal.org/thermometer/

I've tried to make it really easy to use, somewhat configurable, and fast.

biott’s picture

biott commented

dshaw,

If you have not located a fundraising thermometer suitable for your needs yet, I just found a new one just posted by Easy Fundraising Ideas that looks very sharp and easy to use. You can check it out here:

http://www.easy-fundraising-ideas.com/tools/fundraising-thermometer/

Their large one is a little too large for me but they do offer a smaller size which I found to be perfect. They give you links with the thermometer that make it easy for you to update but if you look at the code you will see how to update it yourself without having to return to their site. I have done business with this company and love them! Which is how I found about about their new thermometer.

Hope this helps someone out there!

mirabuck’s picture

mirabuck commented

http://drupal.org/project/donations_thermometer

schoolfu’s picture

schoolfu commented

I know its been a while since your original post, but here's a fundraising thermometer that takes things to a whole new level.

http://www.school-fundraisers.com/fundraising-thermometer.php

This thermometer has customizable features (thermometer size, fill colors, background colors, various currency options, and various themes). Plus, there's no need to copy and paste code each time you want to update the thermometer. There's a custom control panel where you can easy adjust the thermometer.

pollegie’s picture

pollegie commented

I did this with a very little script and some CSS to create a very clean thermometer.

I created a new block with PHP filter:

<?php 
$moneyneeded = 85000;
$moneyreceived = 20000;
$moneypercentage = round(($moneyreceived *100)/$moneyneeded );
?>
<div class="thermoouter">
	<div class="thermototal">
	    <div class="thermoreceived" style="width:<?php echo $moneypercentage ; ?>%;"></div>
    </div>
</div>    
<p style="text-align:right">€ <?php echo $moneyneeded ; ?></p>
<p>We now have <?php echo $moneypercentage ; ?> % of total costs.</p>

And I added some CSS to my theme stylesheet:

.thermoouter{
	width:243px;
	padding:1px;
	border: 1px solid #AA5303;
	border-radius: 4px;
}

.thermototal{
	height:20px;
	width:100%;
	background-color: #F00;
	border-radius:4px;
}

.thermoreceived{
	height:20px;
	background-color: #0F0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}

To change the numbers over time just edit the variables in the block

yorkshire-pudding’s picture

yorkshire-pudding commented

Thank you. This bit of code works perfectly. I was able to easily change to colours and the text. Much better than having to sign up for a third party site.

SeeLion’s picture

SeeLion commented

I was looking for a vertical version, so I adapted yours and combined the CSS for rapid test & tune:

<?php 
$pledge_goal = 85000;
$pledges_received = 20000;
$pledge_percentage = round(($pledges_received *100)/$pledge_goal );
?>

Goal $<?php echo $pledge_goal; ?>

<div class="thermoouter" style="position:relative; width:20px;height:243px; padding:1px; border: 1px solid black; border-radius: 4px;">
        <div class="thermoinner" style="position:absolute; bottom:0; width:20px; background-color: #F00; border-bottom-right-radius:4px; border-bottom-left-radius:4px; height:<?php echo $pledge_percentage ; ?>%;"></div>
</div>
<?php echo $pledge_percentage ; ?>% of the goal.
<p>Pledges received $<?php echo $pledges_received; ?></p>
yorkshire-pudding’s picture

yorkshire-pudding commented

I deployed this to great effect on one of my client sites. I have followed SeeLion's tip and added the CSS into the PHP snippet. Additionally, I changed the outer width to percentage as I noticed it was sticking out the side of the block when I viewed in on my old laptop.

<?php
$moneyneeded = 20000;
$moneyreceived = 1000;
$moneypercentage = round(($moneyreceived *100)/$moneyneeded );
?>
<p>Please help us raise £20k to start the Blood Bikes service</p>

<div class="thermoouter" style="width:100%;
                                        padding:1px;
                                        border: 1px solid #8b0000;
                                        border-radius: 4px;">
                                       

     <div class="thermototal" style="height:20px;
                                             width:100%;
                                             background-color: #ffffff;
                                             border-radius:4px;">
        
          <div class="thermoreceived" style=     "height:20px;
                                                       background-color: #8b0000;
                                                       border-top-left-radius:4px;
                                                       border-bottom-left-radius:4px;
                                                       width:<?php echo $moneypercentage ; ?>%;">
          </div>
   
     </div>
    
</div>   

<p style="text-align:right">£ <?php echo $moneyneeded ; ?></p>
<p>We now have <?php echo $moneypercentage ; ?> % of the target.</p>
frederickjh’s picture

frederickjh
he/him
Primary language English
Location The Big Island of Hawai'i
commented

Hi and thanks to all that posted good information above about Donation Thermometers. I took the code and modified it to suit my needs and taste. I post it here below for any that can use it.

I have changed the bar background to a three color gradient and added formatting for the displayed numbers. Currently setup for Swiss Francs. Google PHP number_format() for info on how to change this. There maybe some other things that I change too.

<?php
$updatedate="12. März";
$moneyneeded = 50000;
$moneyreceived =10000;
$currencyprefix = "Fr.";
$formatedmoneyneeded = number_format($moneyneeded, 2, '.', '\'');
$formatedmoneyreceived = number_format($moneyreceived, 2, '.', '\'');
 
$moneypercentage = round(($moneyreceived *100)/$moneyneeded );
$percentageneeded =round(100-$moneypercentage);
?>
<p>Please help us reach our goal!</p>
<div class="thermocontainer" style="position: relative;">
  <div class="thermoouter" style="width:100%;
                                        padding:1px;
                                        border: 1px solid #77B5CE;
                                        border-radius: 4px;">             

  <div class="thermototal" style="height:20px;
                                           width:100%;
  /* Gradient colors: Green #14FF46 , Yellow FFFF14 , Red #FF4614  */
        /* fallback */
	background-color:#FF4614;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left center, right center, color-stop(0.32, #14FF46), color-stop(0.66, #FFFF14), color-stop(0.83, #FF4614));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(180deg, #14FF46, #FFFF14,#FF4614);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(180deg, #14FF46, #FFFF14, #FF4614);
	/* ie10 */
	background-image: -ms-linear-gradient(180deg, #14FF46 0%, #FF4614 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(180deg, #14FF46 0%,#FFFF14 51%,#FF4614 100%);
	/* The "standard" */
	background-image: linear-gradient(180deg, #14FF46, #FF4614);
                                             border-radius:4px;">
        
  <div class="thermoreceived" style=  "height:20px;
                                                       position:absolute;
                                                       align:right;
                                                       right: -2px;
                                                       background-color: #ffffff;
                                                       opacity:0.85;
                                                       border-top-left-radius:-4px;
                                                       border-bottom-left-radius:-4px;
                                                       width:<?php echo $percentageneeded ; ?>%;
                                                       border-width:2px;	
                                                       border-style:none none none groove;
                                                       border-left-color:#000000">
          </div>
     </div>
  </div>   
</div>
<p style="text-align:right"><?php echo $currencyprefix ; ?> <?php echo $formatedmoneyneeded ; ?></p>
<p>As of <?php echo $updatedate ; ?> we have <?php echo $currencyprefix ; ?> <?php echo $formatedmoneyreceived ; ?> (<?php echo $moneypercentage ; ?>%) of our goal.</p>

I would have also uploaded a screen shot but even though the editor will let you add images they must be upload to drupal.org and there is no widget to attach files in the forum it seems. Too bad it is a pretty one.

God Bless!

Frederick

matt b’s picture

matt b
Primary language English
commented

This is based on http://www.sitepoint.com/forums/showthread.php?889440-Code-for-a-fundrai... and http://jsfiddle.net/UpnKF/ and works on Drupal 7.

Bit concerned that I had to use drupal_add_js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",array('type' => 'external', 'scope' => 'header', 'weight' => 4)); to get it working, when I thought this would have worked with Drupal's own JQuery library - but I don't know enough about JQuery to make this work without it.... and this disables JQuery for the rest of your site!

<?php
$moneyneeded = 25000;
$moneyreceived = 10000;
$currencyprefix = "£";
$decimals = "0";
$thousands_sep = ",";
$dec_point = ".";

$formatedmoneyneeded = number_format($moneyneeded, $decimals, $dec_point, $thousands_sep);
$formatedmoneyreceived = number_format($moneyreceived, $decimals, $dec_point, $thousands_sep);

$style= <<<STYLE
.thermometer {
    float: left;
    margin:0 150px;
    width:70px;
    height:300px;
    position: relative;
    background: #ddd;
    border:1px solid #aaa;
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
        -ms-border-radius: 12px;
         -o-border-radius: 12px;
            border-radius: 12px;
    -webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
       -moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
        -ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
         -o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
            box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
.thermometer .track {
    height:280px;
    top:10px;
    width:20px;
    border: 1px solid #aaa;
    position: relative;
    margin:0 auto;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
    background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background-position: 0 -1px;
    background-size: 100% 5%;
}
.thermometer .progress {
    height:0%;
    width:100%;
    background: rgb(20,100,20);
    background: rgba(20,100,20,0.6);
    position: absolute;
    bottom:0;
    left:0;
}
.thermometer .goal {
    position:absolute;
    top:0;
}
.thermometer .amount {
    display: inline-block;
    padding:0 5px 0 60px;
    border-top:1px solid black;
    font-family: Trebuchet MS;
    font-weight: bold;
    color:#333;
}
.thermometer .progress .amount {
    padding:0 60px 0 5px;
    position: absolute;
    border-top:1px solid #060;
    color:#060;
    right:0;
}
.thermometer.horizontal {
    float: right;
    margin: 35px 70px 35px 35px;
    width:350px;
    height:70px;
}
.thermometer.horizontal .track {
    width:90%;
    left:0;
    height:20px;
    margin:14px auto;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
    background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:      -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:     -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:    -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background:   linear-gradient(to right, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
    background-size: 5% 100%;
}
.thermometer.horizontal .progress {
    height:100%;
    width:0%;
}
.thermometer.horizontal .goal {
    left:100%;
    height:100%;
}
.thermometer.horizontal .amount {
    bottom:0;
    position: absolute;
    padding:0 5px 50px 5px;
    border-top:0;
    border-left:1px solid black;
}
.thermometer.horizontal .progress .amount {
    border-left:0;
    border-top:0;
    border-right:1px solid #060;
}
STYLE;

$script = 'function thermometer(id) {' . "\n";
$script.= '    "use strict";' . "\n";
$script.= '    var $thermo = jQuery("#"+id),' . "\n";
$script.= '        $progress = jQuery(".progress", $thermo),' . "\n";
$script.= '        $goal = jQuery(".goal", $thermo),' . "\n";
$script.= '        goalAmount = ' . $moneyneeded . ",\n";
$script.= '        progressAmount = ' . $moneyreceived . ",\n";
$script.= '        percentageAmount,' . "\n";
$script.= '        isHorizontal = $thermo.hasClass("horizontal"),' . "\n";
$script.= '        newCSS = {};' . "\n";
$script.= '    percentageAmount =  Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //make sure we have 1 decimal point' . "\n";
$script.= '    $goal.find(".amount").text( "' . $currencyprefix . $formatedmoneyneeded . '");' . "\n";
$script.= '    $progress.find(".amount").text( "' . $currencyprefix . $formatedmoneyreceived . '");' . "\n";
$script.= '    $progress.find(".amount").hide();' . "\n";
$script.= '    newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";' . "\n";
$script.= '    $progress.animate( newCSS, 1200, function(){' . "\n";
$script.= '        $(this).find(".amount").fadeIn(500);' . "\n";
$script.= '    });' . "\n";
$script.= '}' . "\n";
$script.= '$(document).ready(function(){' . "\n";
$script.= '    thermometer("thermo");' . "\n";
$script.= '});' . "\n";

drupal_add_css($style,array('type' => 'inline'));
drupal_add_js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",array('type' => 'external', 'scope' => 'header', 'weight' => 4));
drupal_add_js($script,array('type' => 'inline', 'scope' => 'header', 'weight' => 5));
?>
<div id="thermo" class="thermometer horizontal">
        <div class="track">
            <div class="goal">
                <div class="amount"> <?php echo $moneyneeded; ?> </div>
            </div>
            <div class="progress">
                <div class="amount"> <?php echo $moneyreceived; ?> </div>
            </div>
        </div>
</div>
matt b’s picture

matt b
Primary language English
commented

I've now got this working with some updates to the Donations Thermometer port for Drupal 7 - #1107866: 7.x port

puckhead’s picture

puckhead commented

Thanks for the suggestions here. This is my finished product using some of the code from others, so I'm sharing back. I'm not an expert so there might be some problems with older browsers and such. This isn't tied to any database or anything, one must manually change the height of the div in the code to increase the thermometer level.

demo link:
http://www.jrrb.com/cdm/campaign/fundraising-thermometer.html

I used Jquery 1.10.2 for the animation, so the link to that js file will have to be there. http://jquery.com/download/
Thermometer image I used: http://www.jrrb.com/cdm/campaign/img/thermometer.png

css:

<style type="text/css">

.thermoouter{
	background-image:url(img/thermometer.png);
	background-repeat:no-repeat;
	position:relative;
	width: 150px;
	height: 578px;
	margin:10px;
}

.thermototal{
	height:20px;
	width:100%;
	background-color: #F00;
	border-radius:4px;
}

.themographic {
	width:150px;
	height:auto;
	overflow:visible;
}
</style>

HTML:

<body>
<script>
$(window).load(function() {
    $("#thermo").animate({height:'333px'}, 5000);
});
</script>

 <p>Campaign Progress</p>
<div class="thermoouter">
	<div class="thermoinner" id="thermo" style="position:absolute; bottom:0; width:150px; background-color: #cc0000; height:50px; overflow:visible;"><img src="img/thermometer.png" style="position:absolute; bottom: 0px; left: 0px; height:578px;width:150px;max-height:none;"/></div>
	
        
</div>


</body>

To change the height of the red in the thermometer, change the height in the script (now 333px).