Using FusionCharts with ASP.NET 2.0 (C#.NET) > Plotting data from a database |
In this section, we'll show you how to use FusionCharts and C# (ASP.NET) to plot charts from data contained in a database. We'll create a pie chart to show "Production by Factory" using:
For the sake of ease, we'll use an Access Database. The database is present in Download Package > Code > C# > 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 > C# > DBExample folder. The Access database is present in Download Package > Code > C# > DB. To view the solution you need to create a blank solution using your ASP.NET editor, copy or import all files to the solution and run it from there. |
Database Structure |
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:
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. |
Building the ASP.NET Page for dataXML Method |
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="C#" AutoEventWireup="false" CodeFile="BasicDBExample.aspx.cs" //xmlData will be used to store the entire XML document generated //Generate the chart element //Create recordset to get details for the factories //Iterate through each record
|
The following actions are taking place in this code:
When you now run the code, you'll get an output as under: |
![]() |
Converting the example to use dataURL method |
Let's now convert this example to use dataURL method. As previously explained, in dataURL mode, you need two pages:
The pages in this example are contained in Download Package > Code > C# > DB_dataURL folder. |
Chart Container Page - Default.aspx |
Default.aspx contains the following code (with code behind page) to render the chart: |
<%@ Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="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> Code behind: public string GetQuantityChartHtml() { //In this example, we show how to connect FusionCharts to a database //To illustrate how to pass additional data as querystring to dataURL, //For the sake of ease, we've used an Access database which is present in //Variable to contain dataURL //Create the chart - Pie 3D Chart with dataURL as strDataURL } |
In the above code, we're:
|
Creating the data provider page PieData.aspx |
PieData.aspx contains the following code to output XML Data: |
using System; public partial class DB_dataURL_PieData : System.Web.UI.Page //For the sake of ease, we've used an Access database which is present in //xmlData will be used to store the entire XML document generated //Default.aspx has passed us a property animate. We request that. //Generate the chart element //create recordset to get details for the factories //Iterate through each factory //Close chart element //Set Proper output content-type } |
In the above page:
When you view this page, you'll get the same output as before. |
Inside DataConnection Namespace |
We have used DataConnection Namespace in the above code and in all subsequent Database examples. Using this class we establish connection to the MS Access database with ADO.NET component. Let's go through the lines of code inside this class: |
using System; namespace DataConnection public OdbcConnection connection; // SQL Server DataBase Connection - Defined in Web.Config // Creating Connection string using web.config connection string // Create an instance dataReader |
What it does:
|