How To Increase Performance Of Vb Net Data Rendering

Visual Basic.Cyberspace is a pop object-oriented programming language that is built on the.NET framework. We already have detailed documentation on how to use the FusionCharts VB.Cyberspace wrapper to create Information Charts in VB.NET.

In this mail, we'll cover a tutorial that shows how to use the database to render FusionCharts in Visual Basic.Internet. Let'south brainstorm with the prerequisites and steps for rendering FusionCharts in VB.NET using a database.

System Requirements

To start rendering charts in VB.NET, we need to brand certain that we accept the post-obit components downloaded on our local machine:

Visual Studio IDE and .Net Framework [Download Link]
FusionCharts VB.NET Wrapper [Download Link]

Creating an ASP.Internet Application in Visual Bones

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

Pace one: Open up Visual Studio. Click File->New. The File menu appears. In the bill of fare Select Projection. Refer to the paradigm 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 Awarding as Projection Type

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

Project-hierarchy_320

Project Hierarchy

Creating a Database

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

Footstep 1: Create a database (the name of the database is FactoryDb in our case) with two tables that showcase the date-wise production output of iii different factories. The image beneath shows the schema diagram for the table:

Database structure_620

Schema Diagram for the Database

Stride 2: Add the App_Data ASP.NET folder into the created project.
Click (right-click) Project_Name -> Select Add
Click Add ASP.NET Binder pick -> Select App_Data
Refer to the prototype beneath:

Adding-App_Data-folder_620

Adding the App_Data ASP.Cyberspace Folder

Step 3: Finally, insert FactoryDb in the App_Data folder.

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

Constitute Database Connection

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

Open up Spider web.config file and locate <configuration> tag
Add <connectionStrings> tag subsequently <configuration> tag

Define <connectionStrings> as shown below:

              <add name="MSAccessConnection" connectionString="Provider=Microsoft.Jet.OLEDB.4.0;  Data Source=|DataDirectory|FactoryDB.mdb" providerName="System.Information.OleDb"></add>

Save the Web.config file

Add together an .aspx File for Creating Charts

Step one: Add together a folder named scripts within the project and include all the FusionCharts js files into the scripts folder. The folder structure of the project is shown in the epitome below:

Adding--Scripts-folder_320

Add scripts binder

Footstep ii: 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 beneath:

adding-reference_320

Add Reference to the project

Selecting Add Reference in the in a higher place pace will open a Reference Manager dialogue box. Search for FusionCharts.dll in your local machine and add together it to this box. Refer to the image beneath:

Adding fusioncharts dll_620

Add FusionCharts reference within the Projection

Footstep 3: Add a new file (.aspx) named "Multiseriesdemo" within the projection hierarchy.

