While we were playing with the Google Maps example we posted a few weeks
back, we stumbled across another neat application on the web. I would bet
that not many folks know that Google has a publicly available chart server.
This chart server receives a formatted URL and returns a chart to you based
on the parameters. The chart returned is in PNG so it's likely suited for
PDF use only. Also, because you are limited to what can fit on a URL string,
I am sure it is not suited for everything. Nonetheless it can do some simple
charts and do them well.
While we do have some nice style sheets we use to generate dynamic SVG pie
charts and bar charts, we thought we would put together a simple example to
show that you can easily include a dynamically created pie chart from
Google's own API right in your documents ... on the fly. Of course, this
assumes you are connected to the web because Google's chart server is
located there. You can get more information on the Google Chart Server API
here:
http://code.google.com/apis/chart
We are looking at expanding this "Cool Tool" for some of the other types of
charts Google does support -- these include common ones like bar and line
but also really neat ones like sticky notes, outline text, balloons and
pins. For this installment, we are happy to give you a quick and easy way to
add dynamic pie charts to your documents through Google.
As we said, if you read the API you will see that all the parameters which
govern the look of the pie chart are passed through the URL and the Google
Chart API returns a PNG image of the chart. These parameters include (of
course) the data and labels, but also things like the colors, size,
orientation and type of chart (2D, 3D, and concentric for pies).
Based on this specification, we put together a simple, re-useable style
sheet that you can include in any project.
Your project XSL would include this style sheet:
<xsl:include href="CoolTools/genGoogleChart.xsl"/>
The main template in this included style sheet for formatting a pie chart is
called "build.static-pie", So one way to call it might be something like
this:
<xsl:template match="chart">
<xsl:variable name="url">
<xsl:call-template name="build.static-pie">
<xsl:with-param name="type" select="@type" />
<xsl:with-param name="colors" select="@colors" />
<xsl:with-param name="width" select="@width" />
<xsl:with-param name="height" select="@height" />
<xsl:with-param name="orientation" select="@orientation"/>
<xsl:with-param name="labels" select="slices/slice/label"/>
<xsl:with-param name="data" select="slices/slice/value"/>
</xsl:call-template>
</xsl:variable>
<fo:block margin-left="0pt" margin-top="0pt" line-height="0pt"
text-align="center">
<fo:external-graphic src="url({$url})" />
</fo:block>
</xsl:template>
The "Cool Tool" XSL produces the formatted URL for an
<fo:external-graphic/>. It takes as parameters all the information needed to
format a nice looking pie chart.
Of course, this assumes you data is organized something like this:
<chart type="p3" colors="ff0000|00ff00|ffff00|ff00ff" width="400"
height="200">
<slices>
<slice>
<label>Kevin</label>
<value>20</value>
</slice>
<slice>
<label>Michael</label>
<value>30</value>
</slice>
<slice>
<label>Karl</label>
<value>40</value>
</slice>
<slice>
<label>Chris</label>
<value>10</value>
</slice>
</slices>
</chart>
You may have a different organization but as long as you pass the data and
the labels as node-sets you are OK here. You may even choose to select from
standard color sets or sizes, etc. {Now that I look at this, it would
probably be nice to pass the colors as a node-set also! You always see more
when you look into things deeper.} We'll leave that enhancement up to you!
Well, what do you get? Here's a link to a sample:
http://www.xportability.com/CoolTools/googlecharts.pdf
If you wish to play for yourself, here's some sample data, sample XSL and
the Cool Tool XSL (also shown below).
http://www.xportability.com/CoolTools/googlecharts.zip
Have fun and as always, if you have more of such things please post them
here!
Kevin Brown
RenderX Inc.
650-327-1000
kevin@renderx.com
****************************************************************************
******
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<!-- This is a general set of xsl templates to generate a Google Chart
input XML
content. So far only Pie charts are implemented.
See http://code.google.com/apis/chart/ for more information.
This style sheet was created by Karl Stubsjoen and Kevin Brown from
RenderX. Feel free to use as you please and of course check with
the Google website for their terms of using their services.
-->
<!-- This is the Google Chart Server URL -->
<xsl:param
name="chartserver">http://chart.apis.google.com/chart</xsl:param>
<!-- The type of chart to create (required) -->
<xsl:param name="type"/>
<!-- The orientation of the pie chart in radians -->
<xsl:param name="orientation"/>
<!-- The chart width and height. Refer to the google specs for this but
their
recommendation is the the width be at least 2x the height for pie
charts -->
<xsl:param name="width">250</xsl:param>
<xsl:param name="height">100</xsl:param>
<!-- A "|" delimted set of colors. If only one color is specified then
it is used
as a base color and all pie slices are colored in varying shades of
this color -->
<xsl:param name="colors"/>
<!-- The data passed as an object -->
<xsl:param name="data"/>
<!-- The data for the inside pie in a concentric pie chart -->
<xsl:param name="datainside"/>
<!-- The labels passed as an object -->
<xsl:param name="labels"/>
<!-- The labels for the inside pie in a concentric pie chart -->
<xsl:param name="labelsinside"/>
<!-- Main Template -->
<xsl:template name="build.static-pie">
<xsl:param name="type"/>
<xsl:param name="orientation"/>
<xsl:param name="data"/>
<xsl:param name="datainside"/>
<xsl:param name="labels"/>
<xsl:param name="labelsinside"/>
<xsl:param name="width"/>
<xsl:param name="height"/>
<xsl:param name="colors"/>
<!-- Add Chart Server URL -->
<xsl:value-of select="$chartserver"/>
<!-- Add Chart Type -->
<xsl:text>?cht=</xsl:text>
<xsl:value-of select="$type"/>
<!-- Add Orientation -->
<xsl:if test="$orientation">
<xsl:text>&chp=</xsl:text>
<xsl:value-of select="$orientation"/>
</xsl:if>
<!-- Add Data -->
<xsl:text>&chd=t:</xsl:text>
<xsl:if test="$datainside">
<xsl:for-each select="$datainside">
<xsl:choose>
<xsl:when test="position()=last()">
<xsl:value-of select="."/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
<xsl:text>,</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:text>|</xsl:text>
</xsl:if>
<xsl:if test="$data">
<xsl:for-each select="$data">
<xsl:choose>
<xsl:when test="position()=last()">
<xsl:value-of select="."/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
<xsl:text>,</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:if>
<!-- Add Colors -->
<xsl:if test="$colors">
<xsl:text>&chco=</xsl:text>
<xsl:value-of select="$colors"/>
</xsl:if>
<!-- Add Chart Size -->
<xsl:text>&chs=</xsl:text>
<xsl:value-of select="$width"/>
<xsl:text>x</xsl:text>
<xsl:value-of select="$height"/>
<!-- Add Labels -->
<xsl:text>&chl=</xsl:text>
<xsl:if test="$labelsinside">
<xsl:for-each select="$labelsinside">
<xsl:choose>
<xsl:when test="position()=last()">
<xsl:value-of select="."/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
<xsl:text>|</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:text>|</xsl:text>
</xsl:if>
<xsl:if test="$labels">
<xsl:for-each select="$labels">
<xsl:choose>
<xsl:when test="position()=last()">
<xsl:value-of select="."/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
<xsl:text>|</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
-------------------
(*) To unsubscribe, send a message with words 'unsubscribe xep-support'
in the body of the message to majordomo@renderx.com from the address
you are subscribed from.
(*) By using the Service, you expressly agree to these Terms of Service http://www.renderx.com/terms-of-service.html
Received on Sun Jul 26 12:08:16 2009
This archive was generated by hypermail 2.1.8 : Sun Jul 26 2009 - 12:08:21 PDT