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

Lucas Jellema 10

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" %>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Employee Report</title>
  <h1>Report on Employees and Salaries</h1>
    width="860" height="800" type="image/svg+xml">
    Sorry, your browser does not support SVG images; please download and install a
    plugin for SVG, for example at
    <a href=""></a>


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


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


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 ( 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)

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

  1. Would be OK with you if I leveraged your gauge examples in a real application?

  2. Another example of using the techniques described in this article can be found in the Post Report that displays a graph illustrating the number of reads of articles (or posts) on our Blog. See the Post report for this Post.

  3. Great graphs, even with marker labels… A worthy add-on for the Blog! (I still have to read this post though).

  4. For an example of applying the approach discussed in this article, you may want to take a look at, a live feed of the weblog-statistics for the AMIS Technology Weblog. It will demonstrate how – in SVG enabled browsers – a line graph is built displaying the number of hits in the weblog for today (per hour) as well as the total number since the start of our weblog in July 2004.

Comments are closed.

Next Post

JDeveloper 10.1.2 has arrived

JDeveloper release 10.1.2 is finally available for download (here). This is a maintenance release with some new features and over 1,000 bug fixes for JDeveloper Related posts: Uitnodiging: Kom kennismaken met AMIS Apache My Faces Trinidad: triggering Partial Page Refresh ("AJAX") from non Trinidad components Java: Generating PDF and […]
%d bloggers like this: