Using FusionCharts with ASP.NET 2.0 (C#.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. |
Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page. |
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="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="DBExample_Default" %> //xmlData will be used to store the entire XML document generated //We also keep a flag to specify whether we've to animate the chart or not. //Create recordset to get details for the factories //Finally, close <chart> element //Create the chart - Pie 3D Chart with data from xmlData
|
As you can see in the code above, we're doing the following:
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#" AutoEventWireup="false" CodeFile="Detailed.aspx.cs" Inherits="DBExample_Detailed" %> //First, get the factory Id //xmlData will be used to store the entire XML document generated //Generate the chart element string //Now, we get the data for that factory //Iterate through each record //Close <chart> element //Create the chart - Column 2D Chart with data from xmlData } |
In this page, we're:
When you now run the app, you'll see the detailed page as under: |
![]() |