Creating Drill-down Charts

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:

usingSystem;usingSystem.Collections;usingSystem.Configuration;usingSystem.Data;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.HtmlControls;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebControls.WebParts;// Use the `FusionCharts.Charts` namespace to be able to use classes and methods required to create charts.// using FusionCharts.Charts;publicpartialclassDB_DrillDown_Default:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){// 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.Chartsales=newChart("column2d","myChart","600","350","jsonurl","../Data/DrillDownSSData.json");// Render the chart.Literal1.Text=sales.Render();}}

ImportsSystem.CollectionsImportsSystem.ConfigurationImportsSystem.DataImportsSystem.WebImportsSystem.Web.SecurityImportsSystem.Web.UIImportsSystem.Web.UI.HtmlControlsImportsSystem.Web.UI.WebControlsImportsSystem.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 'ThispagedemonstratestheeaseofgeneratingchartsusingFusionCharts.' For this chart, we'veusedapre-definedDrillDownSSData.json(containedin/Data/folder)' Ideally, you would NOT use a physical data file. Instead you'llhave' your own ASP.NET scripts virtually relay the JSON / XML data document. 'Forahead-start,we've kept this example very simple. 'Initializechart-Column2DChartwithdatafromData/DrillDownSSData.jsonDimsalesAsNewChart("column2d","myChart","600","350","jsonurl","../../Data/DrillDownSSData.json")'RenderthechartLiteral1.Text=sales.Render()EndSubEndClass