Integrating FusionCharts with .NET Web Service(ASMX)

FusionCharts Suite XT comes with 90+ charts that can be used to visualize data for a number of business applications. Additionally, it also includes several basic and advanced features using which charts can be configured for improved visualization.

One such feature is the capability to implement the drill-down interactivity in charts. With the drill-down interactivity, data plots in a chart can be configured to act as hotspots; clicking a data plot redirects the user to an external link or another chart. Drill-down charts can be implemented using simple links (data plots will be linked to simple URLs that will open in the same page or in a different page or to JavaScript functions defined in the same page) and charts links (data plots will be linked to other charts that will render information at several levels of detail).

All charts (except for the zoom-line chart) in FusionCharts Suite XT can be configured to be rendered as drill-down charts.

Click here to know more about the drill-down charts supported by FusionCharts.

Another important feature is the capability to create charts by fetching data from a database.

This tutorial combines these features of FusionCharts with a .asmx based web-service to render a multi-series drill-down chart by fetching data from a database, using FusionCharts’ JSON structure, in a ASP.NET-based web application.

A web Service is a web-based functionality that can be accessed through web-based protocols and used by web applications.

Requirements

We need the following applications installed before rendering FusionCharts in VB.Net and Windows-based applications:

Implementing FusionCharts with the .NET Web Service(.asmx)

We would now describe step by step work through how FusionCharts supported drill-down functionality by which a Multi-series chart could be rendered in a ASP.NET based web application acquiring FusionCharts prescribed JSON structure through .asmx based web service which is fetching data from database.

The entire process is divided in three sub processes, as mentioned below.

  • Creating a database for storing the chart values series wise which could be fetched through web service and prepare the FusionCharts prescribed JSON structure for rendering the chart.
  • Creating the Web Service(.asmx) for fetching data from database and creating FusionCharts prescribed JSON structure.
  • Creating a ASP.NET web page for consuming the created Web Service and rendering FusionCharts.

I. Creating a database for storing series wise values for chart

Creating a New Project

The step by step process for creating a new project is given below.

Step 1

Open Visual Studio and click File → New → Project, as shown in the image below.

The New Project dialog box opens.

Step 2

In the New Project dialog box, select Installed Templates → Visual C# → Web → ASP.Net Web Application (.NET Framework), as shown in the image below.

Step 3

In the Name field (in the New Project dialog box), type Demo FusionCharts Web Service to name the project as shown below.

A project structure, as shown in the image below, is created.

Creating a Database and Including it in the App_Data ASP.NET Folder

Step 1

Create a database, Product and create two tables named quarterwiseProductData and Series_wise_Product. Use the table structure shown in the image below.

Step 2

Add the App_Data ASP.NET folder within the Demo FusionCharts Web Service project as shown in the image below.

Step 3

Save the Product database within the App_Data folder.

II. Creating the Web Service(.asmx)

A .asmx file is used with ASP.NET to move data and perform other actions behind the scenes. .asmx file is also used as a service which does not have a GUI (graphical user interface).

The steps below outline the process for creating a .asmx file based on the Product database created above.

Step 1

Right click -> [Project Name] -> Add -> New Item as shown below.

Step 2

Click Add → New Item.
The Add New Item dialog box opens. Choose Web Service (ASMX) among the options as shown below.

Step 3

Give a name to the project, (GenerateData in our case) inside the Name text box.

Step 4

Add the code given below to the GenerateData.asmx.cs file.

The GenerateData Web Service will fetch chart data mentioned above. The data will be formatted according to the prescribed JSON structure of FusionCharts.

Step 5

Open Web.config file and add the code given below.

The structure of the above code should be:

Step 6

Right click -> Select GenarateData.asmx.
A page will be displayed in the browser.

Click Invoke to execute getData web method which would return the following output.

It returns the FusionCharts prescribed JSON data source for the chart as string.

Step 7

In this step we’ll Add Service Reference.
Right Click on References and select Add Service Reference options as shown below.

An Add Service Reference dialog box will open.
Click Discover

Mention GenerateData in the Namespace.

Step 8

Click Advanced… for adding Web References (Refer to the previous image).
It opens the Service Reference Settings dialog box as shown below.

Click Add Web Reference… to add Web Reference instead of Service Reference.

An Add Web Reference dialog box will be displayed as shown below.

Next, select the Web Services in this solution link.
It opens the following dialog box.

Click Add Reference to add the reference.
The above step will add the web reference to the solution hierarchy as shown below.

III. Creating a ASP.NET web page for consuming the created Web Service

The last step for completing the entire process is to create the client web page (.aspx) for consuming the created Web Service.

Step 1

Right click -> Project -> Add New Item as shown below.

Step 2

Add New Item dialog box opens as shown below.
Select Web Form from the template and name it as Index.aspx.

Step 3

Add the following code to the Index.aspx file.

Step 4

Right Click -> References ->Add References.
It adds reference to FusionCharts.dll

Add References dialog box opens as shown below.

Browse and select FusionCharts.dll.
Click Ok

Step 5

Add the code to Index.aspx.cs file. This file is present in the Page_Load event handler.

Add the following NameSpace reference as well.

Step 6

Right click -> Index.aspx-> Select Set As Start Page as shown below.

So, we are done with all the steps to integrate FusionCharts with net web service.

Step 7

Press Ctrl + F5 to execute index.aspx.
Your output should look similar to the image shown below.

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Leave a Comment