Creating FusionCharts Drill-down Charts from Database Using Entity Framework and LINQ in Visual Studio

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

Drill-down charts can be implemented using several features, for example, the data plots can be linked to other charts, to simple URLs that will be open in the same page or in a different page, or to JavaScript functions defined in the same page. Click here to know more about the drill-down charts supported by FusionCharts.

FusionCharts also lets you create charts by fetching data from the database.

This tutorial tells you about how you can create the FusionCharts drill-down charts by fetching data from a database using Entity Framework and LINQ in Visual Studio. For this tutorial, the drill-down charts will be implemented as linked charts.

Entity Framework(EF), the open source Object Relational Mapping (ORM) for ADO.NET, virtually eliminates the necessity to write data access codes by including support for LINQ for issuing queries.

LINQ (Language Integrated Query) offers native data querying capabilities in the .NET Framework based languages.


For rendering charts in VB.NET, we need to make sure that we have the following components downloaded on our local machine:

Creating the FusionCharts Drill-down Charts from a Database Using Entity Framework and LINQ

We will now see how you can create drill-down charts by sourcing data from a database using Entity Framework and LINQ. This process is bifurcated into three tasks:

  1. Creating a new project
  2. Creating a database and including it in the App_Data ASP.NET folder
  3. Creating the .edmx file using the Entity Data Model

Creating a New Project

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

Step 1
Open Visual Studio and click FileNewProject, as shown in the image below.

The New Project dialog box opens.

Step 2
In the New Project dialog box, select Installed TemplatesVisual C#WebASP.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 Drilldown using EF and LINQ as the project name.
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, with the quarterwiseProductData and Series_wise_Product tables. Use the table structure shown in the image below.

Step 2
Add the App_Data ASP.NET folder within the Demo Drilldown using EF and LINQ project as shown in the image below.

Step 3
Save the Product database within the App_Data folder.

Creating the .edmx File Using the Entity Data Model

A .edmx file is an XML file defining a storage model, a conceptual model, and the mapping between the two models. It also contains the information needed by the ADO.NET Entity Data Model Designer (Entity Designer) for rendering a model graphically.

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

Step 1
Right click the project name, Demo Drilldown using EF and LINQ.

Step 2
Click AddNew Item.
The Add New Item dialog box opens.

Step 3
In the Add New Item dialog box, click InstalledVisual C#DataADO.NET Entity Data Model, as shown in the image below.

The Entity Data Model Wizard dialog box opens.

Step 4
In the Entity Data Model Wizard, from the What should the model contain box, select EF Designer From Database and click Next.

Step 5
From the Which data connection should your application use to connect to the database drop-down, select Product.mdf and click Next.

Step 6
From the Which Version of Entity Framework do you want to use radio buttons, select Entity Framework 6.X and click Next.

Step 7
From the Which database objects do you want to include in your model checkbox, select both the tables and click Finish.

A visualization of the Entity class thus created is shown below.

Step 8
Add two C# code files within the project. Name them ProductController.cs and SeriesLinkController.cs.

Step 9
Add the code given below to the ProductController.cs file.

Step 10
Add the code given below to the SeriesLinkController.cs file. Along with the code added in the ProductController.cs file, this code will add custom controllers where LINQ has been implemented for querying the data fetched from the database using Entity Framework.

Step 11
Create a new folder within the project hierarchy and name it scripts. Paste all FusionCharts JavaScript files in the scripts folder.

Step 12
Create a new web form and name it Default.aspx. In the Default.aspx file, paste the code given below.

Step 13
Press Ctrl + F5 to execute Default.aspx.
Your output should look as seen in the image below.

In your live chart, click the data plot for a quarter to drill-down to see the monthly revenue for that quarter.

Was There a Problem Rendering the Chart?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and FusionCharts wrapper was loaded. Also, check if the path to the fusioncharts.js and the files is correct, and whether the files exist in that location.

Leave a Comment