Progress bar chart

This section describes how to create a progress bar chart using the Image-Chart API. Progress bar are excellent to show the progress of something associated with your customer, your product or anything else. We have made it really easy to setup.

If you are already sending email including progress bars, but it takes a lot of resource to build and is not live, or, if you've thinking of ways to include a progress bar in your email - this is the solution.

Overview

Progress bars are a great way to show a customer the status of their loyalty points live via email.

Simple

Progress bars are nothing else that horizontal bar charts with negative margins (left_margin: -10px, bottom_margin: -10px):

chma=-10,0,0,-10

The chart below displays a 65% completion. The white part has 35% width:

chd=a:65|35

Gradient background

Of course we might want to display some progress from a bad state to a good state and express this with color. We can then leverage gradients to do that:

chf=bg,s,FFFFFF00|b0,lg,0,03A9F4,0.5,EA469E,0.1

• The first background fill bg,s,FFFFFF00 tells our API to render the chart with a transparent background color.
• The second background fill b0,lg,0,03A9F4,0.5,EA469E,0.1, tells that the first bar from our chart (b0), must have a linear gradient (lg) with a 0 degres angle (0) starting from color 03A9F4 to color EA469E. Read more about gradients here.

Multiple colors

If we wish to have something else that a white background for the uncompleted part, series colors are what we want! If you wish to send an email campaign for gold membership, leverage series colors:

chco=CFB948,E3E3E3

• CFB948 is the gold hexadecimal color of the progress bar first part
• E3E3E3 is the gray hexadecimal color of the progress bar second part