SVG, XSLT and JSP/JSTL: Generating Digital Gauge or Speedometer Chart based on dynamic data

4

Speed-o-meter or Digital Gauge - Salary Sum per Department

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>Department Salary Report&lt;/title>
  &lt;/head>
  &lt;body>
  &lt;h1>Report on Departments and Salaries&lt;/h1>
  &lt;object
    data="DeptSalSpeedometer.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>

Features for the Speed-o-meter Chart

The following features are supported:

  • Multiple Datasets with each a color and a label (as tooltip)
  • User defined markers and submarkers
  • Areas or zones with Color and Tooltips
  • User defined ‘gauge angle’ – semicircle, fullcircle etc.
  • Day-counter and counter with tooltip

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

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)
Steve Muench’s collection of ADF examples, including one on using ADF BC writeXml() on ViewObjects in combination with JSTL XML tags; that one probably eliminates my use of the JSTL SQL library – that I do not like very much to begin with.

Enabling SVG in your browser

Note: to fully enjoy all parts of this post, you need an SVG renderer in your web browser, for example the Adobe SVG Plugin for Internet Explorer. To enable SVG viewing in Firefox on Windows – see Mozilla Plugin Support on Microsoft Windows, you need to download and install the Acrobat SVG Viewer Version 6.0 (beta); after installing the Adobe SVG viewer, Copy NPSVG6.dll and NPSVG6.zip to your browser’s plugins folder. These files are normally located in C:Program FilesCommon FilesAdobeSVG Viewer 6.0Plugins

1 2 3
Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

4 Comments

  1. I can understand the report in PDF,XML,HTML.
    I want to do the report in XL.How I can proceed please give a idea.

  2. all information resides here are good.i need some information regardingg migration.i.e, can i get sorce code & front end design for migrating data from excel to oracle.reply soon…plz…

  3. I have drawn up a list of to do’s: new features I would like to add to the Speedometer chart:
    - animation (show the movement of the dials over time)
    - support for multiple axes
    - better markersupport: set markercolor, markerdash and markerlength; gridlines
    - display images (icons) as (part of) markervalues
    - display a legend indicating the meaning of each dial
    - implement a clock using the speedometer stylesheet as demonstration

    I hope to add these features in the new couple of weeks and update the post accordingly.

  4. Pingback: » Enable SVG with Firefox