You are viewing documentation for an older version. For current documentation - click here.
Using FusionCharts with ColdFusion > 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.cfm. We basically need to add the link attribute for each <set> element. We create a new page Default.cfm from the previous page in DBExample folder with the following code changes:

<HTML>
<HEAD>
   <TITLE>
      FusionCharts - Database Example
   </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<cfinclude template="../Includes/FusionCharts.cfm">
<BODY>
   <!--- Generate the chart element --->
   <cfset strXML = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units'>">

   <!--- Iterate through each factory --->
   <cfquery name="qry" datasource="dev">
      select * from Factory_Master
   </cfquery>

   <cfloop query="qry">
      <cfset factoryID = qry.FactoryId>
      <cfset factoryName = qry.FactoryName>
      <!--- Now get details for this factory --->
      <cfquery name="qryDetails" datasource="dev">
         select sum(Quantity) as TotOutput from Factory_Output where FactoryId=#factoryID#
      </cfquery>
      <!--- Generate <set label='..' value='..'/> --->
      <cfset strXML = strXML & "<set label='#factoryName#' value='#qryDetails.totOutput#'/>">
   </cfloop>

   <!--- Finally, close <chart> element --->
   <cfset strXML = strXML & "</chart>">

   <!--- Create the chart - Pie 3D Chart with data from strXML --->
   <cfoutput>#renderChart("../../FusionCharts/Pie3D.swf", "", strXML, "FactorySum", 600, 300, false, false)#</cfoutput>
</BODY>
</HTML>

As you can see in the code above, we're doing the following:

  1. Include FusionCharts.js JavaScript class and FusionCharts.cfm , to enable easy embedding of FusionCharts.
  2. Thereafter, we generate the XML data document by iterating through the recordset. We store the XML data in strXML variable. To each <set> element, we add the link attribute, which points to Detailed.cfm - the page that contains the chart to show details. We pass the factory id of the respective factory by appending it to the link. We finally Url Encode the link, which is a very important step.
  3. Finally, we render the chart using renderChart() method and pass strXML as dataXML.

Let's now shift our attention to Detailed.cfm page.

 
Creating the detailed data chart page
The page Detailed.cfm contains the following code:

<HTML>
<HEAD>
   <TITLE>
      FusionCharts - Database and Drill-Down Example
   </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<cfinclude template="../Includes/FusionCharts.cfm">
<BODY>
   <!---
   This page is invoked from Default.cfm. When the user clicks on a pie
   slice in Default.cfm, the factory Id is passed to this page. We need
   to get that factory id, get information from database and then show
   a detailed chart.
   --->

   <cfset FactoryId = URL.FactoryId>

   <!--- Generate the chart element string --->
   <cfset strXML = "<chart palette='2' caption='Factory " & FactoryId &" Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' >">

   <!--- Now, we get the data for that factory --->
   <cfquery name="qry" datasource="dev">
      select * from Factory_Output where FactoryId=#FactoryId#
   </cfquery>

   <cfloop query="qry">
      <cfset strXML = strXML & "<set label='" & datePart("d",qry.DatePro) & "/" & datePart("m",qry.DatePro) & "' value='" & qry.Quantity & "'/>">
   </cfloop>

   <!--- Finally, close <chart> element --->
   <cfset strXML = strXML & "</chart>">

   <!--- Create the chart - Column 2D Chart with data from strXML --->
   <cfoutput>#renderChart("../../FusionCharts/Column2D.swf", "", strXML, "FactoryDetailed", 600, 300, false, false)#</cfoutput>
<BR>
<a href='Default.cfm?animate=0'>Back to Summary</a>
</BODY>
</HTML>

In this page, we're:

  1. Including FusionCharts.js JavaScript class and FusionCharts.cfm , to enable easy embedding of FusionCharts.
  2. Requesting the factory id for which we've to show detailed data. This data was sent to us as querystring, as a part of pie chart link.
  3. We get the requisite data for this factory from database and then convert it into XML using string concatenation.
  4. Finally, we render a Column 2D chart using renderChart() method to show detailed data.

When you now run the app, you'll see the detailed page as under: