Progress Meters

A Progress Meter associates a dynamic graphical representation with an activity (such as, a TeamRaiser event, donation campaign, or advocacy alert) to visually show progress as you work towards a goal for the activity. In addition to traditional progress meters such as a thermometer or bar graph, you can choose from several different graphical representations, such as a cyclist, a runner, or a ship advancing toward a goal, as well as create your own.

You can use a progress meter in a Widget Progress Component, or insert a Progress Meter from the Components menu in the WYSIWYG Editor.

A progress meter is composed of several graphical images, including the:

  • Initial image that shows the starting point, or 0% of the goal achieved

  • Ongoing progress measurement image that will serve as the background on which the progress marker will move to show progress achieved toward the 100% goal marker. This image may contain actual points of progress (such as a race start and finish line or a line of palm trees on a beach),

  • Goal Met or Exceeded image to display once 100% of the goal has been achieved or exceeded

  • Sliding marker image to use at each progress point. will be placed along the static image to show the progress made towards the goal (such as a runner moving toward a finish line or colored dot) until 100% of the goal is achieved. The sliding image will always be centered over the percentage complete. If there is a precise pointer coming out of the sliding image, it needs to be centered.

If you want a scale on the background images in conjunction with the slider, the scale has to begin at exactly 1/2 the width of the slider from the left and end at exactly 1/2 the width from the right. The code will figure out that the range of motion of the sliding image is limited within those bounds so it will automatically exclude them from the percentage calculation.

You can select to fill the meter in a horizontal line (such as the runner racing for a finish line) or a vertical one (such as a thermometer or glass of liquid).

Your progress meter will be available from the Progress Meters List, where you can edit the name or images, copy it to create a slightly different one (for example, to change the progress marker), or delete it if you will no longer use it.