Using FusionCharts with JSP > Creating Drill-down charts |
In our previous example, we had used FusionCharts to plot a chart using data stored in database. We'll now extend that example itself to create a drill-down chart which can show more information. If you recall from previous example, we were showing the sum of factory output in a pie chart as under: |
![]() |
| In this example, we'll extend this example, so that when a user clicks on a pie slice for a factory, he can drill down to see date wise production for that factory. |
| Setting up the pie chart for Link |
| To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous BasicDBExample.jsp. We basically need to add the link attribute for each <set> element. We create a new page Default.jsp from the previous page in DBExample folder with the following code changes: |
<%@ page import ="com.fusioncharts.FusionChartsHelper"%> |
As you can see in the code above, we're doing the following:
Let's now shift our attention to Detailed.jsp page. |
| Creating the detailed data chart page |
| The page Detailed.jsp contains the following code: |
<%@ include file="../Includes/DBConn.jsp"%>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.text.SimpleDateFormat"%>
<HTML>
<HEAD>
<TITLE>FusionCharts - Database and Drill-Down Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
|
In this page, we're:
When you now run the app, you'll see the detailed page as under: |
|