Latency-friendly bar charts using Unicode characters

Technologies: HTML 4+, CSS 2+, Modern web browser

A typical web page bar chart uses an image from a presentation or spreadsheet application. The network latency cost for the image is high, slowing down the web site. Instead, create bars using rows of Unicode block characters: █. The characters are much faster to download and they scale well as the font size is changed.

Bar chart methods

Let's look at a few standard ways to create bar charts, and then a latency-friendly way.

A typical bar chart using an embedded image

For a typical image bar chart, build a chart in a presentation or spreadsheet application and save it as a PNG or GIF image. Add an <img> tag to the page to show the image.

Sample bar chart using a single image

Single image bar chart
HTML <p style="text-align: center">
   <img src="bar_chart_sample.png" width="500" height="170"
   alt="Sample bar chart using a single image" />
</p>

Of course, this is very simple and widely used. However, a good-sized image may require 4 or 5 Kilobytes to download plus the latency time spent waiting for the image. While a few kilobytes is nothing to worry about, the latency is a problem. Latencies for international visitors, and those using a cell phone browser, can be 1/2 second or more. That's expensive for just one small bar chart.

A bandwidth-friendly bar chart using a stretched image

Another common method saves bandwidth. Instead of a custom image for every bar chart, create a generic short bar image. In a table, stretch the bar image to different lengths for each bar. If the bar image includes a drop shadow, so will the bars.

Email per day
Personal enhancement 100
Investment advice 50
Nigerian in need 30
Greeting cards 10
Real email 5

Stretched image bar chart
HTML <table class="barchart" cellspacing="0" cellpadding="0"
   summary="Sample bar chart using stretched images">
   <caption>Email per day</caption>
   <tr>
      <th>Personal enhancement</th>
      <td>100</td>
      <td class="bar"><img src="bar.gif" height="24" width="300"
      alt="" /></td>
   </tr>
...
</table>
CSS .barchart { margin-left: auto; margin-right: auto;
   font-weight: bold; font-style: italic; }
.barchart caption { text-align: center; padding-bottom: 1em; }
.barchart th, .barchart td { text-align: right;
   vertical-align: middle; line-height: 1em; }