Stride four: Include the fusioncharts.js and fusioncharts.charts.js libraries within <head> tag of Multiseriesdemo.aspx file as shown beneath:

          <script type="text/javascript" src="scripts/fusioncharts.js"></script>

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

          <asp:literal ID="Literal1" runat="server"></asp:literal>

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 Organization.Configuration

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

          Public Class DbConn      '  Create a database Connection. using hither Admission Database     '  Return blazon object of OdbcConnection      Public connexion Equally OleDbConnection     Public ReadData Equally OleDbDataReader     Public aCommand Every bit OleDbCommand       Public Sub New(strQuery As String)         ' MS Access DataBase Connexion - Divers in Web.Config         Dim connectionName Equally String = "MSAccessConnection"          ' SQL Server DataBase Connexion - Defined in Web.Config         'string connectionName = "SQLServerConnection";          ' Creating Connectedness string using spider web.config connexion string         Dim ConnectionString As Cord = ConfigurationManager.ConnectionStrings(connectionName).ConnectionString         Try             ' create connection object             connectedness = New OleDbConnection()             ' set connection string             connection.ConnectionString = ConnectionString             ' open up connection             connection.Open()             ' get reader             GetReader(strQuery)         Catch e As Exception             HttpContext.Current.Response.Write(eastward.Message.ToString())          End Endeavor     End Sub      ' Create an instance dataReader     ' Return type object of OdbcDataReader     '''     ''' Get Information Reader     '''

Public Sub GetReader(strQuery As String) ' Create a Command object aCommand = New OleDbCommand(strQuery, connexion) ' Create data reader object using strQuery string ' Motorcar close connection ReadData = aCommand.ExecuteReader(CommandBehavior.CloseConnection) End Sub End Course

Stride eight: In the Page_Load event handler write the post-obit code to recreate the JSON structure with the values fetched from the database. Laissez passer the JSON string to the chart constructor and phone call the Render() method.

          ' Create the `jsonData` StringBuilder object to store the data fetched          'from the database equally a string.         Dim jsonData As New StringBuilder()          Dim ReqDatasetComma Every bit Boolean = False, ReqComma As Boolean = Faux          ' Initialize the chart-level attributes and append them to the          '`jsonData` StringBuilder object.         ' add chart level attrubutes         jsonData.Append("{" + "'chart': {" + "'caption': 'Mill Output report'," + "'subCaption': 'By Quantity'," + "'formatNumberScale': '0'," + "'rotatelabels': '1'," + "'showvalues': '0'," + "'showBorder': 'one'" + "},")          ' Initialize the Categories object.         jsonData.Suspend("'categories': [" + "{" + "'category': [")          ' Every date between January 01, 2003 and January 20, 2003 is entered thrice          ' in the datepro field in the FactoryDB database.          ' The dates will be shown as category labels on the x-axis of the nautical chart.          ' Because we demand to show each appointment simply once, utilise the `select` query          ' with the `singled-out` keyword to fetch only 1 case of each engagement from the database.          ' Store the output of the `select` query in the `factoryQuery` string variable.         Dim factoryQuery Equally String = "select distinct format(datepro,'dd/mm/yyyy') every bit dd from factory_output"          ' Establish the database connexion.         Dim oRs Equally New DbConn(factoryQuery)          ' Iterate through the data in the `factoryQuery` variable and add together the dates every bit          ' labels to the category object.         ' Suspend this data to the `jsonData` object.         While oRs.ReadData.Read()             If ReqComma And then                 jsonData.Suspend(",")             Else                 ReqComma = Truthful             End If              ' category level attributes             jsonData.AppendFormat("{{" + "'characterization': '{0}'" + "}}", oRs.ReadData("dd").ToString())         End While          'Close the database connection.         oRs.ReadData.Close()          'Close the catgories object.         jsonData.Append("]" + "}" + "],")          ' Initialize the Dataset object.         jsonData.Append("'dataset': [")           'Fetch all details for the three factories from the Factory_Master tabular array         ' and store the outcome in the `factoryquery2` variable.         Dim factoryquery2 As String = "select * from factory_master"          'Establish the database connexion.         Dim oRs1 As New DbConn(factoryquery2)            ' Iterate through the results in the `factoryquery2` variable to fetch the          ' manufactory  name and manufacturing plant id.         While oRs1.ReadData.Read()             If ReqDatasetComma So                 jsonData.Append(",")             Else                 ReqDatasetComma = Truthful             End If             ' Suspend the factory name as the value for the `seriesName` attribute.             ' dataset level attributes             jsonData.AppendFormat("{{" + "'seriesname': '{0}'," + "'information': [", oRs1.ReadData("factoryname").ToString())              ' Based on the mill id, fetch the quantity produced past each factory on each solar day              ' from the factory_output table.             ' Shop the results in the `factoryquery3` string object.             Dim factoryquery3 Equally String = "select quantity from factory_output where factoryid=" + oRs1.ReadData("factoryid").ToString()              'Constitute the database connection.             Dim oRs2 As New DbConn(factoryquery3)              ReqComma = Faux              ' Iterate through the results in the `factoryquery3` object and fetch the quantity details              ' for each factory.             ' Append the quantity details as the the value for the `` element.             While oRs2.ReadData.Read()                 If ReqComma Then                     jsonData.Append(",")                 Else                     ReqComma = True                 End If                  ' data set attributes                 jsonData.AppendFormat("{{" + "'value': '{0}'" + "}}", oRs2.ReadData(0).ToString())             End While              ' Shut the database connectedness.             oRs2.ReadData.Close()              ' Close individual dataset object.             jsonData.Append("]" + "}")         End While          ' Close the database connection.         oRs1.ReadData.Close()          ' Close the JSON object.         jsonData.Append("]" + "}")          ' Initialize chart - MSLine Chart data pulling from database         Dim factoryOutput As New Chart("mscolumn2d", "myChart", "600", "350", "json", jsonData.ToString())         ' Render the chart         Literal1.Text = factoryOutput.Render()

Pace ix: Right-click on Multiseriesdemo.aspx file and select Set Every bit Outset Folio from the options listed.

set-as-start_500

Start Page choice

Pace 10: Now, y'all are ready to render FusionCharts in your visual bones. Press ctrl + f5 to run and check the output of the chart as shown in the image below:

final output_620

Multi-Series Cavalcade 2D Chart

If you lot notice whatever difficulty in rendering the nautical chart or you see whatsoever fault in your code, non to worry! Delight click here to download the complete source lawmaking of the sample project we have created for this tutorial.