{"id":16279,"date":"2017-09-18T19:52:45","date_gmt":"2017-09-18T14:22:45","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16279"},"modified":"2026-01-20T14:41:07","modified_gmt":"2026-01-20T09:11:07","slug":"charting-in-asp-net","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/","title":{"rendered":"How to Create Charts for Your Web Apps Using ASP.NET 2026"},"content":{"rendered":"Despite the growing number of technologies, Microsoft&#8217;s ASP.NET remains one of the most popular server-side web application frameworks. Because ASP.NET is a closed-source and reliable platform, it has a high adoption rate among small businesses and enterprises. Because companies are generally unsatisfied with switching platforms on a regular basis, ASP.NET remains the most widely used framework. To attract more developers, Microsoft decided to open-source the entire platform in response to the growth of startups.\r\n\r\nIn this post, we&#8217;ll walk you through a step-by-step procedure for using the ASP.NET plugin for FusionCharts to create <a href=\"https:\/\/www.fusioncharts.com\/asp-net-charts?framework=csharp\">Live Charts<\/a> for your web applications.\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 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#Dynamic_Pages_in_ASPNET\" title=\"Dynamic Pages in ASP.NET\">Dynamic Pages in ASP.NET<\/a><\/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\/charting-in-asp-net\/#Requirements\" title=\"Requirements\">Requirements<\/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\/charting-in-asp-net\/#Creating_the_Chart_Element_in_ASPNET\" title=\"Creating the Chart Element in ASP.NET\">Creating the Chart Element in ASP.NET<\/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\/charting-in-asp-net\/#Step_1\" title=\"Step 1\">Step 1<\/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\/charting-in-asp-net\/#Step_2\" title=\"Step 2\">Step 2<\/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\/charting-in-asp-net\/#Step_3\" title=\"Step 3\">Step 3<\/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\/charting-in-asp-net\/#Step_4\" title=\"Step 4\">Step 4<\/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\/charting-in-asp-net\/#Step_5\" title=\"Step 5\">Step 5<\/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\/charting-in-asp-net\/#Step_6\" title=\"Step 6\">Step 6<\/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\/charting-in-asp-net\/#Step_7\" title=\"Step 7\">Step 7<\/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\/charting-in-asp-net\/#Step_8\" title=\"Step 8\">Step 8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#Step_9\" title=\"Step 9\">Step 9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#Step_10\" title=\"Step 10\">Step 10<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#Step_11\" title=\"Step 11\">Step 11<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#Step_12\" title=\"Step 12\">Step 12<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Dynamic_Pages_in_ASPNET\"><\/span>Dynamic Pages in ASP.NET<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWith this model, <a href=\"https:\/\/www.keenesystems.com\/expertise\/asp-net-core-developer\" target=\"_blank\" rel=\"noopener\">ASP.NET developer<\/a> has to write code to respond to different events, such as page load events or clicks.\r\n\r\nTo increase the efficiency and performance of the web applications built using ASP.NET, Microsoft introduced the code-behind model that keeps the static text on the main .aspx page. At the same time, the dynamic code is rendered from a separate file. The new model is highly recommended for building dynamic pages. This process is the default standard for the Visual Studio and many other new IDEs, where a .aspx.vb or .aspx.cs or .aspx.fs file is automatically generated with the same file name.\r\n\r\nIn situations with the MVC Using Entity Framework Database First Approach, you can instantly generate HTML for Dynamic Page. Additionally, you need to create Views For Each Controller to display dynamic or static data. You can Fetch Data From Database, fill it in Viewbag, Model, or ViewModel, then use that Viewbag, Model, ViewModel, etc., to send data from the controller to view to display dynamic data.\r\n\r\nIn this tutorial, we will see how we can simplify creating charts in web applications by integrating the FusionCharts library with ASP.NET. For doing this, we will use the ASP.NET wrapper provided by FusionCharts for charting in ASP.NET.\r\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore we start, we have to check for the following requirements to proceed:\r\n<ul>\r\n \t<li>Visual Studio IDE and .NET Framework &#8211; <em>Can be downloaded from <a href=\"https:\/\/www.visualstudio.com\/downloads\/\">here.<\/a> <\/em><\/li>\r\n \t<li>FusionCharts ASP.NET Wrapper &#8211; <em>Is available for download in <a href=\"https:\/\/www.fusioncharts.com\/asp-net-charts\/\">FusionCharts Extensions.<\/a><\/em><\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Chart_Element_in_ASPNET\"><\/span>Creating the Chart Element in ASP.NET<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe will now take you through the steps integrating the FusionCharts library with ASP.NET to create charts:\r\n<h2><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFirst, we create an empty app &#8211; to do this, open Visual Studio. To create a new web application, click <code>File<\/code> &gt; <code>New<\/code> &gt; <code>Web Site<\/code>.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16281\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-1.png\" alt=\"\" width=\"1366\" height=\"728\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-1.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-1-150x80.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\n\r\nThe <code>New Web Site<\/code> dialog box opens.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFrom the New Web Site dialog box, select <code>ASP.NET Empty Web Site<\/code>. Enter the website name and click <code>OK<\/code>.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16282\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-2.png\" alt=\"\" width=\"951\" height=\"581\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-2.png 951w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-2-150x92.png 150w\" sizes=\"auto, (max-width: 951px) 100vw, 951px\" \/><\/a>\r\n\r\nAs shown in the image below, the Solution Explorer with an empty web application and web hierarchy renders at the right of the <code>New Web site<\/code> window.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16283\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-3.png\" alt=\"\" width=\"354\" height=\"364\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-3.png 354w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-3-146x150.png 146w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo configure your web app, right-click over the website name and select <code>Add<\/code>. Click the <code>Add New Item<\/code> option.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16284\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-4.png\" alt=\"\" width=\"1366\" height=\"730\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-4.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-4-150x80.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\nThe <code>Add New Item<\/code> a dialog box opens.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFrom the <code>Add New Item<\/code> dialog box, in the list of available templates, select <code>Web Form<\/code>. Click <code>Add<\/code> to connect the template to your app.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-Step-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16285\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-Step-5.png\" alt=\"\" width=\"953\" height=\"582\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-Step-5.png 953w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-Step-5-150x92.png 150w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNext, we need to integrate the FusionCharts library with ASP.NET. In the Solution Explorer, right-click over the website name and select <code>Add<\/code> and\u00a0click <code>Reference<\/code>.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16286\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-6.png\" alt=\"\" width=\"1366\" height=\"726\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-6.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-6-150x80.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\n\r\nThe <code>Reference Manager<\/code> dialog box opens.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFrom the <code>Reference Manager<\/code> dialog box, select <code>Browse<\/code>. From the list of packages available, select <code>FusionCharts.dll<\/code>. Click <code>OK<\/code>.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16287\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-7.png\" alt=\"\" width=\"793\" height=\"542\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-7.png 793w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-7-150x103.png 150w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_7\"><\/span>Step 7<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFrom the <code>Solution Explorer<\/code>, right-click on the website name and select <code>Add<\/code>. Click <code>New Folder<\/code> to create a new folder. Rename this folder to <code>Scripts<\/code>.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16288\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-8.png\" alt=\"\" width=\"1366\" height=\"728\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-8.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-8-150x80.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_8\"><\/span>Step 8<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nCopy all the JavaScript files present in the <code>JS<\/code> folder of the FusionCharts package and paste them into the <code>Scripts<\/code> folder.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16289\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-9.png\" alt=\"\" width=\"308\" height=\"183\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-9.png 308w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-step-9-150x89.png 150w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/a>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_9\"><\/span>Step 9<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow we need to create a chart instance in the web app. To do this, add the following code in the <code>Default.aspx<\/code> file. This code will produce the interface for the app.\r\n<pre class=\"lang:csharp decode:true\">&lt;%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeFile=\"Default.aspx.cs\" Inherits=\"_Default\" %&gt;\r\n\r\n&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"&gt;\r\n&lt;head runat=\"server\"&gt;\r\n    &lt;title&gt;FusionCharts Integration in a Simple ASP.NET Web Aplication&lt;\/title&gt;\r\n    &lt;script src=\"Scripts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"Scripts\/fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;form id=\"form1\" runat=\"server\"&gt;\r\n   &lt;asp:Literal ID=\"chart\" runat=\"server\"&gt;&lt;\/asp:Literal&gt;\r\n    &lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_10\"><\/span>Step 10<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow we need to provide data for the chart to render. To do this, create the <code>data.json<\/code>\u00a0file within the website hierarchy and add the following chart data source code in the file.\r\n<pre class=\"lang:js decode:true \">{\r\n  \"chart\": {\r\n    \"caption\": \"Monthly revenue for last year\",\r\n    \"subCaption\": \"Harry's SuperMart\",\r\n    \"xAxisName\": \"Month\",\r\n    \"yAxisName\": \"Revenues (In USD)\",\r\n    \"numberPrefix\": \"$\",\r\n    \"paletteColors\": \"#0075c2\",\r\n    \"bgColor\": \"#ffffff\",\r\n    \"borderAlpha\": \"20\",\r\n    \"canvasBorderAlpha\": \"0\",\r\n    \"usePlotGradientColor\": \"0\",\r\n    \"plotBorderAlpha\": \"10\",\r\n    \"placevaluesInside\": \"1\",\r\n    \"rotatevalues\": \"1\",\r\n    \"valueFontColor\": \"#ffffff\",\r\n    \"showXAxisLine\": \"1\",\r\n    \"xAxisLineColor\": \"#999999\",\r\n    \"divlineColor\": \"#999999\",\r\n    \"divLineIsDashed\": \"1\",\r\n    \"showAlternateHGridColor\": \"0\",\r\n    \"subcaptionFontBold\": \"0\",\r\n    \"subcaptionFontSize\": \"14\"\r\n  },\r\n  \"data\": [\r\n    {\r\n      \"label\": \"Jan\",\r\n      \"value\": \"420000\"\r\n    },\r\n    {\r\n      \"label\": \"Feb\",\r\n      \"value\": \"810000\"\r\n    },\r\n    {\r\n      \"label\": \"Mar\",\r\n      \"value\": \"720000\"\r\n    },\r\n    {\r\n      \"label\": \"Apr\",\r\n      \"value\": \"550000\"\r\n    },\r\n    {\r\n      \"label\": \"May\",\r\n      \"value\": \"910000\"\r\n    },\r\n    {\r\n      \"label\": \"Jun\",\r\n      \"value\": \"510000\"\r\n    },\r\n    {\r\n      \"label\": \"Jul\",\r\n      \"value\": \"680000\"\r\n    },\r\n    {\r\n      \"label\": \"Aug\",\r\n      \"value\": \"620000\"\r\n    },\r\n    {\r\n      \"label\": \"Sep\",\r\n      \"value\": \"610000\"\r\n    },\r\n    {\r\n      \"label\": \"Oct\",\r\n      \"value\": \"490000\"\r\n    },\r\n    {\r\n      \"label\": \"Nov\",\r\n      \"value\": \"900000\"\r\n    },\r\n    {\r\n      \"label\": \"Dec\",\r\n      \"value\": \"730000\"\r\n    }\r\n  ],\r\n  \"trendlines\": [\r\n    {\r\n      \"line\": [\r\n        {\r\n          \"startvalue\": \"700000\",\r\n          \"color\": \"#1aaf5d\",\r\n          \"valueOnRight\": \"1\",\r\n          \"displayvalue\": \"Monthly Target\"\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n<\/pre>\r\n&nbsp;\r\n<h2><span class=\"ez-toc-section\" id=\"Step_11\"><\/span>Step 11<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFinally, we need to render the chart element. To do this, add the following code in the <code>Default.aspx.cs<\/code> file.\r\n<pre class=\"lang:csharp decode:true \">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 FusionCharts.Charts;\r\n\r\npublic partial class _Default : System.Web.UI.Page\r\n{\r\n    protected void Page_Load(object sender, EventArgs e)\r\n    {\r\n        Chart newChart = new Chart(\"column2d\", \"simplechart\", \"600\", \"400\", \"jsonurl\", \"data.json\");\r\n        chart.Text = newChart.Render();\r\n    }\r\n}\r\n<\/pre>\r\n&nbsp;\r\n<h2><span class=\"ez-toc-section\" id=\"Step_12\"><\/span>Step 12<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow that all our code is in place, it is time to run the application. Press <code>Ctrl + F5<\/code> to render the chart in the browser.\r\n\r\nIf you follow all steps correctly, your chart should display in your web app, similar to the image below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16280\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-output.png\" alt=\"\" width=\"1272\" height=\"677\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-output.png 1272w, \/blog\/wp-content\/uploads\/2017\/09\/fusioncharts-aspnet-output-150x80.png 150w\" sizes=\"auto, (max-width: 1272px) 100vw, 1272px\" \/><\/a>\r\n\r\nIf you are facing issues in rendering the chart or seeing any error in your code, you can download the <a href=\"https:\/\/www.dropbox.com\/s\/wykyuxt5bubrvt9\/Simple%20FusionCharts%20Demo.zip?dl=0\">complete source code<\/a> of the project.\r\n\r\nMoreover, you can also <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/aspnet\/create-charts-in-aspnet-using-database\">create charts in ASP.NET using the data stored in a database<\/a>. We would love to know your thoughts on this; feel free to comment in the space below.","protected":false},"excerpt":{"rendered":"<p>Despite the growing number of technologies, Microsoft&#8217;s ASP.NET remains one of the most popular server-side web application frameworks. Because ASP.NET is a closed-source and reliable platform, it has a high adoption rate among small businesses and enterprises. Because companies are generally unsatisfied with switching platforms on a regular basis, ASP.NET remains the most widely used [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16295,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,650],"class_list":["post-16279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Charts for Your Web Apps Using ASP.NET<\/title>\n<meta name=\"description\" content=\"Master charting in ASP.NET with our 2026 tutorial. We cover the entire process of creating professional charts for your web applications. Learn it 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\/charting-in-asp-net\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Charts for Your Web Apps Using ASP.NET\" \/>\n<meta property=\"og:description\" content=\"Tutorial covering all the steps to create charts for your web applications using asp.net. Covering the entire process of charting in asp.net.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-18T14:22:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan, Soumya Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Soumya Dutta\" \/>\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\/charting-in-asp-net\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"How to Create Charts for Your Web Apps Using ASP.NET 2026\",\n\t            \"datePublished\": \"2017-09-18T14:22:45+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:07+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/\"\n\t            },\n\t            \"wordCount\": 777,\n\t            \"commentCount\": 4,\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\/charting-in-asp-net\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\",\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\/charting-in-asp-net\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/\",\n\t            \"name\": \"How to Create Charts for Your Web Apps Using ASP.NET\",\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\/charting-in-asp-net\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\",\n\t            \"datePublished\": \"2017-09-18T14:22:45+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:07+00:00\",\n\t            \"description\": \"Master charting in ASP.NET with our 2026 tutorial. We cover the entire process of creating professional charts for your web applications. Learn it today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#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\/charting-in-asp-net\/\"\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\/charting-in-asp-net\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"create charts in asp.net\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#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\": \"How to Create Charts for Your Web Apps Using ASP.NET 2026\"\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\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Charts for Your Web Apps Using ASP.NET","description":"Master charting in ASP.NET with our 2026 tutorial. We cover the entire process of creating professional charts for your web applications. Learn it 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\/charting-in-asp-net\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Charts for Your Web Apps Using ASP.NET","og_description":"Tutorial covering all the steps to create charts for your web applications using asp.net. Covering the entire process of charting in asp.net.","og_url":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-09-18T14:22:45+00:00","article_modified_time":"2026-01-20T09:11:07+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","type":"image\/jpeg"}],"author":"Jonathan, Soumya Dutta","twitter_card":"summary_large_image","twitter_image":"http:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","twitter_misc":{"Written by":"Jonathan, Soumya Dutta","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Charts for Your Web Apps Using ASP.NET 2026","datePublished":"2017-09-18T14:22:45+00:00","dateModified":"2026-01-20T09:11:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/"},"wordCount":777,"commentCount":4,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/","url":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/","name":"How to Create Charts for Your Web Apps Using ASP.NET","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","datePublished":"2017-09-18T14:22:45+00:00","dateModified":"2026-01-20T09:11:07+00:00","description":"Master charting in ASP.NET with our 2026 tutorial. We cover the entire process of creating professional charts for your web applications. Learn it today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Integrating-FusionCharts-in-ASPNET-Web-Applications.jpg","width":2016,"height":750,"caption":"create charts in asp.net"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/charting-in-asp-net\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Charts for Your Web Apps Using ASP.NET 2026"}]},{"@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\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16279","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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16279"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16279\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16295"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16279"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}