{"id":2654,"date":"2012-03-29T19:25:34","date_gmt":"2012-03-29T13:55:34","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=2654"},"modified":"2026-01-20T14:41:10","modified_gmt":"2026-01-20T09:11:10","slug":"javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/","title":{"rendered":"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1"},"content":{"rendered":"<em>FusionCharts XT with ASP.NET <\/em>is a new series in which we walk you through the fundamentals of creating a Javascript <a href=\"https:\/\/www.fusioncharts.com\/asp-net-charts?framework=csharp\">Interactive Graph<\/a> with your.NET skills. FusionCharts is the industry&#8217;s most popular enterprise-grade JavaScript charting solution. Our <a href=\"https:\/\/www.fusioncharts.com\/datastories\" target=\"_blank\" rel=\"noopener noreferrer\">enterprise customers<\/a> have endorsed our products and services, and we are constantly adding <a href=\"https:\/\/www.fusioncharts.com\/charts#fusionwidgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">newer products<\/a> and <a href=\"https:\/\/www.fusioncharts.com\/features\" target=\"_blank\" rel=\"noopener noreferrer\">features<\/a> to our solution. FusionCharts Suite meets all of your charting needs, whether they are simple column or pie charts, gauges, advanced zoom and scroll charts, or specialized financial charts. All of the charts include interactive features such as tooltips, drill-downs, and exporting as an image, PDF, or CSV. We&#8217;re also <a href=\"https:\/\/fusioncharts.com\/blog\/create-charts-for-iphone-and-ipad-apps-using-fusioncharts-xt\/\" target=\"_blank\" rel=\"noopener noreferrer\">iPhone and iPad ready<\/a>!\r\n\r\nWith FusionCharts XT, you can leverage your .NET skills to create JavaScript charts. We provide a <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/csnet\/CS_BasicExample.html\" target=\"_blank\" rel=\"noopener noreferrer\">.NET library<\/a> that generates all the HTML and JavaScript required to create charts. If you&#8217;re looking for a ASP.NET plugin that comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. Try the ASP.NET Plugin for FusionCharts and <a href=\"https:\/\/www.fusioncharts.com\/download?framework=csharp\">download it for free<\/a>!\r\n\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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/#Creating_a_JavaScript_chart_using_Data_URL_method\" title=\"Creating a JavaScript chart using Data URL method\">Creating a JavaScript chart 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-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#Understanding_the_RenderChart_method\" title=\"Understanding the RenderChart() method\">Understanding the RenderChart() 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-with-asp-net-c-using-fusioncharts-xt-part-1\/#Creating_a_JavaScript_chart_using_Data_String_method\" title=\"Creating a JavaScript chart using Data String method\">Creating a JavaScript chart 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-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#Providing_chart_data_in_JSON\" title=\"Providing chart data in JSON\">Providing chart data in JSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#Download_the_project_source\" title=\"Download the project source\">Download the project source<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#Next_article_in_this_series_Create_a_chart_using_data_from_SQL_Server\" title=\"Next article in this series: Create a chart using data from SQL Server\">Next article in this series: Create a chart using data from SQL Server<\/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\nThe chart below shows data of Top 5 Employees of a fictitious company.\r\n\r\n\r\n\r\nIn this tutorial, we will create the same chart using the .NET library.\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><a href=\"https:\/\/www.fusioncharts.com\/download\/\/\" target=\"_blank\" rel=\"noopener noreferrer\">The latest version of FusionCharts XT<\/a><\/li>\r\n \t<li>Sample chart data<\/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<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>Default.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>Default.aspx<\/code>:\r\n<pre class=\"lang:markup\">&lt;script src=\"Charts\/FusionCharts.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\r\n<\/li>\r\n \t<li>Copy the Sample Data folder and paste it in the Solution Explorer.<\/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>Default.aspx.cs<\/code>, include the namespace of this library by writing\r\n<pre class=\"lang:csharp decode:true\">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\nNext, there are 2 ways by which you can supply data to your charts &#8211; the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/how-fusioncharts-works\/DataURL.html\" target=\"_blank\" rel=\"noopener noreferrer\">Data URL method<\/a> and 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>. Let us try each one of them.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_JavaScript_chart_using_Data_URL_method\"><\/span>Creating a JavaScript chart using Data URL method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/how-fusioncharts-works\/DataURL.html\" target=\"_blank\" rel=\"noopener noreferrer\">Data URL method<\/a>, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., <code>\/path_to\/data_provider.aspx<\/code>, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to <code>text\/xml<\/code>. For this example, we will point FusionCharts XT to an XML file\u2019s URL.\r\n\r\nCreate a <code>Literal<\/code> tag in Default.aspx, and give it a unique ID.\r\n\r\nWe will write the code required to generate a chart to this literal. Then, <code>FusionCharts.js<\/code> would process this code and show a chart instead.\r\n\r\nIn <code>Default.aspx.cs<\/code>, within the <code>Page_Load<\/code> method, write the following code:\r\n<pre class=\"lang:csharp decode:true\">\/\/ Set the rendering mode to \"javascript\". (Default is \"flash\")\r\nFusionCharts.SetRenderer(\"javascript\");\r\n\r\nliteral_1.Text = FusionCharts.RenderChart(\"FusionChartsXT\/Column2D.swf\", \"Data\/Data.xml\", \"\", \"browser_share\", \"640\", \"340\", false, true);\r\n<\/pre>\r\nSave. Run the project (F5). This is the chart that you should see:\r\n\r\n\r\n\r\nYou were able to render a chart in your .NET app with just one single line!\r\n<h2><span class=\"ez-toc-section\" id=\"Understanding_the_RenderChart_method\"><\/span>Understanding the RenderChart() method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe RenderChart() method does all the heavy lifting of generating HTML and JavaScript required to render a chart in the browser. It takes parameters in the following order:\r\n<ul>\r\n \t<li><strong>Chart SWF name<\/strong>: The first parameter contains the Path and file name of the chart SWF file. We have to use the relative path to SWF file, which is recommended. When plotting charts in JavaScript, FusionCharts XT uses the SWF name to internally map to the chart\u2019s JavaScript alias.<\/li>\r\n \t<li><strong>URL to static XML file<\/strong>: If Data URL method is to be used. If you intend to use Data String method, leave this as blank.<\/li>\r\n \t<li><strong>Variable containing XML data string<\/strong>: If Data String method is to be used. If you have specified data as a URL, leave this parameter as blank.<\/li>\r\n \t<li><strong>ID of the chart<\/strong>: Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference to the chart for manipulation using advanced JavaScript.<\/li>\r\n \t<li><strong>Width and height in pixels<\/strong>: Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending px) or percentage. In this example, we have used pixels. You can also set it to percentage values. The FusionCharts JavaScript class will automatically convert the percentage dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.<\/li>\r\n \t<li><strong>Boolean for Debug Mode<\/strong>: If you\u2019re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to true. The debug mode gives you behind-the-scenes information on where data is loaded from, errors etc. In our example, we are rendering the chart in normal mode, by setting this parameter to false.<\/li>\r\n \t<li><strong>Boolean for Registering with JavaScript<\/strong>: In earlier versions of FusionCharts, the last parameter let you configure whether charts could be controlled using JavaScript. Now that FusionCharts is very tightly integrated with FusionCharts, this parameter is a mandatory true.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_JavaScript_chart_using_Data_String_method\"><\/span>Creating a JavaScript chart using Data String method<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn 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>, 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\nLet us create a chart using the Data String method below the first chart.\r\n\r\nCreate another <code>Literal<\/code> tag with ID as <code>literal_2<\/code>. In the code-behind, comment the line of the <code>RenderChart()<\/code> method, and write the following code after it:\r\n<pre class=\"lang:csharp decode:true\">\/\/ xmlStr contains the XML data required for the chart\r\nString xmlStr = \"\";\r\n\r\n\/\/ Set rendering mode to \"javascript\".        \r\nFusionCharts.SetRenderer(\"javascript\");\r\n       \r\nliteral_2.Text = FusionCharts.RenderChart(\"FusionChartsXT\/Column2D.swf\", \"\", xmlStr, \"browser_share_2\", \"640\", \"340\", false, true);\r\n\r\n\r\nSave. Run the project (F5). You should see the following chart:<\/pre>\r\n\/\/ &lt; ![CDATA[\r\n\/\/ &lt; ![CDATA[\r\n\/\/ &lt; ![CDATA[\r\n\/\/ &lt; ![CDATA[\r\nFusionCharts.setCurrentRenderer(&#039;javascript&#039;);\r\nvar myChartId = &#039;browser_share_3&#039;;\r\nvar myChartSWF = &#039;\/Assets\/fusioncharts\/Column2D.swf&#039;;\r\nvar myChartWidth = &#039;660&#039;;\r\nvar myChartHeight = &#039;400&#039;;\r\ndocument.write(&#039;<span id=\"' + myChartId + 'container\">&#8216;);\r\nvar chartObj = new FusionCharts( myChartSWF, myChartId, myChartWidth, myChartHeight);\r\nchartObj.setXMLData(&#8221;);\r\nchartObj.render(myChartId + &#8216;container&#8217;);\r\n\/\/ ]]&gt;<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Providing_chart_data_in_JSON\"><\/span>Providing chart data in JSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?DataFormats\/JSON\/Overview.html\" target=\"_blank\" rel=\"noopener noreferrer\">JSON<\/a> is another format that FusionCharts XT supports. If you want to provide data in JSON, simply write the following line before the <code>RenderChart()<\/code> method:\r\n<pre class=\"lang:csharp decode:true\">FusionCharts.SetDataFormat(\"json\");\r\n<\/pre>\r\nWe provide a tool to convert XML to JSON. You can find it in <code>FusionCharts XT Download Package &gt; Tools &gt; FCDataConverter<\/code>. The JSON data for the above chart is:\r\n<pre class=\"lang:js decode:true\">{\r\n  \"chart\": {\r\n    \"caption\": \"Top 5 Employees for 2011\",\r\n    \"palette\": \"3\",\r\n    \"showvalues\": \"0\",\r\n    \"numberprefix\": \"$\",\r\n    \"useroundedges\": \"1\"\r\n  },\r\n  \"data\": [\r\n    {\r\n      \"label\": \"Leverling\",\r\n      \"value\": \"100524\"\r\n    },\r\n    {\r\n      \"label\": \"Fuller\",\r\n      \"value\": \"87790\"\r\n    },\r\n    {\r\n      \"label\": \"Davolio\",\r\n      \"value\": \"81898\"\r\n    },\r\n    {\r\n      \"label\": \"Peacock\",\r\n      \"value\": \"76438\"\r\n    },\r\n    {\r\n      \"label\": \"Callahan\",\r\n      \"value\": \"55091\"\r\n    }\r\n  ]\r\n}\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Download_the_project_source\"><\/span>Download the project source<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/aspnet\/your-first-chart-using-aspnet\"><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Next_article_in_this_series_Create_a_chart_using_data_from_SQL_Server\"><\/span>Next article in this series: Create a chart using data from SQL Server<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn the next article, we will create a chart using data from a database. You can head over to our <a href=\"https:\/\/docs.fusioncharts.com\/charts\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a> and read on how to <a href=\"https:\/\/docs.fusioncharts.com\/charts\/contents\/?guide-for-web-developers\/csnet\/CS_DB.html\" target=\"_blank\" rel=\"noopener noreferrer\">use FusionCharts XT to create charts using data from SQL Server<\/a>. Stay tuned.","protected":false},"excerpt":{"rendered":"<p>FusionCharts XT with ASP.NET is a new series in which we walk you through the fundamentals of creating a Javascript Interactive Graph with your.NET skills. FusionCharts is the industry&#8217;s most popular enterprise-grade JavaScript charting solution. Our enterprise customers have endorsed our products and services, and we are constantly adding newer products and features to our [&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,211],"coauthors":[715],"class_list":["post-2654","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-asp-net","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 with ASP.NET (C#) Using FusionCharts XT: Part 1<\/title>\n<meta name=\"description\" content=\"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.\" \/>\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-with-asp-net-c-using-fusioncharts-xt-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1\" \/>\n<meta property=\"og:description\" content=\"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-29T13:55:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:10+00:00\" \/>\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=\"7 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-with-asp-net-c-using-fusioncharts-xt-part-1\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/\"\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 with ASP.NET (C#) Using FusionCharts XT: Part 1\",\n\t            \"datePublished\": \"2012-03-29T13:55:34+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-with-asp-net-c-using-fusioncharts-xt-part-1\/\"\n\t            },\n\t            \"wordCount\": 1251,\n\t            \"commentCount\": 7,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"asp.net\",\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-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/\",\n\t            \"name\": \"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"datePublished\": \"2012-03-29T13:55:34+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:10+00:00\",\n\t            \"description\": \"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#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-with-asp-net-c-using-fusioncharts-xt-part-1\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#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 with ASP.NET (C#) Using FusionCharts XT: Part 1\"\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 with ASP.NET (C#) Using FusionCharts XT: Part 1","description":"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.","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-with-asp-net-c-using-fusioncharts-xt-part-1\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1","og_description":"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2012-03-29T13:55:34+00:00","article_modified_time":"2026-01-20T09:11:10+00:00","author":"rishi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rishi","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/"},"author":{"name":"rishi","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/132d68250c34b957c87330353d8eaa5a"},"headline":"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1","datePublished":"2012-03-29T13:55:34+00:00","dateModified":"2026-01-20T09:11:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/"},"wordCount":1251,"commentCount":7,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"keywords":["asp.net","javascript"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/","url":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/","name":"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"datePublished":"2012-03-29T13:55:34+00:00","dateModified":"2026-01-20T09:11:10+00:00","description":"FusionCharts XT with ASP.NET: Part 1. Learn the fundamentals of creating 2026 JavaScript interactive graphs in .NET. Master server-side visualization today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/javascript-charts-with-asp-net-c-using-fusioncharts-xt-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Charts with ASP.NET (C#) Using FusionCharts XT: Part 1"}]},{"@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\/2654","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=2654"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/2654\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=2654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=2654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=2654"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}