FusionCharts v3 Documentation

Using FusionCharts with ASP.NET (VB.NET) > Plotting data from a database

In this section, we'll show you how to use FusionCharts and ASP.NET to plot charts from data contained in a database. We'll create a pie chart to show "Production by Factory" using:

dataXML method first.
Thereafter, we'll convert this chart to use dataURL method.

For the sake of ease, we'll use an Access Database. The database is present in Download Package > Code > VB_NET > DB folder. You can, however, use any database with FusionCharts including MS SQL, Oracle, mySQL etc.

Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.

The code examples contained in this page are present in Download Package > Code > VB_NET > DBExample folder. The Access database is present in Download Package > Code > VB_NET > DB.

Before we code the ASP.NET pages to retrieve data, let's quickly have a look at the database structure.

The database contains just 2 tables:

Factory_Master: To store the name and id of each factory
Factory_Output: To store the number of units produced by each factory for a given date.

For demonstration, we've fed some dummy data in the database. Let's now shift our attention to the ASP.NET page that will interact with the database, fetch data and then render a chart.

The ASP.NET page for dataXML method example is named as BasicDBExample.aspx (in DBExample folder). It contains the following code (GetFactorySummaryChartHtml() method from code behind page also reproduced below):

<%@ Page language="vb" Codebehind="BasicDBExample.aspx.vb" AutoEventWireup="false" Inherits="InfoSoftGlobal.InfoSoftGlobal.GeneralPages.ASP.NET.DBExample.BasicDBExample" %>
<HTML>
   <HEAD>
      <TITLE>FusionCharts - Database Example </TITLE>
      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
   </HEAD>
   <body>
     <form id='form1' name='form1' method='post' runat="server">
       <%=GetFactorySummaryChartHtml()%>
     </form>
   </body>
</HTML>

Public Function GetFactorySummaryChartHtml() As String
    'In this example, we show how to connect FusionCharts to a database.
    'For the sake of ease, we've used an Access database which is present in
    '../DB/FactoryDB.mdb. It just contains two tables, which are linked to each
    'other.
    'xmlData will be used to store the entire XML document generated
    Dim xmlData As String
    'Generate the chart element
    xmlData = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units'>"
    'Iterate through each factory
    Dim factoryQuery As String = "select * from Factory_Master"
    Dim connectin As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)
    Dim factoryCommand As OdbcCommand = New OdbcCommand(factoryQuery, connectin)
    Dim adapter As OdbcDataAdapter = New OdbcDataAdapter(factoryCommand)
    Dim table As DataTable = New DataTable
    adapter.Fill(table)
    For Each row As DataRow In table.Rows
        Dim quantityQuery As String = ("select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" &row("FactoryId").ToString)
        Dim quantityCommand As OdbcCommand = New OdbcCommand(quantityQuery, connectin)
       xmlData = (xmlData &("<set label='" _
         &(row("FactoryName").ToString &("' value='" _
         &(quantityCommand.ExecuteScalar.ToString &"' />")))))
    Next
    connectin.Close()
    xmlData = (xmlData &"</chart>")
    'Create the chart - Pie 3D Chart with data from xmlData
    Return InfoSoftGlobal.FusionCharts.RenderChart("../../FusionCharts/Pie3D.swf", "", xmlData, "FactorySum", "600", "300", False, False)
End Function

The following actions are taking place in this code:

We first include FusionCharts.js JavaScript class to enable easy embedding of FusionCharts and call GetFactorySummaryChartHtml() method contained in code behind page.
In code behind page GetFactorySummaryChartHtml() function, we then open a connection to Access database.
Thereafter, we generate the XML data document by iterating through the recordset and store it in xmlData variable.
Finally, we render the chart using Functions.RenderChart() method and pass xmlData as dataXML.

When you now run the code, you'll get an output as under:

Let's now convert this example to use dataURL method. As previously explained, in dataURL mode, you need two pages:

Chart Container Page - The page which embeds the HTML code to render the chart. This page also tells the chart where to load the data from. We'll name this page as Default.aspx.
Data Provider Page - This page provides the XML data to the chart. We'll name this page as PieData.aspx

The pages in this example are contained in Download Package > Code > VB_NET > DB_dataURL folder.

