Rendering FusionCharts in VB.NET using Database

Visual Basic .Net is one of the widely used object-oriented programming language, implemented on the .NET framework. We’ve already got detailed documentation on how to create charts in VB.NET using the FusionCharts VB.NET wrapper.

This tutorial showcases how you can render FusionCharts in Visual Basic .NET using database.

Let’s get started with the requirements and the steps for rendering FusionCharts in VB.NET using database.

System Requirements

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

Creating ASP.NET application in Visual Basic

Follow the steps given below to create ASP.NET application using VB:

Step 1: Open Visual Studio. Click File->New. The File menu appears. In the menu Select Project. Refer to the image below:

Create new project_620

Creating new Project

Step 2: Select Visual Basic from the installed templates. Select ASP.NET application as shown in the image below:

Selecting template_620

Select ASP.NET Web Application as project type

Step 3: Create a project hierarchy named MultiSeriesChartFromDatabaseFromVB. Refer to the image below:

Project-hierarchy_320

Project hierarchy

Creating a Database

Here we’ll create a multi-series column chart using data from database. The chart will showcase comparison between the factories’ output w.r.t quality. Following are the steps to create a multi-series column chart in VB.NET.

Step 1: Create a database (name of the database is FactoryDb in our case) with two tables which showcases date wise production output of 3 different factories. The image below shows the schema diagram for the table:

Database structure_620

Schema Diagram for the Database

Step 2: Add the App_Data ASP.NET folder into the created project.
Click (right click) Project_Name -> Select Add
Click Add ASP.NET Folder option -> Select App_Data
Refer to the image below:

Adding-App_Data-folder_620

Adding App_Data ASP.NET folder

Step 3: Finally, insert FactoryDb in App_Data folder.

The database is created and is ready to connect. Next, we will see how to connect with the database.

Establish Database Connection

To hold the connection property in a centralized location, the connection properties should be defined using <connectionStrings> tag in web.config file. Web.config file is by default created within the project for holding the configurations of web application. Follow the steps below to define the connection property in web.config file:

  • Open Web.config file and locate <configuration> tag
  • Add <connectionStrings> tag after <configuration> tag
  • Define <connectionStrings> as shown below:
  • Save the Web.config file

Add .aspx File for Creating Charts

Step 1: Add a folder named scripts inside the project and include all the FusionCharts js files into the scripts folder. The folder structure of the project is shown in image below:

Adding--Scripts-folder_320

Add scripts folder

Step 2: Add FusionCharts.dll (as a reference) into the project to use FusionCharts VB.NET wrapper. To add FusionCharts.dll as a reference:

  • Right click on References->Select Add References. Refer to the image below:

adding-reference_320

Add Reference to the project

  • Selecting Add Reference in above step will open a Reference Manager dialogue box. Search for FusionCharts.dll in your local machine and add it into this box. Refer to the image below:

Adding fusioncharts dll_620

Add FusionCharts reference within the Project

Step 3: Add a new file (.aspx) named “Multiseriesdemo” within the project hierarchy.

Step 4: Include the fusioncharts.js and fusioncharts.charts.js libraries within <head> tag of Multiseriesdemo.aspx file as shown below:

Step 5: Include the literal control within the newly created aspx page as shown below:

Step 6: In Multiseriesdemo.aspx.vb, add the following namespaces with the existing ones:

  • Imports System.Data.Odbc
  • Imports FusionCharts.Charts
  • Imports System.Data.OleDb
  • Imports System.Configuration

Step 7: Within Multiseriesdemo.aspx.vb, define a class DbConn and include the code given below:

Step 8: In the Page_Load event handler write the following code to recreate the JSON structure with the values fetched from database. Pass the JSON string to chart constructor and call the Render() method.

Step 9: Right click on Multiseriesdemo.aspx file and select Set As Start Page from the options listed.

set-as-start_500

Start Page option

Step 10: Now, you are ready to render FusionCharts in your visual basic. Press ctrl + f5 to run and check the output of the chart as shown in image below:

final output_620

Multi-Series Column 2D Chart

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