Simple Clickable Charts

[JSP Version] jspdemo/clickbar.jsp

<%@page import="ChartDirector.*, java.util.*" %>
<%
// The data for the bar chart
double[] data = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};

// The labels for the bar chart
String[] labels = {"1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005"};

// Create a XYChart object of size 600 x 360 pixels
XYChart c = new XYChart(600, 360);

// Add a title to the chart using 18pt Times Bold Italic font
c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic", 18);

// Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical gradient color from
// light blue (eeeeff) to deep blue (0000cc) as background. Set border and grid lines to white
// (ffffff).
c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, 0xeeeeff, 0x0000cc), -1,
    0xffffff, 0xffffff);

// Add a multi-color bar chart layer using the supplied data. Use soft lighting effect with light
// direction from top.
c.addBarLayer3(data).setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Top));

// Set x axis labels using the given labels
c.xAxis().setLabels(labels);

// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);

// When auto-scaling, use tick spacing of 40 pixels as a guideline
c.yAxis().setTickDensity(40);

// Add a title to the y axis with 12pt Times Bold Italic font
c.yAxis().setTitle("USD (millions)", "Times New Roman Bold Italic", 12);

// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);

// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Create an image map for the chart
viewer.setImageMap(c.getHTMLImageMap("clickline.jsp", "", "title='{xLabel}: US$ {value|0}M'"));
%>
<!DOCTYPE html>
<html>
<head>
    <title>Simple Clickable Bar Chart</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        Simple Clickable Bar Chart
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
    </div>
    <!-- ****** Here is the chart image ****** -->
    <%= viewer.renderHTML(response) %>
</body>
</html>

The above code is quite similar to most of the sample codes in this documentation, so it will not be discussed in detail. The main difference is the code for creating the image map.

viewer.setImageMap(c.getHTMLImageMap("clickline.jsp", "", "title='{xLabel}: US$ {value|0}M'"));

In the line above, the url parameter is set to "clickline.jsp". The query parameter is left empty. When a bar is clicked, the browser will navigate to the url with the default query parameter (see BaseChart.getHTMLImageMap). The query parameters are different for each bar and can be used to determine which bar has been clicked.

In the previous Clickable Bar Chart sample code, when a bar is clicked, "clickline.jsp" will be invoked.

The code for the handler is listed below. It determines which year the user has clicked from query parameters. It then creates a clickable line chart for that year using "clickpie.jsp" as the click handler. As the code is similar to the Clickable Bar Chart, it will not be explained further.

[JSP Version] jspdemo/clickline.jsp

<%@page import="ChartDirector.*, java.util.*" %>
<%
// Get the selected year.
String selectedYear = request.getParameter("xLabel");

//
// In real life, the data may come from a database based on selectedYear. In this example, we just
// use a random number generator.
//
int seed = 50 + (Integer.parseInt(selectedYear) - 1996) * 15;
RanTable rantable = new RanTable(seed, 1, 12);
rantable.setCol2(0, seed, -seed * 0.25, seed * 0.33, seed * 0.1, seed * 3);

double[] data = rantable.getCol(0);

//
// Now we obtain the data into arrays, we can start to draw the chart using ChartDirector
//

// Create a XYChart object of size 600 x 320 pixels
XYChart c = new XYChart(600, 360);

// Add a title to the chart using 18pt Times Bold Italic font
c.addTitle("Month Revenue for Star Tech for " + selectedYear, "Times New Roman Bold Italic", 18);

// Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical gradient color from
// light blue (eeeeff) to deep blue (0000cc) as background. Set border and grid lines to white
// (ffffff).
c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, 0xeeeeff, 0x0000cc), -1,
    0xffffff, 0xffffff);

// Add a red line (ff0000) chart layer using the data
ChartDirector.DataSet dataSet = c.addLineLayer().addDataSet(data, 0xff0000, "Revenue");

// Set the line width to 3 pixels
dataSet.setLineWidth(3);

// Use a 13 point circle symbol to plot the data points
dataSet.setDataSymbol(Chart.CircleSymbol, 13);

// Set the labels on the x axis. In this example, the labels must be Jan - Dec.
String[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov",
    "Dec"};
c.xAxis().setLabels(labels);

// When auto-scaling, use tick spacing of 40 pixels as a guideline
c.yAxis().setTickDensity(40);

