{"id":2691,"date":"2012-03-30T19:10:12","date_gmt":"2012-03-30T13:40:12","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2691"},"modified":"2026-01-20T14:41:10","modified_gmt":"2026-01-20T09:11:10","slug":"javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/","title":{"rendered":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2"},"content":{"rendered":"In the second part of FusionCharts XT with ASP.NET series, learn how to use SQL Server data to <a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">create JavaScript charts<\/a>. We will use the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/csnet\/CS_BasicExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">.NET library bundled with FusionCharts XT<\/a> to create charts in ASP.NET (C#). In the first article of this series, we saw how this .NET library reduces developer effort and generates the HTML and JavaScript required to produce interactive charts in the browser.\r\n<!--more-->\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#Preparing_the_project\" title=\"Preparing the project\">Preparing the project<\/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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#Creating_charts_using_Data_String_method\" title=\"Creating charts using Data String method\">Creating charts using Data String method<\/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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#Creating_charts_using_Data_URL_method\" title=\"Creating charts using Data URL method\">Creating charts using Data URL method<\/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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#Download_Source_Project\" title=\"Download Source Project\">Download Source Project<\/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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#Next_in_the_series_Creating_Drill-down_JavaScript_charts_with_ASPNETC\" title=\"Next in the series: Creating Drill-down JavaScript charts with ASP.NET(C#)\">Next in the series: Creating Drill-down JavaScript charts with ASP.NET(C#)<\/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\/\" target=\"_blank\" rel=\"noopener noreferrer\">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\/\">Part 2 &#8211; Plot JavaScript charts using SQL Server data<\/a><\/li>\r\n\t<li><a href=\"https:\/\/fusioncharts.com\/blog\/drill-down-javascript-charts-in-asp-netc-with-fusioncharts-xt\/\" target=\"_blank\" rel=\"noopener noreferrer\">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 SQL Server database that powers our showcase <a href=\"https:\/\/www.fusioncharts.com\/dashboards\" target=\"_blank\" rel=\"noopener noreferrer\">Management Dashboard<\/a>. To keep things simple, we will plot the Total Sales Revenue of each Year.\r\n\r\n\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 library. In order to render a chart, 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\nIn order to automate this, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in <code>FusionCharts XT Download Package &gt; Code &gt; CS &gt; Bin &gt; FusionCharts.dll<\/code>. By referencing this library, rendering charts is just one line of code! Let us see how..\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\n<h2><span class=\"ez-toc-section\" id=\"Preparing_the_project\"><\/span>Preparing the project<span class=\"ez-toc-section-end\"><\/span><\/h2>\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\nYou can re-use the project we created in the previous article, or create a new one:\r\n<ul>\r\n\t<li>Create a blank ASP.NET (C#) web site and save it as <code>FusionChartsXT_with_ASPNET<\/code>.<\/li>\r\n\t<li>Right-click the project&#8217;s name in <code>Solution Explorer &gt; Add New Item &gt; Web Form<\/code>. Keep the name as <code>Using_MS_SQL_Server.aspx<\/code>.<\/li>\r\n\t<li>Copy the <code>Charts<\/code> folder from the FusionCharts Download Package and paste it in the Solution Explorer.<\/li>\r\n\t<li>Include the FusionCharts XT&#8217;s JavaScript file in <code>Using_MS_SQL_Server.aspx<\/code>:[cceWl lang=&#8217;html&#8217;]<\/li>\r\n\t<li>Right-click the project&#8217;s name in <code>Solution Explorer &gt; Add ASP.NET Folder &gt; App_Data<\/code>.<\/li>\r\n\t<li>Right-click <code>App_Data &gt; Add Existing Item &gt; Browse<\/code> to the folder containing <a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionChartsDB.zip\">Sample SQL Server Database<\/a>.<\/li>\r\n\t<li>Right-click the project&#8217;s name in <code>Solution Explorer &gt; Add Reference &gt; Browse<\/code>. Now browse to <code>FusionCharts XT Download Package &gt; Code &gt; CS &gt; Bin &gt; FusionCharts.dll<\/code>.<\/li>\r\n\t<li>In <code>Using_MS_SQL_Server.aspx.cs<\/code>, include the namespace of this library by writing\r\n<pre class=\"lang:csharp\">using InfoSoftGlobal;<\/pre>\r\n<\/li>\r\n<\/ul>\r\nThe above steps are necessary whenever you want to use FusionCharts XT in a .NET project.\r\n\r\nBefore we begin coding, let us have a look at the database. It has 7 tables:\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2702\" title=\"Database\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png\" alt=\"\" width=\"256\" height=\"359\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Database.png 256w, \/blog\/wp-content\/uploads\/2012\/03\/Database-107x150.png 107w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/>\r\nBut we will work with just 2 of them for this demo &#8211; <code>FC_Orders<\/code> and <code>FC_OrderDetails<\/code>:\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2701\" title=\"Concerned Database Tables\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Concerned-Database-Tables.png\" alt=\"\" width=\"255\" height=\"380\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Concerned-Database-Tables.png 255w, \/blog\/wp-content\/uploads\/2012\/03\/Concerned-Database-Tables-101x150.png 101w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_charts_using_Data_String_method\"><\/span>Creating charts using Data String method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAs explained in the previous post, you can supply data to FusionCharts using the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/how-fusioncharts-works\/DataXMLExp.html\" target=\"_blank\" rel=\"noopener noreferrer\">Data String method<\/a> or the Data URL method. First, let us try the Data String method.\r\n\r\nIn this method, the XML or JSON data is embedded within the web page, along with the chart\u2019s HTML and JavaScript code. This method doesn\u2019t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page.\r\n\r\nIn <code>Using_MS_SQL_Server.aspx<\/code>, create a <code>Literal<\/code> tag with a unique ID.\r\nIn the code-behind page, write the following code. In-line comments will help you understand what we&#8217;re doing:\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 Using_MS_SQL_Server : System.Web.UI.Page\r\n{\r\n    protected void Page_Load(object sender, EventArgs e)\r\n    {\r\n        \/\/ Construct the connection string to interface with the SQL Server Database\r\n        string 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\n        StringBuilder xmlStr = new StringBuilder();\r\n\r\n        \/\/ Provide the relevant customization attributes to the chart\r\n        xmlStr.Append(\"\");\r\n\r\n        \/\/ Create a SQLConnection object \r\n        using (SqlConnection conn = new SqlConnection(connStr))\r\n        {\r\n            \/\/ Establish the connection with the database\r\n            conn.Open();\r\n\r\n            \/\/ Construct and execute SQL query which would return the total amount of sales for each year\r\n            SqlCommand query = new SqlCommand(\"SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)\", conn);\r\n\r\n            \/\/ Begin iterating through the result set\r\n            SqlDataReader rst = query.ExecuteReader();\r\n\r\n            while (rst.Read())\r\n            {\r\n                \/\/ Construct the chart data in XML format\r\n                xmlStr.AppendFormat(\"\", rst[\"yr\"].ToString(), rst[\"AMOUNT\"].ToString());\r\n            }\r\n\r\n            \/\/ End the XML string\r\n            xmlStr.Append(\"\");\r\n\r\n            \/\/ Close the result set Reader object and the Connection object\r\n            rst.Close();\r\n            conn.Close();\r\n\r\n            \/\/ Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag\r\n            chart_from_db.Text = FusionCharts.RenderChart(\r\n                \"FusionChartsXT\/Column2D.swf\", \/\/ Path to chart's SWF\r\n                \"\",         \/\/ Leave blank when using Data String method\r\n                xmlStr.ToString(),  \/\/ xmlStr contains the chart data\r\n                \"annual_revenue\",   \/\/ Unique chart ID\r\n                \"640\", \"340\",       \/\/ Width &amp; Height of chart\r\n                false,              \/\/ Disable Debug Mode\r\n                true);              \/\/ Register with JavaScript object\r\n        }\r\n    }\r\n}\r\n<\/pre>\r\nSave and run this project. This is the chart that you should see in your browser:\r\n\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_charts_using_Data_URL_method\"><\/span>Creating charts using Data URL method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAs previously explained, in Data URL method, you need two pages:\r\n<ul>\r\n\t<li><strong>Chart Container Page<\/strong> &#8211; The page which embeds the HTML code to render the chart. This page also tells the chart where to load the data from. We&#8217;ll use the <code>Using_MS_SQL_Server.aspx<\/code> page for this.<\/li>\r\n\t<li><strong>Data Provider Page<\/strong> &#8211; This page provides the XML data to the chart. We&#8217;ll name this page as <code>DataProvider.aspx<\/code>.Keep the code in <code>Using_MS_SQL_Server.aspx<\/code> as it is. Delete all but the first line from <code>DataProvider.aspx<\/code>.\r\n\r\nFrom <code>Using_MS_SQL_Server.aspx.cs<\/code>, <em>cut<\/em> the contents of the <code>Page_Load()<\/code> method, till before the <code>RenderChart()<\/code> method&#8217;s line. Paste it in <code>DataProvider.aspx.cs<\/code>. This is what you should have in <code>DataProvider.aspx.cs<\/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\n    protected void Page_Load(object sender, EventArgs e)\r\n    {\r\n        \/\/ Construct the connection string to interface with the SQL Server Database\r\n        string 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\n        StringBuilder xmlStr = new StringBuilder();\r\n\r\n        \/\/ Provide the relevant customization attributes to the chart\r\n        xmlStr.Append(\"\");\r\n\r\n        \/\/ Create a SQLConnection object \r\n        using (SqlConnection conn = new SqlConnection(connStr))\r\n        {\r\n            \/\/ Establish the connection with the database\r\n            conn.Open();\r\n\r\n            \/\/ Construct and execute SQL query which would return the total amount of sales for each year\r\n            SqlCommand query = new SqlCommand(\"SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)\", conn);\r\n\r\n            \/\/ Begin iterating through the result set\r\n            SqlDataReader rst = query.ExecuteReader();\r\n\r\n            while (rst.Read())\r\n            {\r\n                \/\/ Construct the chart data in XML format\r\n                xmlStr.AppendFormat(\"\", rst[\"yr\"].ToString(), rst[\"AMOUNT\"].ToString());\r\n            }\r\n\r\n            \/\/ End the XML string\r\n            xmlStr.Append(\"\");\r\n\r\n            \/\/ Close the result set Reader object and the Connection object\r\n            rst.Close();\r\n            conn.Close();\r\n\r\n            \/\/ This page should return only XML content\r\n            Response.ContentType = \"text\/xml\";\r\n            Response.Write(xmlStr.ToString());\r\n        }\r\n    }\r\n}\r\n<\/pre>\r\nThis completes the code for <code>DataProvider.aspx<\/code>. Run this page, and all you will see is the chart data in XML format:\r\n<pre class=\"lang:xml\">\r\n\r\n\r\n\r\n\r\n<\/pre>\r\nComing back to <code>Using_MS_SQL_Server.aspx.cs<\/code>, modify the <code>RenderChart()<\/code> method to use Data URL:\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 InfoSoftGlobal;\r\n\r\npublic partial class Using_MS_SQL_Server : System.Web.UI.Page\r\n{\r\n    protected void Page_Load(object sender, EventArgs e)\r\n    {\r\n\r\n        \/\/ Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag\r\n        chart_from_db.Text = FusionCharts.RenderChart(\r\n            \"FusionChartsXT\/Column2D.swf\", \/\/ Path to chart's SWF\r\n            Server.UrlEncode(\"DataProvider.aspx\"), \/\/ Page which returns chart data\r\n            \"\",  \/\/ String containing the chart data. Leave blank when using Data URL.\r\n            \"annual_revenue\",   \/\/ Unique chart ID\r\n            \"640\", \"340\",       \/\/ Width &amp; Height of chart\r\n            false,              \/\/ Disable Debug Mode\r\n            true);              \/\/ Register with JavaScript object\r\n    }\r\n}\r\n<\/pre>\r\nWe use the <code>Server.UrlEncode()<\/code> method to take care of any special characters in the URL \/ querystring.\r\nSave and run this page. You should see the same chart as before:\r\n\r\n\r\n\r\nThe data for this chart is provided by <code>DataProvider.aspx.cs<\/code>. You can see this by opening the <em>Network<\/em> tab in either Firebug or Chrome&#8217;s Developer Tools.\r\n<h2><span class=\"ez-toc-section\" id=\"Download_Source_Project\"><\/span>Download Source Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/FusionChartsXT_with_ASPNET2.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2718\" title=\"Download Source Project\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code5.png\" alt=\"\" width=\"257\" height=\"100\" srcset=\"\/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code5.png 257w, \/blog\/wp-content\/uploads\/2012\/03\/Download_Sample_Code5-150x58.png 150w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Next_in_the_series_Creating_Drill-down_JavaScript_charts_with_ASPNETC\"><\/span>Next in the series: Creating Drill-down JavaScript charts with ASP.NET(C#)<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the third part of this series, we will add drill-down functionality to the above chart, so that we can drill-down into the year 1995 and see monthly revenue for that year. You can <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/csnet\/CS_Drill.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more about drill-down charts in the FusionCharts Documentation<\/a>. Stay tuned..<\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In the second part of FusionCharts XT with ASP.NET series, learn how to use SQL Server data to create JavaScript charts. We will use the .NET library bundled with FusionCharts XT to create charts in ASP.NET (C#). In the first article of this series, we saw how this .NET library reduces developer effort and generates [&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,211],"coauthors":[715],"class_list":["post-2691","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-asp-net","tag-dotnet","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2<\/title>\n<meta name=\"description\" content=\"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.\" \/>\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2\" \/>\n<meta property=\"og:description\" content=\"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-30T13:40:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"359\" \/>\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=\"8 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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\"\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\": \"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2\",\n\t            \"datePublished\": \"2012-03-30T13:40:12+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:10+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\"\n\t            },\n\t            \"wordCount\": 795,\n\t            \"commentCount\": 5,\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png\",\n\t            \"keywords\": [\n\t                \"asp.net\",\n\t                \"dotnet\",\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\",\n\t            \"name\": \"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2\",\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png\",\n\t            \"datePublished\": \"2012-03-30T13:40:12+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:10+00:00\",\n\t            \"description\": \"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/\"\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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2012\/03\/Database.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2012\/03\/Database.png\",\n\t            \"width\": 256,\n\t            \"height\": 359\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#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\": \"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2\"\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":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2","description":"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.","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\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2","og_description":"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.","og_url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-03-30T13:40:12+00:00","article_modified_time":"2026-01-20T09:11:10+00:00","og_image":[{"width":256,"height":359,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png","type":"image\/png"}],"author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2","datePublished":"2012-03-30T13:40:12+00:00","dateModified":"2026-01-20T09:11:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/"},"wordCount":795,"commentCount":5,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png","keywords":["asp.net","dotnet","javascript"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/","url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/","name":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2012\/03\/Database.png","datePublished":"2012-03-30T13:40:12+00:00","dateModified":"2026-01-20T09:11:10+00:00","description":"Part 2: SQL Server data in ASP.NET. Learn how to create professional 2026 JavaScript charts using our .NET library. Master Microsoft enterprise data visuals.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2012\/03\/Database.png","contentUrl":"\/blog\/wp-content\/uploads\/2012\/03\/Database.png","width":256,"height":359},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-using-sql-server-data-with-fusioncharts-xt-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Charts Using SQL Server Data with FusionCharts XT: Part 2"}]},{"@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\/2691","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=2691"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2691\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2691"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}