FusionCharts Free Documentation

Using FusionCharts with ASP > 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.

Before you go further with this page, we recommend you to please see the previous sections like "Basic Examples", Creating Data from Array" as we start off from concepts explained in those pages.

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.

To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous BasicDBExample.asp. We basically need to add the link attribute for each <set> element. We create a new page Default.asp (in DB_DrillDown folder) from the previous page with the following code changes:

The code examples contained in this page are contained in Download Package > Code > ASP > DB_DrillDown folder.

   'Generate the graph element
   strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0' >"

   'Iterate through each factory
   strQuery = "select * from Factory_Master"
   Set oRs = oConn.Execute(strQuery)

   While Not oRs.Eof
      'Now create second recordset to get details for this factory
      Set oRs2 = Server.CreateObject("ADODB.Recordset")
      strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" & ors("FactoryId")
      Set oRs2 = oConn.Execute(strQuery)
      'Generate <set name='..' value='..' link='..' />
      'Note that we're setting link as Detailed.asp?FactoryId=<<FactoryId>> and then URL Encoding it
      strXML = strXML & "<set name='" & ors("FactoryName") & "' value='" & ors2("TotOutput") & "' link='" & Server.URLEncode("Detailed.asp?FactoryId=" & ors("FactoryId")) & "'/>"
      'Close recordset
      Set oRs2 = Nothing
      oRs.MoveNext
   Wend
   'Finally, close <graph> element
   strXML = strXML & "</graph>"
   Set oRs = nothing

   'Create the chart - Pie 3D Chart with data from strXML
   Call renderChart("../../FusionCharts/FCF_Pie3D.swf", "", strXML, "FactorySum", 650, 450)
%>
</BODY>
</HTML>

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

Include FusionCharts.js JavaScript class and FusionCharts.asp , to enable easy embedding of FusionCharts.
We then include DBConn.asp, which contains connection parameters to connect to Access database.
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.asp - 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.
Finally, we render the chart using renderChart() method and pass strXML as dataXML.

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

The page Detailed.asp contains the following code:

<%@ Language=VBScript %>
<HTML>
<HEAD>
   <TITLE> FusionCharts Free - Database and Drill-Down Example </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>


'We've also included ../Includes/FC_Colors.asp, having a list of colors
'to apply different colors to the chart's columns.

<BODY>
<%
   'This page is invoked from Default.asp. When the user clicks on a pie
   'slice in Default.asp, 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.

   'First, get the factory Id
   Dim FactoryId
   'Request the factory Id from Querystring
   FactoryId = Request.QueryString("FactoryId")

   Dim oRs, strQuery
   'strXML will be used to store the entire XML document generated
   Dim strXML, intCounter
   intCounter = 0

   Set oRs = Server.CreateObject("ADODB.Recordset")
   'Generate the graph element string
   strXML = "<graph caption='Factory " & FactoryId &" Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' decimalPrecision='0'>"
   'Now, we get the data for that factory
   strQuery = "select * from Factory_Output where FactoryId=" & FactoryId
   Set oRs = oConn.Execute(strQuery)
   While Not oRs.Eof
      'Here, we convert date into a more readable form for set name.
      strXML = strXML & "<set name='" & datePart("d",ors("DatePro")) & "/" & datePart("m",
      ors("DatePro")) & "' value='" & ors("Quantity") & "' color='" & getFCColor() & "' />"
      Set oRs2 = Nothing
      oRs.MoveNext
   Wend
   'Close <graph> element
   strXML = strXML & "</graph>"
   Set oRs = nothing

   'Create the chart - Column 2D Chart with data from strXML
   Call renderChart("../../FusionCharts/FCF_Column2D.swf", "", strXML, "FactoryDetailed", 600, 300)
%>
</CENTER>
</BODY>
</HTML>

In this page, we're:

Including FusionCharts.js JavaScript class and FusionCharts.asp , to enable easy embedding of FusionCharts.
Requesting the factory id for which we've to show detailed data. This data was sent to us as query string, as a part of pie chart link.
We get the requisite data for this factory from database and then convert it into XML using string concatenation.
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: