Using Google Chart API to create dashboards and sparklines

A few posts back I talked about using a plugin to the jquery javascript library to create sparklines in blog posts. One of my readers suggested using Google’s chart api to instead create the sparklines. From Google:

What is the Google Chart API?

The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.

I’ve come to the conclusion that this is a much better way to generate sparklines for use in blogs – you don’t have to worry about hosting of javascript, load times are greatly reduced, it’s compatible for RSS readers that can show images, and email programs will show them. I have also found that the automatic formating that WordPress applies to a post will continue to mess with the code, resulting in the code breaking repeatedly.

Using the tool has also become a lot easier as there is now an image chart editor which provides a graphical interface to the different charts and options available.

Here’s the code to produce a sparkline like this 

<img title=”Revenue 12 months, range 4.5m to 6.7m” style=”vertical-align:text-bottom;” src=”http://chart.apis.google.com/chart?chf=bg,s,00000000&chs=70×20&cht=ls&chco=000000&chds=0,70&chd=t:50.179,40.918,data continues&chls=0.5&chma=0,2&chm=o,FF0000,0,500,5″ width=”70″ height=”20″ alt=”" />

Basically an <img> tag, a title to describe the sparkline axes, a CSS inline style to align the image with the text bottom, and a call to the api that has the following: chart background set to transparent, chart size 70px by 20px, chart type line, line color black, range of y axis (0 to 70), chart data type text, comma delimited data (no spaces allowed anywhere in the URL), line width 0.5px, margins 0 except for 2px on the right to allow space for the marker, round marker in red at point 500 (i.e. unless you have more than 500 points, always the last point).

I haven’t worked out if you can automatically add markers for highest point, lowest point, but you could add them manually. It wouldn’t be at all hard to write script (php or whatever) to automatically pull the data, add any markers you want, and output the url.

YTD Revenue

The range of charts that are available is impressive, and you could make a nice dashboard pretty easily – it even has the revving gauge style charts, if that’s your thing…

Data Driven helps you turn your data into decisions through data analytics and dashboard design. Data Driven is based in Boston, MA, but works throughout New England and the US.

3 Comments


  1. Alex Kerin
    Jul 11, 2010

    You can also do bar chart sparklines:

    though no way that I can see to mark negative bars a different color


  2. Nishan Sothlingam
    Aug 05, 2010

    Do you feel that this could potentially be slow if you’re serving to a lot of clients?


    • Alex Kerin
      Aug 05, 2010

      Depends I guess, hundreds at the same time – maybe, thousands, who knows? You can’t use this method for sensitive information (as you send the data to Google), but if you were the NYT – I guess you’d some caching of the img.

Leave a Reply