Using FusionCharts with ASP.NET(VB.NET) > 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.aspx. We basically need to add the link attribute for each <set> element. We create a new page Default.aspx from the previous page in DBExample folder with the following code changes:

<%@ Page language="vb" Codebehind="Default.aspx.vb" AutoEventWireup="false" Inherits="InfoSoftGlobal.InfoSoftGlobal.GeneralPages.ASP.NET.DBExample._Default" %>
<HTML>
<HEAD>
   <TITLE>FusionCharts - Database Example </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<body>
   <form id='form1' name='form1' method='post' runat="server">
      <%=GetFactorySummaryChartHtml()%>
   </form>
</body>
</HTML>


Public Function GetFactorySummaryChartHtml() As String  
   'xmlData will be used to store the entire XML document generated
   Dim xmlData As String
   'We also keep a flag to specify whether we've to animate the chart or not.
   'If the user is viewing the detailed chart and comes back to this page, he shouldn't
   'see the animation again.
   Dim animateChart As String
   animateChart = Request.QueryString("animate")
   'Set default value of 1
   If ((Not (animateChart) Is Nothing) _
      AndAlso (animateChart.Length = 0)) Then
      animateChart = "1"
   End If
   'Generate the chart element
   xmlData = ("<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30'    showBorder='1' for" & _
   "matNumberScale='0' numberSuffix=' Units' animation=' " _
   & (animateChart & "'>"))
   'Iterate through each factory
   Dim factoryQuery As String = "select * from Factory_Master"
   Dim connection As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)
   Dim factoryCommand As OdbcCommand = New OdbcCommand(factoryQuery, connection)
   Dim adapter As OdbcDataAdapter = New OdbcDataAdapter(factoryCommand)
   Dim table As DataTable = New DataTable
   adapter.Fill(table)
   For Each row As DataRow In table.Rows
      Dim quantityQuery As String = ("select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" & row("FactoryId"))
      Dim quantityCommand As OdbcCommand = New OdbcCommand(quantityQuery, connection)
      xmlData = (xmlData & ("<set label='" _
         & (row("FactoryName").ToString & ("' value='" _
         & (quantityCommand.ExecuteScalar.ToString & ("' link='" _
         & (Server.UrlEncode(("Detailed.aspx?FactoryId=" & row("FactoryId").ToString)) & "'/>")))))))
   Next
   connection.Close()
   'Finally, close <chart> element
   xmlData = (xmlData & "</chart>")
   'Create the chart - Pie 3D Chart with data from xmlData
   Return FusionCharts.RenderChart("../../FusionCharts/Pie3D.swf", "", xmlData, "FactorySum", "600", "300", False, False)
End Function

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

  1. Include FusionCharts.js JavaScript class to enable easy embedding of FusionCharts.
  2. We then open a connection to Access database.
  3. Thereafter, we generate the XML data in the GetFactorySummaryChartHtml() method document by iterating through the recordset. We store the XML data in xmlData variable. To each <set> element, we add the link attribute, which points to Detailed.aspx - 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.
  4. Finally, we render the chart using RenderChart() method and pass xmlData as dataXML.

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

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

<%@ Page language="c#" Codebehind="Detailed.aspx.vb" AutoEventWireup="false" Inherits="InfoSoftGlobal.GeneralPages.ASP.NET.DBExample.Detailed" %>
<HTML>
<HEAD>
   <TITLE>FusionCharts - Database and Drill-Down Example </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<body>
   <form id='form1' name='form1' method='post' runat="server">
      <%=GetFactoryDetailedChartHtml()%>
   </form>
</body>
</HTML>


Public Function GetFactoryDetailedChartHtml() As String
   'This page is invoked from Default.aspx. When the user clicks on a pie
   'slice in Default.aspx, 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 As String
   'Request the factory Id from Querystring
   factoryId = Request.QueryString("FactoryId")
   'xmlData will be used to store the entire XML document generated
   Dim xmlData As String
   'Generate the chart element string
   xmlData = ("<chart palette='2' caption='Factory " _
& (factoryId & " Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' >"))
   'Now, we get the data for that factory
   Dim query As String = ("select * from Factory_Output where FactoryId=" & factoryId)
   Dim connection As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)
   Dim command As OdbcCommand = New OdbcCommand(query, connection)
   Dim reader As OdbcDataReader = command.ExecuteReader

   While reader.Read
      xmlData = (xmlData & ("<set label='" _
         & (CType(reader("DatePro"), DateTime).Day.ToString & ("/" _
         & (CType(reader("DatePro"), DateTime).Month.ToString & ("' value='" _
         & (reader("Quantity").ToString & "'/>")))))))

   End While
   reader.Close()
   'Close <chart> element
   xmlData = (xmlData & "</chart>")
   'Create the chart - Column 2D Chart with data from xmlData
   Return FusionCharts.RenderChart("../../FusionCharts/Column2D.swf", "", xmlData, "FactoryDetailed", "600", "300", False, False)
End Function

In this page, we're:

  1. Including FusionCharts.js JavaScript class 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: