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: 

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

&lt;/body>
&lt;/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:

  1. XSL Transforming XML generated from SQL results using JSTL tags in JSP pages – putting JSTL to the test
  2. JSP and JSTL experiences
  3. AMIS Library System – JHeadstart 9.0.5.x (BC4J, JSP+JSTL) Demo Application released
  4. Getting started with MySQL
  5. Toplink's Object to XML mapping