Creating Drill-down Charts - FusionCharts XT Suite Documentation

FusionCharts ASP.NET Wrapper can be downloaded from here.

A column 2D chart, with the drill-down functionality, is shown below:

FusionCharts should load here..

The above chart shows the annual sales summary for the years 2010-2013. It is configured to show three levels of drill-down. The first column 2D chart shows the yearly sales summary for all the four years.

When any one of the four data plots for a year is clicked, the chart drills down to show a second column 2D chart. This chart shows the quarterly sales summary for that year..

When any one of the four data plots for a quarter is clicked, the chart drills down to show a third column 2D chart. This chart shows the monthly sales summary for that quarter.

In this example, you will be shown how you can create this drill-down chart using the FusionCharts ASP.NET wrapper.

The data structure that goes into the ../DrillDownExample/Default.aspx file is given below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="DB_DrillDown_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>FusionCharts - Simple</title>
        <!-- FusionCharts script tag -->
        <script type="text/javascript" src="../fusioncharts/fusioncharts.js"></script>
        <!-- End -->
    </head>
    <body>
        <div style="text-align:center">
               <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
    </body>
</html>

The data structure that goes into the code behind ../DrillDownExample/Default.aspx.cs file is given below:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

// Use the `FusionCharts.Charts` namespace to be able to use classes and methods required to create charts.
// using FusionCharts.Charts;

public partial class DB_DrillDown_Default: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        // The data for the sample drill-down chart is stored in the DrillDownSSData.json file.
        // To create this chart, chart data will be loaded from the `.json` file.

        // Initialize the chart.
        Chart sales = new Chart("column2d", "myChart", "600", "350", "jsonurl", "../Data/DrillDownSSData.json");

        // Render the chart.
        Literal1.Text = sales.Render();
    }
}

To read on how drill-down charts are created, click here.

There! You have now seen how you can use the FusionCharts ASP.NET wrapper to create drill-down charts.