How to Create Charts for Your Web Apps Using ASP.NET

create charts in asp.net

Despite the growing number of technologies, Microsoft’s ASP.NET is surprisingly one of the most commonly used server-side web application frameworks. ASP.NET is a closed-source and reliable platform, which is why its adoption rate was very high for small businesses and enterprises. Given that companies are generally not very happy about shifting platforms frequently, ASP.NET continued to remain as the most widely used framework. Responding to the growth of startups, Microsoft decided to open-source the entire platform to attract more developers.

Dynamic Pages in ASP.NET

With this model, developers have to write code to respond to different events, such as the page load event, or a click.

To 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, while 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.

In situations where MVC Using Entity Framework Database First Approach you can Generate HTML for Dynamic Page instantly. Additionally, you need to create Views For Each Controller that you can use for displaying dynamic/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.

In this tutorial, we will see how we can simplify the process of 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.

Requirements:

Before we start, we have to check for the following requirements to proceed:

  • Visual Studio IDE and .NET Framework – Can be downloaded from here.
  • FusionCharts ASP.NET Wrapper – Is available for download in FusionCharts Extensions

Creating the chart element in ASP.NET:

We will now take you through the steps integrating the FusionCharts library with ASP.NET to create charts:

Step 1:

First, we create an empty app. To do this, open Visual Studio. To create a new web application, click File > New > Web Site.

The New Web Site dialog box opens.

Step 2:

From the New Web Site dialog box, select ASP.NET Empty Web Site. Enter the web site name and click OK.

The Solution Explorer with an empty web application and web hierarchy, as shown in the image below, renders at the right of the New Web site window.

Step 3:

To configure your web app, right click over the web site name and select Add. Click the Add New Item option.


The Add New Item dialog box opens.

Step 4:

From the Add New Item dialog box, in the list of available templates, select Web Form. Click Add to connect the template to your app.

Step 5:

Next, we need to integrate the FusionCharts library with ASP.NET. For this, in the Solution Explorer, right click over the web site name and select Add and click Reference.

The Reference Manager dialog box opens.

Step 6:

From the Reference Manager dialog box, select Browse. From the list of packages available, select FusionCharts.dll. Click OK.

Step 7:

From the Solution Explorer, right click on the web site name and select Add. Click New Folder to create a new folder. Rename this folder to Scripts.

Step 8:

Copy all the JavaScript files present in the JS folder of the FusionCharts package and paste them in the Scripts folder.

Step 9:

Now we need to create a chart instance in the web app. To do this, add the following code in the Default.aspx file. This code will create the interface for the app.

Step 10:

Now we need to provide data for the chart to render. To do this, create the data.json file within the website hierarchy and add the following chart data source code in the file.

 

Step 11:

Finally, we need to render the chart element. To do this, add the following code in the Default.aspx.cs file.

 

Step 12:

Now that all our code is in place, it is time to run the application. Press Ctrl + F5 to render the chart in the browser.

If all steps have been followed correctly, your chart should be displayed in your web app, similar to the image shown below.

If you are facing issues in rendering the chart or you see any error in your code, you can download the complete source code of the project.

Moreover, you can also create charts in ASP.NET using the data stored in a database. We would love to know your thoughts on this; feel free to comment in the space below.

Leave a Comment