This article presents several XSLT stylesheets for visualizing numerical data rows contained, as you may have guessed, within XML files. The article explains the details of stylesheet setup and the template design rationale.
Stylesheets for the following types of charts are described:
This article assumes you are familiar with XSLT 1.0 and, to some extent, CSS Level 1.0 standards.
Templates are tuned to process files with the following structure:
<root>
<data date="date-string">
<first-component-name>first-component-value</first-component-name>
<second-component-name>second-component-value</second-component-name>
</data>
<!-- And so on ... -->
</root>
Or, if you love schemas:
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="root">
<xs:complexType>
<xs:sequence maxOccurs="unbounded">
<xs:element name="data">
<xs:complexType>
<xs:all>
<xs:element name="a" type="xs:decimal" minOccurs="1" maxOccurs="1"/>
<xs:element name="b" type="xs:decimal" minOccurs="1" maxOccurs="1"/>
</xs:all>
</xs:complexType>
<xs:attribute name="date" type="xs:date" use="required"/>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The following sample file is used to test all the stylesheets:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="stylesheet name"?>
<root>
<data date="2006-01-01">
<a>-1.5</a>
<b>2.5</b>
</data>
<data date="2006-01-02">
<a>-1.0</a>
<b>2.0</b>
</data>
<!-- Data goes on ... -->
<data date="2006-01-07">
<a>1.5</a>
<b>1.3</b>
</data>
</root>
Parameters are the same for all templates:
<xsl:call-template name="template-name">
<!-- Resolution, i.e. number of cells in a chart -->
<xsl:with-param name="n" select="$resolution"/>
<!-- Set of XML nodes containing the input data -->
<xsl:with-param name="nodeset" select="root/*"/>
<!-- Color for the first component of a data set -->
<xsl:with-param name="colorFirst">#008000</xsl:with-param>
<!-- Color for the second component -->
<xsl:with-param name="colorSecond">#B22222</xsl:with-param>
<!-- Color for the empty cells in a chart -->
<xsl:with-param name="colorEmpty">#DCDCDC</xsl:with-param>
</xsl:call-template>
However, most of the templates need additional info on the input node set:
<!-- For example, maximum of 'a' can be calculated this way: -->
<xsl:variable name="a_max_special">
<xsl:for-each select="root/data">
<xsl:sort select="a" data-type="number" order="descending"/>
<xsl:if test="position()=1">
<xsl:value-of select="a"/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="a_max" select="number($a_max_special)"/>
<!-- In our case, maximum sum is calculated as follows: -->
<xsl:variable name="sum_max_special">
<xsl:for-each select="root/data">
<xsl:sort select="sum(*)" data-type="number" order="descending"/>
<xsl:if test="position()=1">
<xsl:value-of select="sum(*)"/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="sum_max" select="number($sum_max_special)"/>
Although you can obtain these values during the template runtime, "the best way to compute is to pre-compute" and assign the values to appropriate variables.
Couple of words on template design.
Bar charts are simple HTML <TABLE>s, with <TD>s filled with appropriate colors.
Histograms are a little bit harder to build: the same old <TABLE> with a single row and a number of <TD>s, each being a data column. Each column is formed by multiple <P> tags, with the number of tags equal to the resolution of the chart. Each paragraph is filled with the appropriate color.
A simple CSS block controls a chart's look-and-feel:
<style>
table.bargraph // Controls bar charts
{
margin-top: -1px;
padding:0;
font-size: 15px;
// The main controller
// of the barchart's cell size
}
table.bargraph td.date // Controls 'date' column
{
width: 75px;
text-align:left;
}
table.histogram td // Controls histograms
{
width: 5px;
font-size: 1px;
padding-top: 10px;
}
table.histogram td p // Controls histogram cells
{
width: 20px; // Width...
height: 3px; // ...and height of a cell.
line-height: 0;
margin: 0 1px 1px 0;
padding: 0;
font-size: 1px;
}
</style>
Inside the accompanying archive, you'll find the following stylesheets:
The most simple chart: comparison of components by date.
Nearly the same as the forerunner, but shows only a single row per date - components overlay each other.
Shows the contribution of individual items to the overall sum.
Shows the percentage of an individual item's contribution of the total value.
Note: strictly speaking, this and the two following charts cannot be called histograms; nevertheless, I'll use the MS Excel slang, which calls all 'horizontal' charts bar charts and all 'vertical' charts histograms (or column charts).
| You must Sign In to use this message board. | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
)