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: |
![]() |