XSL - Create Bar Chart

When using XSL templates to transform XML data to HTML, there is a frequent need to present some sort of statistics, in a form different than simple table. Chart could be a common choice. Bar chart could be generated from input data using simple XSL/HTML tags.

Following example uses four ranges on X axis, with respective percentages presented as bars for each range. Y axis is divided into five ranges.

<table cellSpacing="0" cellPadding="0" align="center" style="border-right: white 0px solid; border-top: white 0px solid; ; border-left: white 0px solid; border-bottom: white 0px solid; text-align: center">
 <tbody>
<tr>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: black 1px solid; width: 30px; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; width: 20px; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; width: 60px; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; width: 60px; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; width: 60px; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; width: 60px; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: white 0px solid; width: 10px; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid"/>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td rowSpan="10" vAlign="bottom" align="center"
       style="border-right: white 0px solid; padding-right: 0px; border-top: black 1px solid; padding-left: 0px; font-size: 1px; padding-bottom: 0px; border-left: black 1px solid; padding-top: 0px; border-bottom: black 1px solid">
    <table style="border-right: black 1px solid; border-top: black 1px solid; ; border-left: black 1px solid; width: 80%; border-bottom: white 0px solid">
     <tbody>
<tr style="background-color: lime; height: 15px;">
       <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
      </tr>
</tbody>
    </table>
</td>
   <td rowSpan="10" vAlign="bottom" align="center"
       style="border-right: white 0px solid; padding-right: 0px; border-top: black 1px solid; padding-left: 0px; font-size: 1px; padding-bottom: 0px; border-left: white 0px solid; padding-top: 0px; border-bottom: black 1px solid">
    <table style="border-right: black 1px solid; border-top: black 1px solid; ; border-left: black 1px solid; width: 80%; border-bottom: white 0px solid">
     <tbody>
<tr style="background-color: yellow; height: 35px;">
       <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
      </tr>
</tbody>
    </table>
</td>
   <td rowSpan="10" vAlign="bottom" align="center"
       style="border-right: white 0px solid; padding-right: 0px; border-top: black 1px solid; padding-left: 0px; font-size: 1px; padding-bottom: 0px; border-left: white 0px solid; padding-top: 0px; border-bottom: black 1px solid">
    <table style="border-right: black 1px solid; border-top: black 1px solid; ; border-left: black 1px solid; width: 80%; border-bottom: white 0px solid">
     <tbody>
<tr style="background-color: cyan; height: 20px;">
       <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
      </tr>
</tbody>
    </table>
</td>
   <td rowSpan="10" vAlign="bottom" align="center"
       style="border-right: black 1px solid; padding-right: 0px; border-top: black 1px solid; padding-left: 0px; font-size: 1px; padding-bottom: 0px; border-left: white 0px solid; padding-top: 0px; border-bottom: black 1px solid">
    <table style="border-right: black 1px solid; border-top: black 1px solid; ; border-left: black 1px solid; width: 80%; border-bottom: white 0px solid">
     <tbody>
<tr style="background-color: magenta; height: 30px;">
       <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
      </tr>
</tbody>
    </table>
</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid">80%</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid">60%</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid">40%</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid">20%</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td rowSpan="2" style="border-right: white 0px solid; border-top: black 1px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid"/>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid"/>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-weight: bold; font-size: 10pt; border-left: white 0px solid; border-bottom: white 0px solid">Range 1</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-weight: bold; font-size: 10pt; border-left: white 0px solid; border-bottom: white 0px solid">Range 2</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-weight: bold; font-size: 10pt; border-left: white 0px solid; border-bottom: white 0px solid">Range 3</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-weight: bold; font-size: 10pt; border-left: white 0px solid; border-bottom: white 0px solid">Range 4</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: white 0px solid; height: 10px"/>
  </tr>
<tr>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: black 1px solid; border-bottom: black 1px solid"/>
   <td style="border-right: white 0px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: black 1px solid"/>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-size: 10pt; border-left: white 0px solid; border-bottom: black 1px solid">15%</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-size: 10pt; border-left: white 0px solid; border-bottom: black 1px solid">35%</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-size: 10pt; border-left: white 0px solid; border-bottom: black 1px solid">20%</td>
   <td style="border-right: white 0px solid; border-top: white 0px solid; font-size: 10pt; border-left: white 0px solid; border-bottom: black 1px solid">30%</td>
   <td style="border-right: black 1px solid; border-top: white 0px solid; border-left: white 0px solid; border-bottom: black 1px solid; height: 10px"/>
  </tr>
</tbody>
</table>

The basic point is to create regular table. For example with 4 ranges on X scale and 5 ranges on Y scale, table should have 13 rows, with 7 columns in each row. Some columns are spanned (merged) over multiple rows, allowing labels and bars to be defined. The outlook of "raw" table, with hidden borders shown dotted, is presented in Picture 1:

Picture 1

When merger is implemented to create row for bars, they are simply defined using heights in pixels.

Replace hardwired values from example with values read from source XML file.

The resulting HTML in browser is shown in Picture 2:

 

Picture 2