In esProc Charts: The Basics, esProc Charts: Coordinate Axes and Coordinate Transformation, as well as other documents explaining using chart elements in esProc charts, we discussed the method for plotting charts in esProc. To display charts on web, however, hyperlinks are often required. Here we’ll see how to design hyperlinks and how to use them when plotting charts with esProc.
1. Displaying charts on web
When plotting charts with G.draw() in esProc, a byte array of the image will be returned. On the webpage we can generate an image using the data.
A simple example of plotting algorithm (ChartGYM.dfx) for a column chart showing results of athletes:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE where NAME=?”,name) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”xEnd”:0.9,”xPosition”:0.7) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”yStart”:0.7) |
| 6 | =A1.plot(“Column”,”axis1″:”x”,”data1″:A2.(EVENT),”axis2″:”y”, “data2”:A2.(SCORE)) |
| 7 | =A1.plot(“Text”,”text”:name,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3, “textSize”:16,”textColor”:-10092340) |
| 8 | return A1.draw@p(450,200) |
This is similar to the plotting algorithm used in esProc Charts: The Column Element, from which more information can be learned. name in the plotting algorithm is a cellset parameter for specifying the athlete name:
The plotted chart needs to be returned using return function to be invoked by web program.
The plotting algorithm doesn’t involve a hyperlink. The hyperlink properties will be discussed in the next section. Now to display the chart plotted by the plotting algorithm on the web, follow these deploying instructions:
1) Deploy testChart application in apache-tomcat-6.0.43.
<Context path=”/testChart” docBase=”D:\tools\apache-tomcat-6.0.43\testChart” debug=”0″ privileged=”true”>
</Context>
2) Under the application directory testChart, place jars that esProc requires, including basic jars and the hsql driver hsqldb.jar, as well as required configuration files – dfxConfig.xml and config.xml. See esProc Integration & Application: Deploying JDBC for more details.
3) Prepare a class com.SaveChart to store the image data during running the program, using the following code:
package com;
import java.util.HashMap;
public class SaveChart {
private static HashMap<String, byte[]> chartMap = new HashMap();
public static void addChart(String id, byte[] bytes) {
chartMap.put(id, bytes);
}
public static byte[] getChart(String id) {
return chartMap.get(id);
}
public static void clear() {
chartMap.clear();
}
}
The class preparation uses the static method addChart to store an array of bytes for image data, and getChart to get the data. After the code is compiled, deploy the class in the WEB-INF/classes/com path under the application directory.
4) Under the application directory, prepare a readChart.jsp file to read in the specified PNG image from the SavaChart class:
<%@page contentType=”text/html; charset=iso-8859-1″ language=”java” import=”com.SaveChart, java.io.*” errorPage=””%>
<!DOCTYPE html>
<%
String chartID = request.getParameter(“id”);
byte[] image = SaveChart.getChart(chartID);
try {
response.setContentType(“image/png”);
OutputStream os = response.getOutputStream();
os.write(image);
os.close();
}
catch (Exception e) {
}
%>
In the readChart.jsp file, pass the serial number of the specified image through the parameter id.
5) In the application directory, prepare testChart.jsp file for computing the specified dfx file, store the resulting byte array for the image in SaveChart and call readChart.jsp to display the image:
<%@page contentType=”text/html; charset=iso-8859-1″ language=”java” import=”java.sql.*, com.SaveChart” errorPage=””%>
<!DOCTYPE html>
<%
String dfx = request.getParameter(“dfx”);
String arg = request.getParameter(“arg”);
Connection con = null;
com.esproc.jdbc.InternalCStatement st;
String chartID = “testChart”;
try {
Class.forName(“com.esproc.jdbc.InternalDriver”);
con= DriverManager.getConnection(“jdbc:esproc:local://”);
String callDfx = dfx;
// Allow one parameter that can be called using call dfx(arg)
if (arg != null) {
callDfx += “(\””+arg+”\”)”;
}
else {
callDfx += “()”;
}
st =(com. esproc.jdbc.InternalCStatement)con.prepareCall(“call “+callDfx);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
byte[] image = (byte[]) rs.getObject(1);
SaveChart.addChart(chartID, image);
}
catch (Exception e) {
}
finally {
if (con != null) {
try {
con.close();
}
catch (Exception e) {
e.printStackTrace();
}
}
}
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>testChart</title>
</head>
<body>
<img src=”readChart.jsp?id=<%=chartID%>”>
</body>
</html>
In testChart.jsp, pass the serial number of the specified image through the parameter dfx; we can also set a parameter arg. See esProc Integration & Application: Deploying JDBC for information about calling dfx to perform related computations.
Launch Tomcat to display the chart plotted using the plotting algorithm above. Enter the URL – http://localhost:8080/testChart/testChart.jsp?dfx=ChartGYM&arg=Ana Silva – into the web browser and we would see the following result:
2. Hyperlink properties
The plotting algorithm in the previous section plots a chart showing scores of one athlete. With the hyperlink, we can view the athlete’s result from a chart presenting scores of all athletes. Below is a plotting algorithm (ChartGYMMain.dfx) for such a column chart:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”xEnd”:0.9,”xPosition”:0.7) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”yStart”:0.7) |
| 6 | =A1.plot(“Column”,”stackType”:2,”htmlLink”:A2.(“testChart.jsp?dfx=ChartGYM&arg=”+NAME),”tipTitle”:A2.(NAME),”linkTarget”:”_self”,”axis1″:”x”,”data1″:A2.(NAME+”,”+EVENT),”axis2″:”y”,”data2″:A2.(SCORE)) |
| 7 | =A1.plot(“Text”,”text”:”GYMSCORE”,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3,”textSize”:16,”textColor”:-16750900) |
| 8 | return A1.draw@p(450,200),A1.hlink() |
Here A2 gets data of all athletes’ results for plotting a stacked column chart. A6 specifically specifies hyperlink properties when plotting the column element:
The hyperlink Html link points to testChart.jsp, defines dfx as the plotting algorithm ChartGYM for a chart showing results of one athlete, and specifies the parameter arg as this athlete’s name. We then set Html tip as the athlete name and modify Link target from the default new window _blank to the current window _self. We can also set other values for Link target according to HTML syntax, such as _parent, _top, and so on.
And one point to note is that the result of using a hyperlink should be returned as a string with G.hlink(). So A8 returns two results: one is the byte array for the image, the other is the hyperlink to the image.
To return from a chart for a certain athlete to the original main chart, we modify the plotting algorithm ChartGYM.dfx in the previous section:
| 6 | =A1.plot(“Column”,”htmlLink”:”testChart.jsp?dfx=ChartGYMMain”,”tipTitle”: A2(EVENT),”linkTarget”:”_self”,”axis1″:”x”,”data1″:A2.(EVENT),”axis2″:”y”, “data2”:A2.(SCORE)) |
| 7 | =A1.plot(“Text”,”text”:name,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3,”textSize”:16,”textColor”:-10092340) |
| 8 | return A1.draw@p(450,200),A1.hlink() |
Add the hyperlink properties to the column element plotting and modify A8’s return statement to return both the byte array of the image and the hyperlink. Below shows hyperlink properties for the column element specified by A6:
Since two results would be returned from the dfx file after a hyperlink is defined, readChart.jsp needs to be modified too to handle the returned hyperlink:
<%@page contentType=”text/html; charset=gb2312″ language=”java” import=”java.sql.*,
java.io.*,java.util.*,com.SaveChart” errorPage=””%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<%
String dfx = request.getParameter(“dfx”);
String arg = request.getParameter(“arg”);
Connection con = null;
com.esproc.jdbc.InternalCStatement st;
String chartID = “testChart”;
String links = “”;
try {
Class.forName(“com.esproc.jdbc.InternalDriver”);
con= DriverManager.getConnection(“jdbc:esproc:local://”);
String callDfx = dfx;
if (arg != null) {
callDfx += “(\””+arg+”\”)”;
}
else {
callDfx += “()”;
}
st =(com. esproc.jdbc.InternalCStatement)con.prepareCall(“call “+callDfx);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
byte[] image = (byte[]) rs.getObject(1);
SaveChart.addChart(chartID, image);
// Move on next to handle the hyperlink result
st.getMoreResults();
rs = st.getResultSet();
rs.next();
links = (String) rs.getObject(1);
}
catch (Exception e) {
}
finally {
if (con != null) {
try {
con.close();
}
catch (Exception e) {
e.printStackTrace();
}
}
}
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>testChart</title>
</head>
<body>
<img src=”readChart.jsp?id=<%=chartID%>” usemap=”#<%=chartID%>map”>
<map id=”<%=chartID%>map”><%=links%>
</map>
</body>
</html>
In the above code, after the byte array of the image is obtained, add the map property for using the image to the hyperlink information with HTML code, so that the hyperlink can work.
Then, if entering the URL http://localhost:8080/testChart/testChart.jsp?dfx=ChartGYMMain in the web browser, we would get the following result:
At this point the hyperlink added to the column chart has taken effect. Hover the mouse over a column and a specified tip will appear. Then click on the tip to jump to the chart for a specified athlete:
3. Using SVG
We can choose to output an SVG vector image when plotting a chart in esProc. There some differences between using SVG image and using a png, jpg or gif image.
First their plotting algorithms are different. Below is a plotting algorithm (ChartSVG.dfx) for a column chart showing an athlete’s performance.
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE where NAME=?”,name) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”xEnd”:0.9,”xPosition”:0.7) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”yStart”:0.7) |
| 6 | =A1.plot(“Column”,”htmlLink”:”testChartSVG.jsp?dfx=ChartSVGMain”,”linkTarget”:”_self”,”axis1″:”x”,”data1″:A2.(EVENT),”axis2″:”y”,”data2″:A2.(SCORE)) |
| 7 | =A1.plot(“Text”,”text”:name,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3,”textSize”:16,”textColor”:-10092340) |
| 8 | return A1.draw(550,200) |
This plotting algorithm and the one used in the first section use the same parameter – name. Main differences are that, in A8, there is no option used in G.draw() and no G.hlink() is used to return the hyperlink information. Instead, a hyperlink is defined with testChartSVG.jsp. Related code will be explained later. In this case the column chart displaying scores for all athletes can be plotted using the plotting algorithm ChartSVGMain.dfx:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”xEnd”:0.9,”xPosition”:0.7) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”yStart”:0.7) |
| 6 | =A1.plot(“Column”,”stackType”:2,”htmlLink”: A2.(“testChartSVG.jsp?dfx=ChartSVG&arg=”+NAME),”linkTarget”:”_self”, “axis1″:”x”,”data1″:A2.(NAME+”,”+EVENT),”axis2″:”y”,”data2″:A2.(SCORE)) |
| 7 | =A1.plot(“Text”,”text”:”GYMSCORE”,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3,”textSize”:16,”textColor”:-16750900) |
| 8 | return A1.draw(550,200) |
Likewise, the plotting algorithm returns an SVG image with a hyperlink using testChartSVG.jsp.
Below is the code for testChartSVG.jsp:
<%@page contentType=”text/html; charset=gb2312″ language=”java” import=”java.sql.*” errorPage=””%>
<!DOCTYPE html>
<%
String dfx = request.getParameter(“dfx”);
String arg = request.getParameter(“arg”);
Connection con = null;
com.esproc.jdbc.InternalCStatement st;
String svg = “”;
try {
Class.forName(“com.esproc.jdbc.InternalDriver”);
con= DriverManager.getConnection(“jdbc:esproc:local://”);
String callDfx = dfx;
if (arg != null) {
callDfx += “(\””+arg+”\”)”;
}
else {
callDfx += “()”;
}
st =(com. esproc.jdbc.InternalCStatement)con.prepareCall(“call “+callDfx);
st.execute();
ResultSet rs = st.getResultSet();
rs.next();
Object o = rs.getObject(1);
byte[] bytes = (byte[]) rs.getObject(1);
svg = new String(bytes, “UTF-8″);
}
catch (Exception e) {
}
finally {
if (con != null) {
try {
con.close();
}
catch (Exception e) {
e.printStackTrace();
}
}
}
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>testSVG</title>
</head>
<body>
<%=svg%>
</body>
</html>
Compared with the testChart.jsp in the first section, it is not necessary here to use readChart.jsp to handle the returned image. Instead, the code for SVG image will be generated right through the obtained byte array in HTML.
The SVG code is allowed to include the hyperlink information, so there is no need to use the method used in the second section to make the hyperlink effective. But note that SVG code is available only with web browsers supporting HTML5.0, such as IE9 version or above.
By accessing the website http://localhost:8080/testChart/testChartSVG.jsp?dfx=ChartSVGMain through web browser, we would get the following result:
Click on a column, the hyperlink will jump to the chart you desire:
