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
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:
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)
Please take a look at this chart
http://www.treebuilder.de/xslt1/examples/example14/example14.xml
Would be OK with you if I leveraged your gauge examples in a real application?
Linegraph, displaying the number of posts per week as well as a running count: Line Graph with Post Overview
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.
Great graphs, even with marker labels… A worthy add-on for the Blog! (I still have to read this post though).
I added a link to this JSP in the Blog menu under Site.
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.