.barchart td { color: #3183ff; padding-left: 10px }
.barchart .bar { text-align: left; }
Image

The short bar image is just 245 bytes, but latency remains the main problem. It's still up to 1/2 second for international and cell phone visitors, regardless of the image size. To go faster, get rid of the image entirely.

A latency-friendly bar chart using Unicode block characters

Instead of using an image to build bars, use a row of Unicode "block" characters █. These are supported by all current browsers. Use &#x2588; in HTML for each Unicode block character. Without spaces between the characters, browsers consider the row to be one "word" and they won't wrap the Unicode characters and mangle the bar chart.

Email per day
Personal enhancement 100 ████████████████████
Investment advice 50 ██████████
Nigerian in need 30 ██████
Greeting cards 10 ██
Real email 5

Block character bar chart
HTML <table cellpadding="0" cellspacing="0" class="barchart"
   summary="Sample bar chart using block characters">
   <caption>Email per day</caption>
   <tr>
      <th>Personal enhancement</th>
      <td>100</td>
      <td class="barblock">
      &#x2588;&#x2588;&#x2588;&#x2588;&#x2588;
&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;
&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;
&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;</td>
</tr>
...
</table>
CSS .barchart { margin-left: auto; margin-right: auto;
font-weight: bold; font-style: italic; }
.barchart caption { text-align: center; padding-bottom: 1em; }
.barchart th, .barchart td { text-align: right;
vertical-align: middle; line-height: 1.5em; }
.barchart td { color: #3183ff; padding-left: 10px; }
.barchart .barblock { text-align: left; font-style: normal;
font-size: 18px; padding-bottom: 7px;
text-shadow: gray 3px 3px 5px; }

For browsers that support standard CSS 2.0 text shadows, such as Safari, the text-shadow style adds a soft drop shadow under the bars. For older browsers, there is no drop shadow but the bar chart still looks fine.

Comparisons

Comparing features

All three methods work in all modern web browsers on all platforms. Some quirky font handling in Internet Explorer 6 and 7 shortens block character bars occasionally, depending upon the font and size in use. Pre-IE 5 era browsers don't recognize the Unicode character syntax, or most of CSS either. Fortunately, browser statistics show that these ancient browsers haven't been common since 2002.

The single image method is obviously more flexible. Graphic designers can create glitzy bar graphs with perspective, shadows, glossy finishes, or whatever. But the fancy image takes time to download, slowing down the site. The other two methods are limited to standard web fonts and simple layouts, but they are much faster.

When printed, the single image bar chart method is constrained to the resolution, and compression artifacts, of the original image. The other two methods use the printer's high-resolution font rendering and produce much crisper results.

Accessibility for the single image bar chart is weak. An ALT value on the image tag should provide a text explanation, but this can be tedious for a large bar chart with many entries. The other two methods use text labels for each bar. The labels are readable by screen readers, and they enlarge correctly when visually impaired visitors increase their browser's font size. The bars of the Unicode block character chart grow too, insuring that the entire chart is readable at arbitrary sizes.

Comparing sizes

Below are the HTML, CSS, and image sizes for the three methods. Both image methods also include about 250 bytes for the web server's HTTP response sent with the image. In total, the Unicode block character method is 1/10th the size of the image bar chart.

Additional page size (bytes)
Type of data Single image Stretched image Block character
Compressed HTML 151 333 277
Compressed CSS 0 211 250
Compressed image 4,517 245 0
HTTP response for image 250 250 0
TOTAL 4,918 1,039 527

Comparing load times

The time to load a bar chart depends upon the data size, of course, but also the bandwidth and latency of a visitor's Internet connection. US visitors to a US web site may see 500 Kilobytes/second with a 1/10th of a second latency, but overseas visitors to the same site may see only 20% of that bandwidth and double the latency. Cell phone visitors have it much worse with less than 10% of the bandwidth and five times the latency.

Below are estimates for each bar chart method's load time for US home, international, and cell phone visitors to a US web site. The load time is the latency time plus the download time.

Additional page load time (seconds)
  Single image
Stretched image
Block character
Connection Latency + Download Latency + Download Latency + Download
US home to US server
500 Kbytes/s, 100ms latency
0.100 + 0.009 = 0.109 0.100 +0.002 = 0.102 none + 0.001 = 0.001
International home to US server
100 Kbytes/s, 200ms latency
0.200 + 0.049 = 0.249 0.200 + 0.010 = 0.210 none + 0.005 = 0.005
Cell phone to US server
30 Kbytes/s, 500ms latency
0.500 + 0.164 = 0.664 0.500 + 0.035 = 0.535 none + 0.018 = 0.018

If we just look at bandwidth, obviously the bar chart image takes the most time to download. But at 1/100th of a second to a US home, and 1/15th of a second to a cell phone, the download time for the image is negligible.

The real problem is latency. To a US home, the time spent waiting to get the image bar chart is 10 times longer than the time to download it. The stretched bar image is smaller, but the latency is the same and again the wait time overwhelms the download time. For a cell phone, the latency is much higher and the image's load time much worse.

The Unicode block character bar chart is the fastest. It has no images to download and no latency delays. The chart loads in just 1/40th of the time of the image-based methods.

These load times are estimates only, of course. The real world is more complicated. Bandwidths and latencies vary from moment to moment. The latency on a cell phone, for instance, can vary from 1/2 second to 3 seconds or more, depending upon signal strength. Real world latencies also vary with web server load. Web browser pipelining, keep alives, caches, and parallel downloads also affect the results.

Conclusions

Latency is a bigger problem than bandwidth. Latency-friendly design speeds up page loads by reducing the number of files required by a page. Pages load faster and demand less of the visitor's network connection and the web site's server.

The Unicode block character bar chart is certainly less flexible. But it avoids latency costs to download an image, giving it faster page load times. It's also crisper when printed and has better accessibility for visually impaired visitors.

The bar chart images can be cached, of course. But performance studies by Yahoo! found that visitors rarely arrive with your content already in their cache. Instead, they have to download it again on every visit. For that initial download, the block character bar chart is always faster. For subsequent page loads, the three methods are about the same.

Appendix: Other Unicode bar chart characters

Block characters work, but there are many other possibilities. Here are a few:

Bar charts with different characters
Blocks &#x2588; ██████████
Bars | ||||||||
Dollars $ $$$$$$$$$
Hearts &hearts; ♥♥♥♥♥
Bullets &bull; ••••••••
Angle quotes &raquo; »»»»»»»
Triangles &#x25B6; ►►►
Circles &#x25CB; ○○○○○○○○○○○○○
Boxes &#x25A0; ■■■■
Smiles &#x263A; ☺☺☺☺☺☺☺
Checks &#x2713; ✓✓✓✓✓✓
Stars &#x2605; ★★★★★★★★

Any character will do the job, and Unicode supports 100,000+ characters. Unfortunately, Unicode support varies between browsers and operating systems. Safari and Opera do a good job. Firefox is fair. Internet Explorer lags behind. You'll have to do careful testing when selecting characters to use. Some of the characters above will show up incorrectly as empty boxes on Internet Explorer, and as question marks in Firefox.

FileFormat.info has an excellent set of pages that list Unicode characters and provide browser test pages.

Further reading

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

Nadeau software consulting
Nadeau software consulting