Using the Chart API in KML for Quick Data Visualization

Saturday, December 08, 2007 at 8:12:00 AM

Google just released the the Google Chart API. We don't often boast about other non-Geo APIs in this blog, but this one is amazing, easy to use, and, best of all, has great potential for use in Geo apps.

Using the chart API is simple. By passing various parameters in the URL to the chart server, you can control how the chart looks in the image that is returned. Your custom chart image can be placed in Maps API info windows, KML balloons, etc. Let's look at how that second scenario works.

Let's suppose that you wanted to show pizza deliveries at particular locations based on significant points in a romantic relationship. You know how it goes — someone likes pizza, they order it. When they get involved with someone, sometimes they order at a that person's house, so deliveries go down. Around the holidays, they eat less pizza because they're going to parties, but when they break up with someone, they eat a lot of pizza because they're lonely and depressed at home. Very sad. Anyway, I've created a sample using KML, and I placed it in a park in New York so no one thinks I'm watching their actual pizza consumption.

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
  <Placemark>
    <name />
    <visibility>1</visibility>
    <Snippet>Relationship versus Pizza</Snippet>
    <description><![CDATA[<img src="http://chart.apis.google.com/chart?cht=bvs&
chs=200x150&chd=t:10,15,25,13,3,35&
chxt=x,x&chxl=0:|Jul|Aug|Sept|Oct|Nov|Dec|1:|Start|||Thanksgiving||Breakup&
chtt=Pizza%20Deliveries|by%20Relationship%20Progress"/>]]></description>
    <Point>
      <coordinates>-74.01490535558324,40.70396174218289,0</coordinates>
    </Point>
  </Placemark>
</kml>

See, pretty simple. I'll leave it up to you exploring the Chart API documentation to get more info on creating the chart, but I wanted to show something else you could do with KML 2.2. This will only work in Google Earth, but it's pretty cool. You use the new <ExtendedData> and <Data> elements to create a Balloon template, putting the entity replacements (those codes that look like: $[something]) in the URL. That way, you can put only the data relevant to a particular point in a particular balloon, and you don't have to recreate the whole URL for each <Placemark>. And if you change the chart, but not the data, all you have to change is one <BalloonStyle>.

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
  <Document>
    <name></name>
    <open>1</open>
    <Style id="pizza">
      <BalloonStyle>
        <text><![CDATA[<img src="http://chart.apis.google.com/chart?cht=bvs&chs=200x150&chd=t:$[PizzaDeliveries1],$[PizzaDeliveries2],$[PizzaDeliveries3],$[PizzaDeliveries4],$[PizzaDeliveries5],$[PizzaDeliveries6]&chxt=x,x,y&chxl=0:|$[PizzaDeliveries1/displayName]|$[PizzaDeliveries2/displayName]|$[PizzaDeliveries3/displayName]|$[PizzaDeliveries4/displayName]|$[PizzaDeliveries5/displayName]|$[PizzaDeliveries6/displayName]|1:|$[RelationshipDataPoint1]|$[RelationshipDataPoint2]|$[RelationshipDataPoint3]|$[RelationshipDataPoint4]|$[RelationshipDataPoint5]|$[RelationshipDataPoint6]&chtt=Pizza%20Deliveries|by%20Relationship%20Progress"/>]]></text>
      </BalloonStyle>
    </Style>
    <Placemark>
      <name>Pizza Deliveries</name>
      <styleUrl>#pizza</styleUrl>
      <...
      <ExtendedData>
        <Data name="PizzaDeliveries1">
          <displayName>Jul</displayName>
          <value>10</value>
        </Data>
        ...
      </ExtendedData>
...
You can find the full sample here: here. For more info about creating templates, check out Adding Custom Data.