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

January 1, 2005 Data Warehousing & BI, IT, Java, Oracle, Oracle WebLogic Server 7 Comments

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)

Related Posts

About The Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

7 Comments

  1. Jimbo December 30, 2008

    Please take a look at this chart
    http://www.treebuilder.de/xslt1/examples/example14/example14.xml

  2. Rick B June 9, 2005

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

  3. Lucas January 4, 2005

    Linegraph, displaying the number of posts per week as well as a running count: Line Graph with Post Overview

  4. Lucas January 4, 2005

    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.

  5. Zeger Hendrikse January 4, 2005

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

  6. Leon van Tegelen January 2, 2005

    I added a link to this JSP in the Blog menu under Site.

  7. Lucas January 2, 2005

    For an example of applying the approach discussed in this article, you may want to take a look at http://technology.amis.nl/statistics/BlogStats.jsp, 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.

  8. Pingback: » Enable SVG with Firefox February 21, 2005