Using FusionCharts with ASP > Plotting data from a database |
In this section, we'll show you how to use FusionCharts and ASP 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 > ASP > 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 > ASP > DBExample folder. The Access database is present in Download Package > Code > ASP > DB. |
Database Structure |
Before we code the ASP 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 page that will interact with the database, fetch data and then render a chart. |
Building the ASP Page for dataXML Method |
The ASP page for dataXML method example is named as BasicDBExample.asp (in DBExample folder). It contains the following code: |
<%@ Language=VBScript %> 'Generate the chart element |
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 > ASP > DB_dataURL folder. |
Chart Container Page - Default.asp |
Default.asp contains the following code to render the chart: |
<%@ Language=VBScript %> <HTML> <HEAD> <TITLE> FusionCharts - dataURL and Database Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> </HEAD> <!-- #INCLUDE FILE="../Includes/FusionCharts.asp" --> <BODY> <% 'In this example, we show how to connect FusionCharts to a database 'using dataURL method. In our previous example, 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.asp. 'To illustrate how to pass additional data as querystring to dataURL, 'we've added an animate property, which will be passed to PieData.asp. 'PieData.asp 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 Dim strDataURL 'Set DataURL with animation property to 1 'NOTE: It's necessary to encode the dataURL if you've added parameters to it strDataURL = encodeDataURL("PieData.asp?animate=1") 'Create the chart - Pie 3D Chart with dataURL as strDataURL Call renderChart("../../FusionCharts/Pie3D.swf", strDataURL, "", "FactorySum", 600, 300, false, false) %> </BODY> </HTML> |
In the above code, we're:
|
Creating the data provider page PieData.asp |
PieData.asp contains the following code to output XML Data: |
<%@ Language=VBScript %> <!-- #INCLUDE FILE="../Includes/DBConn.asp" --> 'Generate the chart element |
In the above page:
When you view this page, you'll get the same output as before. |