Create Sticky Notes and Speech Bubbles using Google Charts

Learn how to create yellow sticky notes, speech bubbles, taped notes, callouts and more using the popular Google Image Charts tool.

July 22, 2012
google image charts

Google Charts is a perfect web-based tool for converting your data tables into colorful and attractive charts in few easy steps. It supports a wide variety of charts – from pie charts to sparklines to Venn diagrams – and there’s a helpful wizard to guide you through the process.

There’s one more reason why I prefer Google Image Charts over other online solutions – you can embed a chart in your website using a data URL with an <img> tag while the actual image is rendered live on Google Servers. If the data changes later, you just have modify the chart URL and the chart will update itself.

Sticky Notes and Speech Bubbles

Other than data visualization charts, the online Google Charts tool can also be used for creating images that can bring attention like the popular yellow sticky notes, callouts, thought bubbles, pinned notes and more. Here are some examples:

You can include custom text inside these images, the text color can be changed to any hexadecimal number and there a variety of icons that you may include in the images.

Like the regular image charts, these images are also dynamic and thus you don’t have to upload them anywhere before using them in your website.

To create a chart, all you need to do is create a URL in the following forward and then include it on a web page using the <img> tag. Check the Google Charts API to explore the options in greater detail.

The size of the bubbles and callouts is fixed and thus they won’t fit large string of text. The text inside the image flows automatically but you may include the pipe symbol (|) to create new lines. The words may be separated with a plus (+) symbol as including spaces would break the image URL.