// Add a title to the x axis to reflect the selected year
c.xAxis().setTitle("Year " + selectedYear, "Times New Roman Bold Italic", 12);

// Add a title to the y axis
c.yAxis().setTitle("USD (millions)", "Times New Roman Bold Italic", 12);

// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);

// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Create an image map for the chart
viewer.setImageMap(c.getHTMLImageMap("clickpie.jsp?year=" + selectedYear, "",
    "title='{xLabel}: US$ {value|0}M'"));
%>
<!DOCTYPE html>
<html>
<head>
    <title>Simple Clickable Line Chart</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        Simple Clickable Line Chart
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
    </div>
    <!-- ****** Here is the chart image ****** -->
    <%= viewer.renderHTML(response) %>
</body>
</html>

In the previous Clickable Line Chart sample code, when a line is clicked, "clickpie.jsp" will be invoked.

The code for the handler is listed below. It determines which year and month the user has clicked from query parameters. It then creates a clickable pie chart for that year and month, using "piestub.jsp" as the click handler. As the code is very similar to the Clickable Bar Chart, it will not be explained further.

[JSP Version] jspdemo/clickpie.jsp

<%@page import="ChartDirector.*, java.util.*" %>
<%
// Get the selected year and month
int selectedYear = Integer.parseInt(request.getParameter("year"));
int selectedMonth = Integer.parseInt(request.getParameter("x")) + 1;

//
// In real life, the data may come from a database based on selectedYear. In this example, we just
// use a random number generator.
//
int seed = (selectedYear - 1992) * (100 + 3 * selectedMonth);
RanTable rantable = new RanTable(seed, 1, 4);
rantable.setCol(0, seed * 0.003, seed * 0.017);

double[] data = rantable.getCol(0);

// The labels for the pie chart
String[] labels = {"Services", "Hardware", "Software", "Others"};

// Create a PieChart object of size 600 x 240 pixels
PieChart c = new PieChart(600, 280);

// Set the center of the pie at (300, 140) and the radius to 120 pixels
c.setPieSize(300, 140, 120);

// Add a title to the pie chart using 18pt Times Bold Italic font
c.addTitle("Revenue Breakdown for " + selectedMonth + "/" + selectedYear,
    "Times New Roman Bold Italic", 18);

// Draw the pie in 3D with 20 pixels 3D depth
c.set3D(20);

// Set label format to display sector label, value and percentage in two lines
c.setLabelFormat("{label}<*br*>${value|2}M ({percent}%)");

// Set label style to 10pt Arial Bold Italic font. Set background color to the same as the sector
// color, with reduced-glare glass effect and rounded corners.
TextBox t = c.setLabelStyle("Arial Bold Italic", 10);
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.glassEffect(Chart.ReducedGlare));
t.setRoundedCorners();

// Use side label layout method
c.setLabelLayout(Chart.SideLayout);

// Set the pie data and the pie labels
c.setData(data, labels);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Create an image map for the chart
viewer.setImageMap(c.getHTMLImageMap("piestub.jsp", "", "title='{label}:US$ {value|2}M'"));
%>
<!DOCTYPE html>
<html>
<head>
    <title>Simple Clickable Pie Chart</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        Simple Clickable Pie Chart
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
    </div>
    <!-- ****** Here is the chart image ****** -->
    <%= viewer.renderHTML(response) %>
</body>
</html>

In the previous Clickable Pie Chart sample code, when a sector is clicked, "piestub.jsp" will be invoked. Its code is listed below. In this example, it simply displays some data about the sector.

[JSP Version] jspdemo/piestub.jsp

<!DOCTYPE html>
<html>
<head>
    <title>Simple Clickable Pie Chart Handler</title>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
    Simple Clickable Pie Chart Handler
</div>
<hr style="border:solid 1px #000080" />
<div style="font:10pt verdana; margin-bottom:20px">
    <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
</div>
<div style="font:10pt verdana;">
<b>You have clicked on the following sector :</b><br />
<ul>
    <li>Sector Number : <%=request.getParameter("sector")%></li>
    <li>Sector Name : <%=request.getParameter("label")%></li>
    <li>Sector Value : <%=request.getParameter("value")%></li>
    <li>Sector Percentage : <%=request.getParameter("percent")%>%</li>
</ul>
</div>
</body>
</html>