NetCharts® Pro and JSP

This JSP produces an interative barchart. It uses a utility servlet called ImageWriter which is provided with NetCharts Pro to return the image data. The example can also modifed to demonstrate javascript-based drilldown, as described in the source code.

NetCharts Pro JSP Example

Source Code

<%@ page import="java.awt.Font" %>
<%@ page import="java.util.*" %>
<%@ page import="netcharts.pro.charts.bar.NFBarchart" %>
<%@ page import="netcharts.pro.common.*" %>
<%@ page import="netcharts.pro.common.barset.NFBarSet" %>
<%@ page import="netcharts.pro.util.NFServletUtil" %>
<%@ page import="ncpro.examples.servlet.jspexample.ExampleData" %>

<html>
<head>
<title>NetCharts Pro JSP Example</title>
<LINK REL="stylesheet" HREF="styles.css" TYPE="TEXT/CSS">
<SCRIPT>

function doSelection(index, param, value, labelarray) {
var arraycontent = "";
for (var i=0; i < labelarray.length; i++) {
arraycontent = arraycontent + "Array["+i+"]: "+labelarray[i]+"\n";
}
window.alert("Parameter: " + param + "\nIndex: " + index + "\nValue: "
+ value + "\n" + arraycontent);
window.location.search="?year=" + labelarray[0] + "&location=" + index;
}
function handleYearChange(f) {
window.location.search="?year=" + f.options[f.selectedIndex].text;
}
</SCRIPT>
</head>

<%
String chart1 = "";

// Look for the query string parameters.
String year = request.getParameter("year");
String location = request.getParameter("location");

if (year == null) {
year = "2000";
}

String defaultTemplate =
"ChartType = BARCHART;"+
"ChartName = \"chart\";"+
"ChartSize = (500,300);"+
"ColorTable = x284b53,x005699,xb8bc9c,x271651,xaa0036,xecf0b9,x999966,x333366,
xc3c3e6,x594330,xa0bdc4,x005699,x999966,x213321,x998300;"+
"Background = (white,NONE,1,\"null\",TILE,black);"+
"AntiAlias = ON;"+
"Legend = (\"OFF\",black,\"SansSerif\",10,0);"+
"LegendItems = ;"+
"Header = (\"\",black,\"SansSerif\",10,0,,CENTER);"+
"RightTitle = (\" \",black,\"SansSerif\",12,0,,CENTER);"+
"RightTitleBox = (null,NONE,2,\"null\",TILE,black);"+
"DwellLabel = (ON,white,\"SansSerif\",10,0);"+
"DwellLabelBox = (grey,RAISED,1,\"null\",TILE,black);"+
"BackgroundFillPattern = (NONE,null,null);"+
"Grid = (lightgray,null,black);"+
"GridLine = (BOTH,SOLID,1);"+
"GridAxis = (BOTTOM,LEFT);"+
"RightScale = ;"+
"RightTics = (OFF,,\"SansSerif\",10,0);"+
"RightTicLayout = (AUTO,0,2);"+
"TopScale = ;"+
"TopTics = (OFF,,\"SansSerif\",10,0);"+
"TopTicLayout = (AUTO,0,2);"+
"BottomScale = ;"+
"BottomTics = (ON,black,\"SansSerif\",10,0);"+
"BottomTicLayout = (AUTO,0,2);"+
"LeftScale1 = (0,,);"+
"LeftTics1 = (ON,,\"SansSerif\",10,0);"+
"LeftTicLayout1 = (AUTO,0,2);"+
"LeftAxesGaps = ;"+
"LeftAxesLayout = 0;"+
"Grid3DDepth = -1;"+
"BarSymbol = (BAR,null);"+
"BarValueLabelStyle = NONE;"+
"BarBorder = (NONE,1,black);"+
"Bar3DDepth = 5;"+
"BarWidth = 61;"+
"GraphLayout = VERTICAL;"+
"GraphType = GROUP;";

// We will use this class to retrieve the data.
ExampleData data = new ExampleData();
Vector years = data.getYears();

// Create a new bar chart from the template.
NFBarchart chart = (NFBarchart)NFGraph.getGraphFromTemplate(defaultTemplate);

// Set the chart header.
NFTitle header = chart.getHeader();
header.setText("Data for " + ((location == null)
?year:data.getLocationLabels().elementAt(Integer.parseInt(location)))
+ " (" + year + ")");
chart.setHeader(header);

// Set the bar labels.
if (location == null) {
chart.setDataLabels(data.getLocationLabels());
} else {
chart.setDataLabels(data.getDetailLabels());
}

// Set the bar data.
NFBarSet bSet = new NFBarSet(year, null);
int[] theData = null;
if (location == null) {
theData = data.getDataByYear(year);
} else {
theData = data.getLocationData(year, Integer.parseInt(location));
}
for (int i = 0; i < theData.length; i++) {
bSet.addElement(theData[i]);
}
chart.addBarSet(bSet);

String defaultHref = null;
// The NFServletUtil.getDrillDownPage method call includes a javascript method
// as the default HREF. The default HREF will be used as the URL of any active
// labels that do not have associated URLs. A common use is to filter the request
// using the parameters automatically included when a JavaScript method is
// used within an active label URL. This does require that a JavaScript Protocol
// Handler be registered within the Application Server. To see the filtering
// in action, make sure there is a JavaScript Protocol Handler active within
// the system and uncomment the next line.
/*
if (location == null) {
defaultHref = "javascript:doSelection()";
}
*/

// Generate the HTML code to include the chart within the page.
chart1 = NFServletUtil.getDrillDownPage(chart, request,
NFServletUtil.DEFAULT_MIME_TYPE, false, "getimage", defaultHref);

// Make sure to release the chart resources.
chart.stop();
chart = null;
%>
<body>
<h3 align="center">NetCharts Pro JSP Example</h3>
<p class="psmall">This JSP gives an example of including charts using NetCharts Pro within
JSP pages. When NetCharts Pro produces the HTML elements to include within a page
using a Model-II Architecture, the image is placed within the HTTP Session
to be retrieved during the second pass. More detailed information about
this architecture can be found on page 20 of the Programming With NetCharts
Pro documentation that came with your NetCharts Pro installation.</p>
<p class="psmall">Because of various limitations and issues involved with
returning binary image data using a JSP page, we recommend using a Java Servlet to return the binary
image to the client. Included with NetCharts Pro is an example servlet,
<a href="src/ImageWriter.txt"><i>ncpro.examples.servlet.ImageWriter</i></a> that can
be used by developers to return the image.</p>
<p class="psmall">Compile the servlet, include it within your Web Application and make a
standard servlet mapping in your web.xml. Then, specify the servlet
location when you make your getDrillDownPage method call using the 5th
parameter of the call. This would look like:
<p class="code">String page = NFServletUtil.getDrillDownPage(chart, request,
NFServletUtil.MIME_TYPE_PNG, false, request.getContextPath() + "/getimage");</p>
<p class="psmall">In this case, the ImageWriter Servlet was given a path of /getimage in the web.xml.</p>
<%=NFServletUtil.getRolloverJavaScript()%>
<p align="left" class="psmall"><form method="POST" name="yearForm">Year: <select size="1"
name="year" id="year" onChange="handleYearChange(this);">
<%
for (int i = 0; i < years.size(); i++) {
String selected = year.equals((String)years.elementAt(i))?" selected":"";
%>
<option<%=selected%>><%=years.elementAt(i)%></option>
<%
}
%>
</select>
</form><%=chart1%></p>
</body>
</html>