Chris Pollett > Students >
Jie Wei Lin

    ( Print View )









    [Del298 (Semester1)]





Deliverable 3: Jie Wei Lin -- Histograms Using XSL Transformations

This deliverable requires Internet Explorer Version 5 and up to view.

This deliverable contains am XML DTD for histograms and an XSL transformation from this DTD to VML.

Below is a sample transformation:

Example histogram XML file

The file "histogram.xml" contains a root element "histograms". A "histograms" may contain zero or more "histogram", and a "histogram" must contain 1 or more bins.

The "histogramDTD.dtd" validates "histogram.xml" to ensure all elements and attribute are valid. For example, histogram's binwidth and maxNumber attribute can not be null, bin tag contains only attribute number.

The file "histogram.xsl" transforms the raw data in XML format in "histogram.xml" to VML. Internet Explorer Version 5 and above supports VML, so the transformation output is directly viewable. The transformation first outputs some basic tags for a VML file when it matches the root element of the XML file. These basic tags include <html>, <head>, <body>, etc. Then it applies the histogram templates when it reads a histogram tag, outputting a table for every histogram tag encountered and outputting tr tags for displaying bin rows. Finally, it sets table column attributes for the rectangle that resides inside.

Source code

The histogram DTD:
<!-- histograms contains 0 or more histogram -->
<!ELEMENT histograms (histogram) >
<!-- histogram contains 1 or more bins -->
<!ELEMENT histogram (bin+) >
<!-- histogram's binwidth and maxNumber attribute can not be null -->
<!ATTLIST histogram 
    binwidth    CDATA   #REQUIRED
    maxNumber   CDATA   #REQUIRED
<!-- bin tag contains no data, only attribute number -->
<!-- bin tag contains only attribute number -->
    number      CDATA   #REQUIRED

An example histogram document:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE histogram SYSTEM "histogramDTD.dtd">
<?xml-stylesheet type="text/xsl" href="histogram.xsl"?>
<!-- top element, histograms may contains 0 or more histogram tags  -->
<!-- a histogram may contain 1 or more bins,
     binwidth specifics bin width
     maxNumber specifics the maximum bin height
<histogram binwidth="15" maxNumber="100">
    <!-- number specifics height of each bin -->
    <bin number="100" />
    <bin number="0" />
    <bin number="70" />
    <bin number="88" />
    <bin number="90" />
<histogram binwidth="25" maxNumber="150">
    <bin number="150" />
    <bin number="30" />
    <bin number="0" />
    <bin number="88" />

The XSL Tranformation:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
<!-- output html, head, and body tag when root element is matched -->
<xsl:template match="/">
    <html xmlns:v="urn:schemas-microsoft-com:vml">
            <title>Simple Histogram</title>
            <object id="VMLRender"
                v\:* {behavior: url(#VMLRender)}
            <!-- apply histogram templates when reads a histogram tag  -->

<!-- output a table for every histogram tag encountered -->
<xsl:template match="histogram">
    <!-- sets table cellspacing and border to 0 -->
    <table cellspacing="0" border="0">
            <!-- output max column number -->
            <th valign="top" align="right" bgcolor="white"><xsl:value-of select="@maxNumber"/></th>
            <!-- output a bin for each bin tag -->
            <!-- displays first table column starts with 0 -->
            <td valign="top" align="right" bgcolor="white">0</td>
            <!-- prints bin's column number -->
            <xsl:for-each select="bin">
            <td><xsl:number level="single" count="bin" format="1"/></td>

<!-- output tr tag for displaying bin row -->
<xsl:template match="bin">
    <xsl:element name="td" use-attribute-sets="tdAttributes">
       <!-- output rectangle tag and its attributes for each bin -->
       <!-- output rectangle's open tag, "<" -->
       <xsl:text disable-output-escaping="yes">&lt;</xsl:text>
       <!-- output part of rectangle attribute, 'v:rect style="' -->
       <xsl:text disable-output-escaping="yes">v:rect style=&quot;</xsl:text>
       <!-- output part of rectangle attribute name height -->
       <xsl:text disable-output-escaping="yes">height:</xsl:text>
       <!-- output rectangle's height -->
       <xsl:value-of select="@number"/>
       <!-- output rectangle's width attribute name -->
       <xsl:text disable-output-escaping="yes">; width:</xsl:text>
       <!-- output rectangle's width -->
       <xsl:value-of select="../@binwidth"/>
       <!-- set rectangle's top and left position to 0, and end rectangle tag -->
       <xsl:text disable-output-escaping="yes">; top:0; left:0&quot;</xsl:text>
       <!-- set bins color to white and close rect tag -->
       <xsl:text disable-output-escaping="yes">filled=&quot;true&quot; fillcolor=&quot;white&quot; /&gt;</xsl:text>

<!-- sets table column attributes for the rectangle that resides -->
<xsl:attribute-set name="tdAttributes"> 
    <!-- objects in this column will be vertically aligned at the bottom -->
    <xsl:attribute name="valign">bottom</xsl:attribute>
    <!-- sets table column width to histogram bin width -->
    <xsl:attribute name="width"><xsl:value-of select="../@binwidth"/></xsl:attribute>
    <!-- sets table column height to histogram max bin number -->
    <xsl:attribute name="height"><xsl:value-of select="../@maxNumber"/></xsl:attribute>            
    <!-- sets table column back ground color to blue -->
    <xsl:attribute name="bgcolor">#0000ff</xsl:attribute>