RCHART, User Guide

Copyright 2007, J4L Components (http://www.java4less.com)
Go bak to contents

RChart plugins

• Batik integration. Generation of SVG image files.
• FOP Integration. Generation of PDF files.
• JSP Tag Library

Batik integration. Generation of SVG image files.

You can use RChart to generate SVG images. In order to do you you need:

• add rchart2.jar and rchart_batik.jar to your classpath
• download apache Batik 1.6 from http://xmlgraphics.apache.org/batik/
• add at least the following Batik files to your classpath: batik-svggen.jar, batik-svg-dom.jar, batik-dom.jar, batik-xml.jar, batik-swing.jar, batik-awt-util.jar, batik-ext.jar,batik-extension.jar, xml-apis.jar and batik-util.jar.

You can now create SVG output using the following code:

// FIRST CREATE A CHART
ChartLoader cha=new ChartLoader(null);
cha.setParameter("TITLECHART","Sales 2006");
cha.setParameter("LEGEND","TRUE");
cha.setParameter("XLABEL","Month");
cha.setParameter("YLABEL","Million $");
cha.setParameter("XAXIS_LABELS","June|July|Aug.|Sept.|Oct.|Nov.|Dec.");
cha.setParameter("SERIE_1","Products");
cha.setParameter("SERIE_2","Services");
cha.setParameter("SERIE_STYLE_1","0.2|RED|LINE");
cha.setParameter("SERIE_FONT_1","Arial|PLAIN|8");
cha.setParameter("SERIE_FONT_2","Arial|PLAIN|8");
cha.setParameter("SERIE_COLOR_1","RED");
cha.setParameter("SERIE_COLOR_2","BLUE");
cha.setParameter("SERIE_POINT_COLOR_1","RED");
cha.setParameter("SERIE_POINT_COLOR_2","BLUE");
cha.setParameter("SERIE_POINT_1","true");
cha.setParameter("SERIE_POINT_2","true");
cha.setParameter("SERIE_STYLE_2","0.2|BLUE|LINE");
cha.setParameter("SERIE_DATA_1","12|43|50|45|30|32|42");
cha.setParameter("SERIE_DATA_2","20|41|48|39|36|34|50");
cha.setParameter("SERIE_TYPE_1","LINE");
cha.setParameter("SERIE_TYPE_2","LINE");
cha.setParameter("CHART_BORDER","0.2|BLACK|LINE");
cha.setParameter("CHART_FILL","LIGHTGRAY");
cha.setParameter("BIG_TICK_INTERVALX","1");
cha.setParameter("BIG_TICK_INTERVALY","10");
cha.setParameter("YSCALE_MIN","0");
cha.setParameter("LEGEND_BORDER","0.2|BLACK|LINE");
cha.setParameter("LEGEND_FILL","WHITE");
cha.setParameter("XAXIS_GRID","0.2|WHITE|DASHED");
cha.setParameter("YAXIS_GRID","0.2|WHITE|DASHED");
cha.setParameter("XAXIS_TICKATBASE","true");
cha.setParameter("CHART_FILL","YELLOW");
cha.setParameter("YLABEL_VERTICAL","TRUE");
/* process parameters and create chart*/
Chart c=cha.build(false,true);
c.setWidth(300);
c.setHeight(300);

 

// OUTPUT CHART TO A SVG file
FileOutputStream os=new FileOutputStream("chart.svg");
ChartImage image=new ChartBatikImage(300,300);
ChartGraphics g=null;
g=image.getGraphics();
c.doubleBuffering=false;
c.paint(g);
image.saveToStream(null,os);
c.dispose();

The following code shows you how to create a SVG image in a JSP page:

<%@ page import="com.java4less.rchart.*" %>
<%@ page import="com.java4less.rchart.gc.*" %>
<%@ page import="com.java4less.rchart.gc.svg.*" %>

<%

response.setContentType("image/svg"); // SVG output
response.setDateHeader ("Expires",0);
// get output stream
java.io.OutputStream outb=response.getOutputStream();

// FIRST CREATE A CHART
ChartLoader cha=new ChartLoader(null);
cha.setParameter("TITLECHART","Sales 2006");
cha.setParameter("LEGEND","TRUE");
cha.setParameter("XLABEL","Month");
cha.setParameter("YLABEL","Million $");
cha.setParameter("XAXIS_LABELS","June|July|Aug.|Sept.|Oct.|Nov.|Dec.");
cha.setParameter("SERIE_1","Products");
cha.setParameter("SERIE_2","Services");
cha.setParameter("SERIE_STYLE_1","0.2|RED|LINE");
cha.setParameter("SERIE_FONT_1","Arial|PLAIN|8");
cha.setParameter("SERIE_FONT_2","Arial|PLAIN|8");
cha.setParameter("SERIE_COLOR_1","RED");
cha.setParameter("SERIE_COLOR_2","BLUE");
cha.setParameter("SERIE_POINT_COLOR_1","RED");
cha.setParameter("SERIE_POINT_COLOR_2","BLUE");
cha.setParameter("SERIE_POINT_1","true");
cha.setParameter("SERIE_POINT_2","true");
cha.setParameter("SERIE_STYLE_2","0.2|BLUE|LINE");
cha.setParameter("SERIE_DATA_1","12|43|50|45|30|32|42");
cha.setParameter("SERIE_DATA_2","20|41|48|39|36|34|50");
cha.setParameter("SERIE_TYPE_1","LINE");
cha.setParameter("SERIE_TYPE_2","LINE");
cha.setParameter("CHART_BORDER","0.2|BLACK|LINE");
cha.setParameter("CHART_FILL","LIGHTGRAY");
cha.setParameter("BIG_TICK_INTERVALX","1");
cha.setParameter("BIG_TICK_INTERVALY","10");
cha.setParameter("YSCALE_MIN","0");
cha.setParameter("LEGEND_BORDER","0.2|BLACK|LINE");
cha.setParameter("LEGEND_FILL","WHITE");
cha.setParameter("XAXIS_GRID","0.2|WHITE|DASHED");
cha.setParameter("YAXIS_GRID","0.2|WHITE|DASHED");
cha.setParameter("XAXIS_TICKATBASE","true");
cha.setParameter("CHART_FILL","YELLOW");
cha.setParameter("YLABEL_VERTICAL","TRUE");
/* process parameters and create chart*/
Chart c=cha.build(false,true);
c.setWidth(300);
c.setHeight(300);

 

// OUTPUT CHART AS SVG

ChartImage image=new ChartBatikImage(300,300);
ChartGraphics g=null;
g=image.getGraphics();
c.doubleBuffering=false;
c.paint(g);
image.saveToStream(null,outb);
c.dispose();
%>

FOP integration. Generation of PDF files.

RChart can be used together with Apache FOP to include charts in your PDF files.

In order to generate charts in pdf files you need:

• add rchart2.jar, rchart_batik.jar and rchart_fop.jar to your classpath
• download Apache FOP version 0.93 from http://xmlgraphics.apache.org/fop/
• add the following Apache jars to your classpath: xmlgraphics-commons-1.1.jar, xml-apis-1.3.02.jar, xercesImpl-2.7.1.jar, xalan-2.7.0.jar, servlet-2.2.jar, serializer-2.7.0.jar, commons-logging-1.0.4.jar, commons-io-1.1.jar, batik-all-1.6.jar , avalon-framework-4.2.0.jar and fop.jar.

After you have installed all required jar files you must create a FO file (please refer to the APACHE FOP documentation). For example, the following file includes a chart:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:svg="http://www.w3.org/2000/svg">
<fo:layout-master-set>
<fo:simple-page-master master-name="one">
<fo:region-body margin-top="25pt" margin-bottom="25pt" margin-left="50pt" margin-right="50pt" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="one">
<fo:flow flow-name="xsl-region-body">
<fo:block>
This is my chart

<fo:instream-foreign-object >

<rchart xmlns="http://java4less.com/rchart/fop" mode="inline">
<param name="WIDTH">350</param>
<param name="HEIGHT">350</param>
<param name="TITLECHART">Sales 2000</param>
<param name="LEGEND">TRUE</param>
<param name="XLABEL">Month</param>
<param name="YLABEL">Million $</param>
<param name="XAXIS_LABELS">June|July|Aug.|Sept.|Oct.|Nov.|Dec.</param>
<param name="SERIE_1">Products</param>
<param name="SERIE_2">Services</param>
<param name="SERIE_STYLE_1">0.2|RED|LINE</param>
<param name="SERIE_FONT_1">Arial|PLAIN|8</param>
<param name="SERIE_FONT_2">Arial|PLAIN|8</param>
<param name="SERIE_COLOR_1">RED</param>
<param name="SERIE_COLOR_2">BLUE</param>
<param name="SERIE_POINT_COLOR_1">RED</param>
<param name="SERIE_POINT_COLOR_2">BLUE</param>
<param name="SERIE_POINT_1">true</param>
<param name="SERIE_POINT_2">true</param>
<param name="SERIE_STYLE_2">0.2|BLUE|LINE</param>
<param name="SERIE_DATA_1">12|43|50|45|30|32|42</param>
<param name="SERIE_DATA_2">20|41|48|39|36|34|50</param>
<param name="SERIE_TYPE_1">LINE</param>
<param name="SERIE_TYPE_2">LINE</param>
<param name="CHART_BORDER">0.2|BLACK|LINE</param>
<param name="CHART_FILL">YELLOW</param>
<param name="BIG_TICK_INTERVALX">1</param>
<param name="BIG_TICK_INTERVALY">10</param>
<param name="YSCALE_MIN">0</param>
<param name="LEGEND_BORDER">0.2|BLACK|LINE</param>
<param name="LEGEND_FILL">WHITE</param>
<param name="XAXIS_GRID">0.2|WHITE|DASHED</param>
<param name="YAXIS_GRID">0.2|WHITE|DASHED</param>
<param name="XAXIS_TICKATBASE">true</param>
</rchart>

</fo:instream-foreign-object>

</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>

As you can see the chart section of the file has the following format

<fo:instream-foreign-object >

<rchart xmlns="http://java4less.com/rchart/fop" mode="inline">

// ADD YOUR CHART PARAMETERS HERE
<param name="WIDTH">350</param>
.....

</rchart>

</fo:instream-foreign-object>

Store the FO definition in a file called chart.fo. You can now use the following code to convert the FO file to PDF:

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.Source;
import javax.xml.transform.Result;
import javax.xml.transform.stream.StreamSource;
import javax.xml.transform.sax.SAXResult;
import org.apache.fop.apps.FOUserAgent;
import org.apache.fop.apps.Fop;
import org.apache.fop.apps.FopFactory;
import org.apache.fop.apps.MimeConstants;

public class Chart2PDF {

public static void main(String[] args) {
try {

FopFactory fopFactory = FopFactory.newInstance();
System.out.println("Chart2PDF\n");

// files
File fofile = new File("chart.fo");
File pdffile = new File("Chart.pdf");

OutputStream out = null;
FOUserAgent foUserAgent = fopFactory.newFOUserAgent();

// Setup output stream.
out = new FileOutputStream(pdffile);
out = new BufferedOutputStream(out);
Fop fop = fopFactory.newFop(MimeConstants.MIME_PDF, foUserAgent, out);
// Setup JAXP using identity transformer
TransformerFactory factory = TransformerFactory.newInstance();
Transformer transformer = factory.newTransformer(); // identity transformer

// Setup input stream
Source src = new StreamSource(fofile);
// Resulting SAX events (the generated FO) must be piped through to FOP
Result res = new SAXResult(fop.getDefaultHandler());

transformer.transform(src, res);

out.close();
System.out.println("End\n");
} catch (Exception e) {
e.printStackTrace();
}

}
}

You can also use the code in a JSP page and send the PDF file to the browser:

<%@ page import="java.io.*" %>
<%@ page import="javax.xml.transform.Transformer" %>
<%@ page import="javax.xml.transform.TransformerFactory" %>
<%@ page import="javax.xml.transform.Source" %>
<%@ page import="javax.xml.transform.Result" %>
<%@ page import="javax.xml.transform.stream.StreamSource" %>
<%@ page import="javax.xml.transform.sax.SAXResult" %>
<%@ page import="org.apache.fop.apps.FOUserAgent" %>
<%@ page import="org.apache.fop.apps.Fop" %>
<%@ page import="org.apache.fop.apps.FopFactory" %>
<%@ page import="org.apache.fop.apps.MimeConstants" %>

<%
try {

FopFactory fopFactory = FopFactory.newInstance();

System.out.println("Chart2PDF\n");

// files , PLEASE MODIFY THE DIRECTORIES
File fofile = new File("C:\\java\\tomcat-5.0.19\\webapps\\rchart2\\chart.fo");
File pdffile = new File("C:\\java\\tomcat-5.0.19\\webapps\\rchart2\\Chart.pdf");

OutputStream out1 = null;
FOUserAgent foUserAgent = fopFactory.newFOUserAgent();

// Setup output stream.
out1 = new FileOutputStream(pdffile);
out1 = new BufferedOutputStream(out1);
Fop fop = fopFactory.newFop(MimeConstants.MIME_PDF, foUserAgent, out1);
// Setup JAXP using identity transformer
TransformerFactory factory = TransformerFactory.newInstance();
Transformer transformer = factory.newTransformer(); // identity transformer

// Setup input stream
Source src = new StreamSource(fofile);
// Resulting SAX events (the generated FO) must be piped through to FOP
Result res = new SAXResult(fop.getDefaultHandler());

transformer.transform(src, res);

out1.close();
System.out.println("End\n");
} catch (Exception e) {
e.printStackTrace();
}

// SEND RESPONSE PDF
response.setContentType("application/pdf");
response.sendRedirect("Chart.pdf");
// avoid caching in browser
response.setHeader ("Pragma", "no-cache");
response.setHeader ("Cache-Control", "no-cache");
response.setDateHeader ("Expires",0);

%>

 

JSP Tag Library

The JSP Tag library allows you to add charts to a JSP page with almost no java programming. The following steps show how to use the Tag libray:

• Copy examples_JSPTagLibrary\WEB-INF\jsp\j4lchart-tablig.tld to tomcatdirectory\webapps\yourapplicationdirectory\WEB-INF\jsp
• Copy examples_JSPTagLibrary\WEB-INF\web.xml to tomcatdirectory\webapps\yourapplicationdirectory\WEB-INF\web.xml
• Copy all rchart jar files to tomcatdirectory\webapps\yourapplicationdirectory\WEB-INF\lib
• Create a new JSP called tomcatdirectory\webapps\yourapplicationdirectory\rchart.jsp.
  • The file must include the following line:
    
    <%@ taglib uri="/WEB-INF/jsp/j4lchart-tablig.tld" prefix="j4lchart" %>
    
    
  • Now add the chart to your JSP page, for example a complete JSP page is:
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <%@ taglib uri="/WEB-INF/jsp/j4lchart-tablig.tld" prefix="j4lchart" %>
    <BODY>

    <%
    String data="13|43|50|45|30|32|42";
    %>

    <j4lchart:Chart chartName="MyFirstChart" format="JPEG" createMap="false" >
    
    <j4lchart:Parameter pname="WIDTH">400</j4lchart:Parameter>
    <j4lchart:Parameter pname="HEIGHT">400</j4lchart:Parameter>
    <j4lchart:Parameter pname="TITLECHART">Sales 2007</j4lchart:Parameter>
    <j4lchart:Parameter pname="XLABEL">Month</j4lchart:Parameter>
    <j4lchart:Parameter pname="YLABEL">Million $</j4lchart:Parameter>
    <j4lchart:Parameter pname="XAXIS_LABELS">June|July|Aug.|Sept.|Oct.|Nov.|Dec.</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_1">Products</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_STYLE_1">0.2|RED|LINE</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_FONT_1">Arial|PLAIN|8</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_COLOR_1">RED</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_POINT_COLOR_1">RED</j4lchart:Parameter>
    <j4lchart:Parameter pname="SERIE_DATA_1"><%=data%></j4lchart:Parameter>
    <j4lchart:Parameter pname="BIG_TICK_INTERVALX">1</j4lchart:Parameter>
    <j4lchart:Parameter pname="CHART_FILL">YELLOW</j4lchart:Parameter>
    <j4lchart:Parameter pname="YSCALE_MIN">0</j4lchart:Parameter>
    
    </j4lchart:Chart>

    </BODY>
    </HTML>

    
    
    
• Start your web server and run the JSP

As you can see the chart tag has the following format:

• The name of the tag is <j4lchart:Chart
• It has the following attributes:
  • chartName: any name you want to give to the chart
  • createMap: set it to true if you need to enable tips and/or html links
  • format: can be JPEG (default) , PNG or GIF. Don't forget to copy the PNG anf GIF encoders to the lib directory if you want to use the png or gif formats.

The Chart Tag contains a nested Tag which has the following format:

• The name is <j4lchart:Parameter
• It has only 1 attribute called pname which is the RChart's parameter name
• You put the value of the parameter in the Tag's body. As you can see in the example you can use JSP variables of code in the tag's body.

The RChart Tag library will at runtime create a HTML IMG tag like this one:

<IMG src='servlet/RChartServlet?CHARTID=1173777103290' BORDER=0 NAME='MyFirstChart' >

as you can see it create a call to RChart's servlet providing a CHARTID as parameter. This CHARTID references an object stored in the web application context.