Creating Drill-down Charts

FusionCharts ASP.NET Wrapper can be downloaded from here.

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

FusionCharts will 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>


    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Samples_DrillDownExample_Default" %>

    <!DOCTYPE html>
    <html xmlns=" http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>FusionCharts - DrillDownExample</title>
        <!-- FusionCharts script tag -->
        <script type="text/javascript" src="../../fusioncharts/fusioncharts.js"></script>
        <!-- End --> 
    </head>
    <body>
        Fusioncharts will render below
        <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();
        }
    }


    Imports System.Collections
    Imports System.Configuration
    Imports System.Data
    Imports System.Web
    Imports System.Web.Security
    Imports System.Web.UI
    Imports System.Web.UI.HtmlControls
    Imports System.Web.UI.WebControls
    Imports System.Web.UI.WebControls.WebParts

    ' Use the FusionCharts.Charts namespace to be able to use classes and methods required to // create charts.
    Imports FusionCharts.Charts
    Partial Class Samples_DrillDownExample_Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            ' This page demonstrates the ease of generating charts using FusionCharts.
            ' For this chart, we've used a pre-defined DrillDownSSData.json (contained in /Data/ folder)
            ' Ideally, you would NOT use a physical data file. Instead you'll have 
            ' your own ASP.NET scripts virtually relay the JSON / XML data document.
            ' For a head-start, we've kept this example very simple.

            ' Initialize chart - Column 2D Chart with data from Data/DrillDownSSData.json
            Dim sales As New Chart("column2d", "myChart", "600", "350", "jsonurl", "../../Data/DrillDownSSData.json")
            ' Render the chart
            Literal1.Text = sales.Render()
        End Sub
    End Class

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

Was this article helpful to you ?
Where do you think this article needs improvement?