{"id":2735,"date":"2012-04-12T18:23:52","date_gmt":"2012-04-12T12:53:52","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2735"},"modified":"2026-01-20T14:37:26","modified_gmt":"2026-01-20T09:07:26","slug":"drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/","title":{"rendered":"Drill-Down JavaScript Charts in ASP.NET (C#) with FusionCharts XT: Pt 3"},"content":{"rendered":"In the third part of FusionCharts XT with ASP.NET series, we will create drill-down <a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript charts<\/a> using data from MS SQL Server. <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-guide\/chart-configurations\/drill-down\">Drill-down charts<\/a> are best suited for situations which require the user to go from a summarized view to a granular view. Drill-down charts can present annual revenue &gt;&gt; quarterly revenue &gt;&gt; monthly revenue; or global sales &gt;&gt; sales by country &gt;&gt; sales by state &gt;&gt; sales by city. FusionCharts XT supports unlimited levels of drill-down, and the chart types and chart attributes can be configured for each level. To create drill-down charts in ASP.NET, we will use the .NET library that is bundled with the FusionCharts Suite. This library automatically generates the HTML, JavaScript and XML required to plot your charts, so that you don\u2019t need to.\r\n<blockquote>\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#FusionCharts_XT_with_ASPNET\" title=\"FusionCharts XT with ASP.NET\">FusionCharts XT with ASP.NET<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#What_we_are_going_to_visualize\" title=\"What we are going to visualize\">What we are going to visualize<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#NET_library_bundled_with_FusionCharts_XT\" title=\".NET library bundled with FusionCharts XT\">.NET library bundled with FusionCharts XT<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#What_we_will_need\" title=\"What we will need\">What we will need<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#Attributes_of_a_Drill-down_chart\" title=\"Attributes of a Drill-down chart\">Attributes of a Drill-down chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#Coding_the_drill-down_charts_page\" title=\"Coding the drill-down chart&#8217;s page\">Coding the drill-down chart&#8217;s page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#Customizing_the_Drill-down_chart\" title=\"Customizing the Drill-down chart\">Customizing the Drill-down chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#Download_source_files_for_these_samples\" title=\"Download source files for these samples\">Download source files for these samples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#Next_in_the_series_LinkedCharts_in_ASPNET\" title=\"Next in the series: LinkedCharts in ASP.NET\">Next in the series: LinkedCharts in ASP.NET<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"FusionCharts_XT_with_ASPNET\"><\/span>FusionCharts XT with ASP.NET<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ul>\r\n \t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/\">Part 1 &#8211; Create JavaScript charts in ASP.NET (C#)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Part 2 &#8211; Plot JavaScript charts using SQL Server data<\/a><\/li>\r\n \t<li><a href=\"#\">Part 3 &#8211; Create Drill-Down charts in ASP.NET(C#)<\/a><\/li>\r\n \t<li>Part 4 &#8211; Create LinkedCharts in ASP.NET(C#)<\/li>\r\n<\/ul>\r\n<\/blockquote>\r\n<h2><span class=\"ez-toc-section\" id=\"What_we_are_going_to_visualize\"><\/span>What we are going to visualize<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe will use the same database that powers our showcase <a href=\"https:\/\/www.fusioncharts.com\/dashboards\" target=\"_blank\" rel=\"noopener noreferrer\">Management Dashboard<\/a>. First we will create a drill-down chart which goes from annual revenue &gt;&gt; monthly revenue.\r\n<h2><span class=\"ez-toc-section\" id=\"NET_library_bundled_with_FusionCharts_XT\"><\/span>.NET library bundled with FusionCharts XT<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFusionCharts XT is essentially a JavaScript charting library. In order to render a chart, a certain amount of HTML and JavaScript is required, along with the chart data in <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DataFormats\/XML\/Overview.html\" target=\"_blank\" rel=\"noopener noreferrer\">XML<\/a> or <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DataFormats\/JSON\/Overview.html\" target=\"_blank\" rel=\"noopener noreferrer\">JSON<\/a>.\r\n\r\nTo automatically generate this HTML and JavaScript code, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in\r\n<pre class=\"lang:markup\">FusionCharts XT Download Package &gt; Code &gt; CS &gt; Bin &gt; FusionCharts.dll\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"What_we_will_need\"><\/span>What we will need<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<ul>\r\n \t<li>Visual Studio or Visual Web Developer<\/li>\r\n \t<li>SQL Server<\/li>\r\n \t<li><a href=\"https:\/\/www.fusioncharts.com\/download\/\/\" target=\"_blank\" rel=\"noopener noreferrer\">The latest version of FusionCharts XT<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionChartsDB.zip\">Sample SQL Server Database<\/a><\/li>\r\n<\/ul>\r\nWe will be using Visual Studio 2010 for this series. Visual Studio 2008 or Visual Web Developer will suit fine too.\r\n\r\nWe recommend that you continue with the same <a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionChartsXT_with_ASPNET2.zip\">Visual Studio Solution that we created in the last article<\/a>.\r\n\r\n<code>Using_MS_SQL_Server.aspx<\/code><code> would contain the base chart, and later on we'll create another page which will contain the drill-down chart.<\/code>\r\n<h2><span class=\"ez-toc-section\" id=\"Attributes_of_a_Drill-down_chart\"><\/span>Attributes of a Drill-down chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/Simple.html\" target=\"_blank\" rel=\"noopener noreferrer\">create a simple drill-down chart<\/a>, you will require the following 3 things:\r\n<ul>\r\n \t<li>A parent chart (which we already have from the previous article of this series)<\/li>\r\n \t<li>The <code>link<\/code> attribute added to the data plots of the parent chart (see below how to add this attribute)<\/li>\r\n \t<li>The child chart (we need to create this)<\/li>\r\n<\/ul>\r\nTo create a dataplot (be it column, pie or line\/area anchor) in XML, you would have to specify the <code>label<\/code> and the <code>value<\/code> attributes for the <code>set<\/code> element.\r\n\r\nIn <code>Using_MS_SQL_Server.aspx.cs<\/code>, change the following line:\r\n<pre class=\"lang:csharp\">xmlStr.AppendFormat(\"\", rst[\"yr\"].ToString(), rst[\"AMOUNT\"].ToString());\r\n[\/cceWl]\r\nto include the [cciel lang='xml']link[\/cciel] attribute:\r\n[cceWl lang='csharp']\r\nxmlStr.AppendFormat(\"\", rst[\"yr\"].ToString(), rst[\"AMOUNT\"].ToString(), Server.UrlEncode(\"DrillDown.aspx?year=\" + rst[\"yr\"].ToString()));\r\n<\/pre>\r\nNow when a user would click on a data plot, he would be taken to <code>DrillDown.aspx<\/code>, which would show the monthly revenues for the specified year.\r\n\r\nNote that we&#8217;ve used the <code>Server.UrlEncode()<\/code> method for the attribute, so that any special characters would be safely encoded to HTML entities.\r\n\r\nLet us now concern ourselves with the code for <code>DrillDown.aspx<\/code>.\r\n<h2><span class=\"ez-toc-section\" id=\"Coding_the_drill-down_charts_page\"><\/span>Coding the drill-down chart&#8217;s page<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<ul>\r\n \t<li>Add a new Web Form to the Solution, and save it as [cciel lang=&#8217;csharp&#8217;]DrillDown.aspx[\/cciel].<\/li>\r\n \t<li>Include [cciel lang=&#8217;javascript&#8217;]FusionCharts.js[\/cciel] in this page, with the correct path.<\/li>\r\n \t<li>Create a [cciel lang=&#8217;javascript&#8217;]Literal[\/cciel] tag with a unique ID.\r\n[cceWl lang=&#8217;html&#8217;][\/cceWl]\r\nThis is where the chart will be rendered.<\/li>\r\n \t<li>In <code>DrillDown.aspx.cs<\/code> reference the following:\r\n<pre class=\"lang:csharp\">using System.Data;\r\nusing System.Data.Sql;\r\nusing System.Data.SqlClient;\r\nusing System.Text;\r\nusing InfoSoftGlobal;\r\n[\/cceWl]<\/pre>\r\n<\/li>\r\n<\/ul>\r\nThis prepares the newer page to create charts. Thereafter, write the following code:\r\n<pre class=\"lang:csharp\">using System;\r\nusing System.Collections.Generic;\r\nusing System.Linq;\r\nusing System.Web;\r\nusing System.Web.UI;\r\nusing System.Web.UI.WebControls;\r\nusing System.Data;\r\nusing System.Data.Sql;\r\nusing System.Data.SqlClient;\r\nusing System.Text;\r\nusing InfoSoftGlobal;\r\n\r\npublic partial class DataProvider : System.Web.UI.Page\r\n{\r\nprotected void Page_Load(object sender, EventArgs e)\r\n{\r\n\/\/ Construct the connection string to interface with the SQL Server Database\r\nstring connStr = @\"Data Source=.SQLEXPRESS;AttachDbFilename=C:UsersFusion ChartsDocumentsVisual Studio 2010WebSitesFusionChartsXT_with_ASPNETApp_DataFusionChartsDB.mdf;Integrated Security=True;User Instance=True\";\r\n\r\n\/\/ Initialize the string which would contain the chart data in XML format\r\nStringBuilder xmlStr = new StringBuilder();\r\n\r\n\/\/ Capture the year from the querystring\r\nString year = Request.QueryString[\"year\"];\r\n\r\n\/\/ Provide the relevant customization attributes to the chart\r\nxmlStr.Append(\"\");\r\n\r\n\/\/ Create a SQLConnection object\r\nusing (SqlConnection conn = new SqlConnection(connStr))\r\n{\r\n\/\/ Establish the connection with the database\r\nconn.Open();\r\n\r\n\/\/ Construct and execute SQL query which would return the total amount of the sales for each month of the year specified\r\nSqlCommand query = new SqlCommand(\"SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, DATENAME(MONTH, FC_Orders.OrderDate) AS Month FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID WHERE YEAR(FC_Orders.OrderDate) = \" + year.ToString() + \" GROUP BY MONTH(FC_Orders.OrderDate), DATENAME(MONTH, FC_Orders.OrderDate) ORDER BY MONTH(FC_Orders.OrderDate), DATENAME(MONTH, FC_Orders.OrderDate)\", conn);\r\n\r\n\/\/ Begin iterating through the result set\r\nSqlDataReader rst = query.ExecuteReader();\r\n\r\nwhile (rst.Read())\r\n{\r\n\/\/ Construct the chart data in XML format\r\nxmlStr.AppendFormat(\"\", rst[\"Month\"].ToString(), rst[\"AMOUNT\"].ToString());\r\n}\r\n\r\n\/\/ End the XML string\r\nxmlStr.Append(\"\");\r\n\r\n\/\/ Close the result set Reader object and the Connection object\r\nrst.Close();\r\nconn.Close();\r\n\r\n\/\/ Set the rendering mode to JavaScript, from the default Flash.\r\nFusionCharts.SetRenderer(\"javascript\");\r\n\r\n\/\/ Call RenderChart(), pass the correct parameters, and write the return value to the Literal tag\r\ndrilldown.Text = FusionCharts.RenderChart(\r\n\"FusionChartsXT\/Column2D.swf\", \/\/ Path to chart's SWF\r\n\"\", \/\/ Page which returns chart data. Leave blank when using Data String.\r\nxmlStr.ToString(), \/\/ String containing the chart data. Leave blank when using Data URL.\r\n\"monthly_revenue\", \/\/ Unique chart ID\r\n\"640\", \"340\", \/\/ Width &amp; Height of chart\r\nfalse, \/\/ Disable Debug Mode\r\ntrue); \/\/ Register with JavaScript object\r\n}\r\n}\r\n}\r\n\r\n<\/pre>\r\nSave this page. Switch to <code>Using_MS_SQL_Server.aspx<\/code>, and run the project. This is what you should see:\r\n<h2><span class=\"ez-toc-section\" id=\"Customizing_the_Drill-down_chart\"><\/span>Customizing the Drill-down chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn FusionCharts XT, you can define the following types of links:\r\n<ul>\r\n \t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/SimpleExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in the same tab<\/a><\/li>\r\n \t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/NewWindow.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a new tab<\/a><\/li>\r\n \t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/FrameExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a specified frame<\/a><\/li>\r\n \t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/PopUpExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">open in a new pop-up window<\/a><\/li>\r\n \t<li>Links that <a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/JSExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">invoke JavaScript functions<\/a><\/li>\r\n \t<li><a href=\"https:\/\/docs.fusioncharts.com\/charts\/Code\/DrillDown\/ChartHotSpot.html\" target=\"_blank\" rel=\"noopener noreferrer\">Use the whole chart as a hotspot to use the simple link types named above<\/a><\/li>\r\n<\/ul>\r\nYou can <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/Simple.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more about customizing drill-down charts<\/a> in our documentation.\r\n\r\nYou can read an older blog post where we talk about <a href=\"https:\/\/fusioncharts.com\/blog\/4-things-to-know-to-create-an-intuitive-drill-down-interface\/\" target=\"_blank\" rel=\"noopener noreferrer\">making your drill-down charts more intuitive<\/a>.\r\n<h2><span class=\"ez-toc-section\" id=\"Download_source_files_for_these_samples\"><\/span>Download source files for these samples<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/DrillDown_Charts_with_FusionChartsXT.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2804\" title=\"Download Sample Project\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\" alt=\"\" width=\"257\" height=\"100\" srcset=\"\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png 257w, \/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code-150x58.png 150w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Next_in_the_series_LinkedCharts_in_ASPNET\"><\/span>Next in the series: LinkedCharts in ASP.NET<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe initially planned to write about Drill-down charts and LinkedCharts in a single post. However, we will cover LinkedCharts in ASP.NET(C#) exclusively in the next article. Till then you can <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DrillDown\/LinkedCharts.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more about LinkedCharts from our documentation<\/a>. Stay tuned..","protected":false},"excerpt":{"rendered":"<p>In the third part of FusionCharts XT with ASP.NET series, we will create drill-down JavaScript charts using data from MS SQL Server. Drill-down charts are best suited for situations which require the user to go from a summarized view to a granular view. Drill-down charts can present annual revenue &gt;&gt; quarterly revenue &gt;&gt; monthly revenue; [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[36,120,123,211],"coauthors":[715],"class_list":["post-2735","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-asp-net","tag-dotnet","tag-drill-down","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3<\/title>\n<meta name=\"description\" content=\"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3\" \/>\n<meta property=\"og:description\" content=\"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-12T12:53:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:07:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"257\" \/>\n\t<meta property=\"og:image:height\" content=\"100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"rishi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rishi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"rishi\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a\"\n\t            },\n\t            \"headline\": \"Drill-Down JavaScript Charts in ASP.NET (C#) with FusionCharts XT: Pt 3\",\n\t            \"datePublished\": \"2012-04-12T12:53:52+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:26+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\"\n\t            },\n\t            \"wordCount\": 733,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\",\n\t            \"keywords\": [\n\t                \"asp.net\",\n\t                \"dotnet\",\n\t                \"drill down\",\n\t                \"javascript\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\",\n\t            \"name\": \"Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\",\n\t            \"datePublished\": \"2012-04-12T12:53:52+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:26+00:00\",\n\t            \"description\": \"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png\",\n\t            \"width\": 257,\n\t            \"height\": 100\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Drill-Down JavaScript Charts in ASP.NET (C#) with FusionCharts XT: Pt 3\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a\",\n\t            \"name\": \"rishi\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/328482cd2c44c22cbfaf38e6113a8a24\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g\",\n\t                \"caption\": \"rishi\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/rishi\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3","description":"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/","og_locale":"en_US","og_type":"article","og_title":"Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3","og_description":"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.","og_url":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-04-12T12:53:52+00:00","article_modified_time":"2026-01-20T09:07:26+00:00","og_image":[{"width":257,"height":100,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png","type":"image\/png"}],"author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"Drill-Down JavaScript Charts in ASP.NET (C#) with FusionCharts XT: Pt 3","datePublished":"2012-04-12T12:53:52+00:00","dateModified":"2026-01-20T09:07:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/"},"wordCount":733,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png","keywords":["asp.net","dotnet","drill down","javascript"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/","url":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/","name":"Drill-down JavaScript charts in ASP.NET(C#) with FusionCharts XT \u2013 Part 3","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png","datePublished":"2012-04-12T12:53:52+00:00","dateModified":"2026-01-20T09:07:26+00:00","description":"Part 3: MS SQL Server data in ASP.NET. Learn to create interactive 2026 drill-down charts for your enterprise apps. Master deep-dive business dashboards.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png","contentUrl":"\/blog\/wp-content\/uploads\/2012\/04\/Download_Sample_Code.png","width":257,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Drill-Down JavaScript Charts in ASP.NET (C#) with FusionCharts XT: Pt 3"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a","name":"rishi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/328482cd2c44c22cbfaf38e6113a8a24","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&r=g","caption":"rishi"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/rishi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=2735"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2735\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2735"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}