How do you plan to populate the percentage? Will it be pulled from a db or manually updated? You could easily make a simple vertical div of x pixels in height, then its just a matter of calculating a file inside of that div based on your goal and current amount.

quantass
—
2012-11-02T03:42:05Z —
#3

I was looking for the same thing. Not sure if you found your tool. This one seems very good satisfying your needs:

You'll notice I've put some values in there for the goal amount and the progress amount. The reason they are unformatted is so it's easier to parse them with JavaScript, we can format them later

These values could have come from a database and inserted on the server side, of course it's possible to update the progress bar of this "thermometer" dynamically too if you were to get new values via AJAX or something like that.

Now that we have some basic markup, we can add some CSS to make it look all pretty (well, pretty is a relative term, I am definitely no designer!).

Now, if you were to load this up in your browser right now, we wouldn't see anything too exciting, just the two amounts on either end of this thermometer.

We'll need a little bit of JavaScript to spuce things up.

First up, I realised that we need to format the numbers like currency at some point, so I did a quick google search, since I figured there had to have been a lot of people that have written something to format numbers in JavaScript.

I found this little snippet (I've adapted it a little) on Stack Overflow

ok got it working.. now can i have 2 of these graphs running on the same page but displaying diff ammounts..

AussieJohn
—
2012-11-12T00:54:15Z —
#10

Caspy said:

ok got it working.. now can i have 2 of these graphs running on the same page but displaying diff ammounts..

You could but you'd have to change a few things around. I'm at work at the moment but I'll take a look at it when I get home.

Caspy
—
2012-11-12T01:00:39Z —
#11

well im in the UK so am a bit ahead of you in time.. so ill check back tomorrow and see if we got any developements.. thx for the help as this is the best script i have found in a long night of searching and trying of scripts

The only real difference is that you now call the function with an id as the first parameter.

//call without the parameters to have it read from the DOM
thermometer("thermo1");
// or with parameters if you want to update it using JavaScript.
// you can update it live, and choose whether to show the animation
// (which you might not if the updates are relatively small)
thermometer("thermo2", 1000000, 425610, false);

Added a class to one of the thermometers to indicate that it should be horizontal.

<div id="thermo2" class="thermometer horizontal">

Referencing the original JS code for the thermometer function, we add 2 more variables:

isHorizontal = $thermo.hasClass("horizontal"),
newCSS = {};

isHorizontal's purpose is pretty obvious, the newCSS object will allow us to specify the new CSS for the progress part of the thermometer since we now need to change the property that is changed dynamically.

I just found this code and it's just what I've been looking for. And it's a very elegant-looking thermometer, so I'd like to use it on my site. Sorry for asking such a dumb question, but I really just have a basic understanding of coding. How do I set this up on my server? Does the html and javascript code go into the same file? And does the CSS code go into its own file? And, if so, what should the .css file be named? Again, sorry for asking such rudimentary questions. I wasn't able to figure it out on my own when I tried to use the code. Thanks for any help you can provide to a true novice!

AussieJohn
—
2012-12-03T02:36:01Z —
#20

dlc3172 said:

I just found this code and it's just what I've been looking for. And it's a very elegant-looking thermometer, so I'd like to use it on my site. Sorry for asking such a dumb question, but I really just have a basic understanding of coding. How do I set this up on my server? Does the html and javascript code go into the same file? And does the CSS code go into its own file? And, if so, what should the .css file be named? Again, sorry for asking such rudimentary questions. I wasn't able to figure it out on my own when I tried to use the code. Thanks for any help you can provide to a true novice!

You can put all the JavaScript and CSS in the same document - helpful if you're only going to implement this on 1 page.

A common solution is to place all CSS and JavaScript in external files so that if you want to reuse it on multiple pages it is easy to keep the code in sync and makes sure the files are cached between pages (which means less bytes to download for users)

Let's take the latter approach - Here is a sample HTML file - we'll assume that the CSS is in thermo.css and the JavaScript is in thermo.js