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.
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.
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.