Default.aspx contains the following code (with code behind page) to render the chart:

					<%@ Page language="c#" Codebehind="Default.aspx.vb" AutoEventWireup="false" 
					Inherits="InfoSoftGlobal.GeneralPages.ASP.NET.DB_dataURL._Default" %>
					
					<HTML>

					 <HEAD>

					  <TITLE>FusionCharts - dataURL and Database Example 
					</TITLE>

					  <SCRIPT LANGUAGE="Javascript" 
					SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>

					 </HEAD>

					 <body>

					   <form id='form1' name='form1' method='post' runat="server">

     <%=GetQuantityChartHtml()%>

   </form>

					 </body>

					</HTML>

					Public Function GetQuantityChartHtml() As String

					 'In this example, we show how to connect FusionCharts to a database 

 'using dataURL method. In our other examples, we've used dataXML method

 'where the XML is generated in the same page as chart. Here, the XML data

 'for the chart would be generated in PieData.aspx.

 'To illustrate how to pass additional data as querystring to dataURL, 

 'we've added an animate property, which will be passed to PieData.aspx. 

 'PieData.aspx would handle this animate property and then generate the 

 'XML accordingly.

 'For the sake of ease, we've used an Access database which is present in

 '../DB/FactoryDB.mdb. It just contains two tables, which are linked to 
					each

 'other.

 'Variable to contain dataURL

 'Set DataURL with animation property to 1

 'NOTE: It's necessary to encode the dataURL if you've added parameters to 
					it

					 Dim dataURL As String = 
					InfoSoftGlobal.FusionCharts.EncodeDataURL("PieData.aspx?animate=1", False)

					 'Create the chart - Pie 3D Chart with dataURL as strDataURL

					 Return 
					InfoSoftGlobal.FusionCharts.RenderChart("../../FusionCharts/Pie3D.swf", 
					dataURL, "", "FactorySum", "600", "300", False, False)

					End Function

In the above code, we're:

Including FusionCharts.js JavaScript class
Create the dataURL string and store it in dataURL variable. We append a dummy propery animate to show how to pass parameters to dataURL. After building the dataURL, we encode it using EncodeDataURL function defined in FusionCharts class .
Finally, we render the chart using RenderChart() method and set dataURL as dataURL.

PieData.aspx contains the following code to output XML Data:

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not IsPostBack Then
  'This page generates the XML data for the Pie Chart contained in
  'Default.aspx.
  'For the sake of ease, we've used an Access database which is present in
  '../DB/FactoryDB.mdb. It just contains two tables, which are linked to each
  'other.
  'Database Objects - Initialization
  Dim query As String
  'xmlData will be used to store the entire XML document generated
  Dim xmlData As String = String.Empty
  'Default.aspx has passed us a property animate. We request that.
  Dim animateChart As String
  animateChart = Request.QueryString("animate")
  'Set default value of 1
  If ((Not (animateChart) Is Nothing) _
AndAlso (animateChart.Length = 0)) Then
    animateChart = "1"
  End If
  'Create the recordset to retrieve data
   'Generate the chart element
  xmlData = ("<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units' animation=' " _ + (animateChart + "'>"))
  'Iterate through each factory
  query = "select * from Factory_Master"
  Dim connection As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)
  Dim command As OdbcCommand = New OdbcCommand(query, connection)
  Dim factoryTable As DataTable = New DataTable
  Dim factoryAdapter As OdbcDataAdapter = New OdbcDataAdapter(command)
  factoryAdapter.Fill(factoryTable)
  For Each row As DataRow In factoryTable.Rows
     Dim outputQuery As String = ("select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + row("FactoryId").ToString)
     Dim outputCommand As OdbcCommand = New OdbcCommand(outputQuery, connection)
     xmlData = (xmlData + ("<set label='" _
       + (row("FactoryName").ToString + ("' value='" _
       + (outputCommand.ExecuteScalar.ToString + "' />")))))
  Next
  'Finally, close <chart> element
  xmlData = (xmlData + "</chart>")
  'Set Proper output content-type
  Response.ContentType = "text/xml"
  'Just write out the XML data
  'NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
  Response.Write(xmlData)
End If
End Sub

In the above page:

We first request the animate property which has been passed to it (from dataURL)
We generate the data and store it in xmlData variable
Finally, we write this data to output stream without any HTML tags.

When you view this page, you'll get the same output as before.