Generating SVG Graphics in JSPs using JSTL & XSL(T) – from MySQL to Bar Chart and Pie Chart

Simple Line-chart for Employee Salaries (no annotations, no tooltip and no second y-axis)

Display SVG document in web-page

To display the SVG document in a webpage, it needs to be included through an <object>tag. I use the following JSP EmpReport.jsp:

<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/fmt.tld" prefix="fmt" %>
<%@ taglib uri="/WEB-INF/x.tld" prefix="x" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Employee Report</title>
  </head>
  <body>
  <h1>Report on Employees and Salaries</h1>
  <object
    data="EmpSalSVGLine.jsp"
    width="860" height="800" type="image/svg+xml">
  <p>
    Sorry, your browser does not support SVG images; please download and install a
    plugin for SVG, for example at
    <a href="http://www.acrobat.com">www.acrobat.com</a>
  </p>
</object>

</body>
</html>

A more sophisticated line chart

After refining the Line Chart somewhat more – with a number of extensions to the buildSVGLineChart.xsl stylesheet – the following features are supported:

  • Multiple Datasets with each a line, color, marker-type (in red with stars the most recently awarded salary, in blue with triangles the total salarysum)
  • Two value-axes (left and right) (here used for the salary axis 0-5000 and the salary sum axis 0-30000)
  • Tooltips for the markers (here used for Scott, 9 December 1982, Salary: $3000
  • Annotations (here for example “King joined us”
  • Gridlines
  • A Legend
  • Value lables on both axes

The line graph as JPG image instead of SVG

Bar Chart

In a subsequent post I will discuss generation of barcharts. By the way, this is simpler than generating line-charts. A simple example of a barchart is the following:
Simple Bar-chart: salarysum per department

Sources

Download the JDeveloper project with all sources. This file contains the extended stylesheets – that include the second y-axis, the tooltips and the annotations for the line-graphs:JSTL_XML_Extended_Linegraph.zip

Resources

Creating SVG Pie Charts through XSLT via a Web Service by Paul Asman (Technical Specialist, Advanced Technology Center Federal Reserve Bank of New York);Excellent tutorial on the creation of SVG Pie Charts from XML data sources
Réaliser un histogramme en SVG (XSLT 1.0) Emmanuel Lazinier
PerfectXML: Common XSLT Tasks � Part I (Transformation and Sorting) – Transforming XML to SVG – Generating Sales Bar Chart
XML Extension Functions for XSLT Processing (Oracle9i XML Developer’s Kits Guide – XDK)
SVG Tutorial by Kevin Lindsey
Learn SVG Tutorial (especially Using XSLT to produce SVG (3)) by TopXML
SVGX.ORG – collection of links to interesting (and some less interesting) SVG resources
Database-Driven Charting Using XSLT and SVG and source code – also shows gridslines and value-markers on vertical axis
A Quantum Leap in Browser Graphics Capabilities by Vikas Pandya
Picture This: Web Interfaces Go Interactive Will combining graphical language capabilities with the flexibility of XML and XSLT make SVG mainstream? by Kurt Cagle – a demonstration of creating a Line Graph
Render dynamic graphs in SVG – Create SVG graphs that scale dynamically with their content Level: Introductory Brian Venn (vennb@uk.ibm.com) Software Engineer, IBM 29 Oct 2004
Steve Muench on MAX, MIN and AVG functions in XSLT
SVG Learning by Coding – large collection of annotated SVG example, including Bar Chart and Pie Chart
Instruction in Spanish on creating a Bar Chart
Examples of SVG based Dial Gauges (Speedometers); many more SVG examples: Many Sample Charts (barchart, barley, birdlog, cellular, fuelcalc, piecharts, polar, min-max, 3D charts and many more! (© Copyright Causeway Graphical Systems Ltd 2004)

7 Comments

  1. Jimbo December 30, 2008
  2. Rick B June 9, 2005
  3. Lucas January 4, 2005
  4. Lucas January 4, 2005
  5. Zeger Hendrikse January 4, 2005
  6. Leon van Tegelen January 2, 2005
  7. Lucas January 2, 2005
  8. Pingback: » Enable SVG with Firefox February 21, 2005