Xcelsius Thermometer Chart

In just a few quick and easy steps, you can generate a thermometer chart with out of the box Xcelsius functionality.
Here is how it looks all together with a line chart to toggle the goal line.

I’ve seen a number of thermometer chart options lately, and wanted to create something that will look like my other components and will be very easy to replicate.  To accomplish this, I have decided to use an existing progress bar component and a PNG image with transparency.

Step 1.  Get some data.

Step 2. Create a PNG image with a transparent center (or use ours)

Step 3. Insert a progress bar

Step 4. Insert Image (Overlayed)


After that, you can add an elipse with transparency to make the buble shine…

Feel free to download the source files. I have also included the PNG with transparency for creating your own thermometers.

Josh Tapley

  • Pingback: Tweets that mention Xcelsius Thermometer Chart – MyXcelsius.Com -- Topsy.com()

  • Same effect with some other possibilities is possible with the XProgressImage in the XComponents at http://www.antivia.com/xcomponents

    • chrisham

      Thanks Donald….. that’s a great link…. Registered and can’t wait to try it!

  • Joshua Tapley

    Agreed, and this is usually what you see. I just wanted to further test image transparency and work on somehthing that would match my other components.

    Additionally, you could link the progress bar to change colors depending on how close you were to goal.

    My favorite part ended up being the goal line. I love that it moves so fluidly.


  • Santosh

    Josh thanks for posting this tip, it is very useful

  • chrisham

    Josh, what a timely post……. I was just this week struggling to get a dashboard with this feature done……
    Just a question…….. and a bit away from the Xcelsius stuff, but how did you draw this Themometer with the Centre clear and transparent. Understanding this would hopefully enable using other objects as a measuring tool……. Thanks Again!

  • Joshua Tapley

    While I’ve been trying to stick to PowerPoint for creating objects to make it as accessible to everyone as I can, this “negative space” design had to be done in Photoshop.

    I’m sure that you could make this in GIMP or Inkscape if you were looking for a free option.

    If you have any specific ideas, I’d be willing to try my hand at making templates.


    • chrisham

      Great tip once again…… Never knew about this Inkscape… Downloaded the Portable version, and some tutorials…. Lots of use of it in future for sure…..

  • Joshua Tapley

    Both the SWF and downloadable ZIP file have been updated.