Using Google Chart API

The Google chart API is a dynamic chart library that is hosted at Google. It's implemented as a web service that renders image chart based on a series of parameters. It is very easy to integrate this into your existing application. This is thanks to the simple url approach and no need to do any form of login into the service itself.

Overview

The Google chart API is a dynamic chart library that is hosted at Google. It's implemented as a web service that renders image chart based on a series of parameters. It is very easy to integrate this into your existing application. This is thanks to the simple url approach and no need to do any form of login into the service itself.

The chart API has the possibility to render a rich set of chart types:

  • Line chart (example)
  • Sparkline chart (line charts with a "medical" look) (example)
  • Bar chart (both vertical and horizontal) (example)
  • Pie chart (2d and 3d versions) (example)
  • Venn diagram chart (example)
  • Scatter plot chart (example)
  • Radar chart (example)
  • Map chart (visualize geographical maps) (example)
  • Google-o-meter chart (visualize progress) (example)

Most aspects of the chart is customizable. Colors, labels and some styles are customizable and varies per chart type. The google chart API documentation shows you all the various settings that can be applied.

Building a chart

To illustrate the usage of the chart API I will create a line chart that visualize average number of hits on mysite for the whole year. First off the url must start with the service url:

http://chart.apis.google.com/chart

The second thing I must add is the type of chart. A complete list of the type parameter can be found in the google chart API documentation.

cht=lc

The lc type is a line chart that is spaced evenly on the x-axis. You can also specify lxy wich you can set both x and y axis values. The next thing we want to set is size (in pixels) of the chart. I specify width to 300 and height to 200 in this example.

chs=300x200

If you paste in the resulting url, you will see an empty chart. That is becouse we do not have any data yet. The next thing is therefore to enter some data.

chd=t:14,99,130,77,155,170,88,71,111,131,155,230

If you use the complete url, you will see that the values over 100 is cut off. This is becouse the default scaling is 0 to 100. To set the scaling to 0 to 300 we use the following parameter:

chds=0,300

The complete url shows us now a chart with the right numbers, but we also need a label. To do so we need to set two parameters, chxt and chxl. The first one sets the axis that will be shown and the second is the actual labels. We set the x-label to show months and y-label to show the number of hits.

chxt=x,y&chxl=0:|jan|mar|may|jul|oct|des|1:|0|150|300

Now the complete url shows us almost what we want. The next thing we want is a grid. We want to set the grid to show two elements in y-axis and 5 elements in x-axis. Since google chart API always operate internally in 0 to 100 scale we need to specify 20 on x-axis and 50 on y-axis. This means x-axis grid line is displayed on every 20 and y-axis grid line is displayed on every 50.

chg=20,50

With the last modification the full url shows us a complete chart, but without a title. We display a title with chtt parameter. Note that space must be replaced by plus (+) sign. Line break is forced by pipe (|) sign. We also want to have the title in red and a bigger font. For the styling we use chts parameter.

chtt=MySite+Hits&chts=FF0000,20

So, after the all the settings we sit on the final url that we can use.

http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t:14,99,130,77,155,170,88,71,111,131,155,270&chds=0,300&chxt=x,y&chxl=0:|jan|mar|may|jul|oct|des|1:|0|150|300&chg=20,50&chtt=MySite+Hits&chts=FF0000,20

And the final resulting chart:

Google chart API has a lot of chart types, but the url building is almost the same for each chart type. Some charts has a more limited functionality, but others has a rich set of parameters to set. The documentation is very complete with alot of examples so I recommend to look at the documentation if this API interests you.

Integrating with Vertical Site

Previously we looked at how to create a chart url. As you can se the url can be pretty large and it is a pain to write if you need it dynamically. To integrate this type of charts in Vertical Site you can write a simple xslt function that creates a chart url. It is pretty easy and can be used both in page xslt and object xslt files.

To do this you can create a function in xslt that returns a link that generates the chart. This function can take a number of parameters, but I have in this example only one: the data.

The function can be created like this:

<xsl:function name="local:createMyHitsChart">
  <xsl:param name="data"/>
  <xsl:variable name="maxval" select="max($data)"/>
  <xsl:value-of select="ttp://chart.apis.google.com/chart"/>
  <xsl:value-of select="'?'"/>
  <xsl:value-of select="'cht=lc&chs=300x200&'"/>
  <xsl:value-of select="'chg=20,50&chxt=x,y&'"/>
  <xsl:value-of select="'chxl=0:|jan|mar|may|jul|oct|des|1:|0|'"/>
  <xsl:value-of select="$maxval"/>
  <xsl:value-of select="'&chds=0,'"/>
  <xsl:value-of select="$maxval"/>
  <xsl:value-of select="'&chd=t:'"/>
  <xsl:value-of select="string-join(for $a in $data return $a cast as xs:string, ',')"/>
</xsl:function>

For this to work you must use xslt 2.0 and declare the following aditonal namespaces:

xmlns:local="mylocalnamespace" xmlns:xs="http://www.w3.org/2001/XMLSchema"

The generared url can now be used in a simple image tag to display the actual chart. The following code shows a complete example:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0" xmlns:local="mylocalnamespace" xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xsl:output method="html"/>

  <xsl:function name="local:createMyHitsChart">
    <xsl:param name="data"/>
    <xsl:variable name="maxval" select="max($data)"/>
    <xsl:value-of select="ttp://chart.apis.google.com/chart"/>
    <xsl:value-of select="'?'"/>
    <xsl:value-of select="'cht=lc&chs=300x200&'"/>
    <xsl:value-of select="'chg=20,50&chxt=x,y&'"/>
    <xsl:value-of select="'chxl=0:|jan|mar|may|jul|oct|des|1:|0|'"/>
    <xsl:value-of select="$maxval"/>
    <xsl:value-of select="'&chds=0,'"/>
    <xsl:value-of select="$maxval"/>
    <xsl:value-of select="'&chd=t:'"/>
    <xsl:value-of select="string-join(for $a in $data return $a cast as xs:string, ',')"/>
  </xsl:function>

  <xsl:template match="/">
    <html>
      <body>
        <h1>MySite Hits</h1>
        <img>
          <xsl:attribute name="src">
            <xsl:value-of select="local:createMyHitsChart((14,99,130,77,155,170,88,71,111,131,155,230))"/>
          </xsl:attribute>
        </img>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

That's it. Have fun with the Google chart API and read the exelent documentation if in need.

Comments

If you want to comment on this article you need to be logged in.

Published in 2012

2011

2010

2009

2008

2007