Using with Database and scripts > ASP & MS SQL Server Driven Example using dataURL
 

In the previous part, we had gone through an example of conceptually creating a chart using Northwind database. In this part, we stick to ASP (Microsoft Active Server Pages) as our choice of scripting language and revisit the process with ASP code samples.

As we had earlier seen, the dataURL method requires two pages:

  • Chart Container Page - This page contains the chart object alongwith any other HTML objects. We'll name this page as Chart.asp - in this page, we let the user select the year for which he wants to view the chart and would show the chart.
  • Data Provider Page - This page provides the XML data required by the chart. This page is invoked by FusionCharts contained in Chart.asp. We'll name this page as Data.asp.

We'll also need two other pages:

  • Includes/Connection_inc.asp - This page contains the data connection string
  • Includes/FC_Colors.asp - This page contains a list of hex colors (without #) in an array named as arr_FCColors

FC_Colors.asp looks as under:

<%
'This page contains an array of colors to be used as default set of colors for FusionCharts
'arr_FCColors is the array that would contain the hex code of colors
'ALL COLORS HEX CODES TO BE USED WITHOUT #

Dim arr_FCColors(20), intFCColors_count
'Count of the number of colors
intFCColors_count = 20
arr_FCColors(1) = "0099FF"
arr_FCColors(2) = "66CC66"
arr_FCColors(3) = "CD6AC0"
arr_FCColors(4) = "FF5904"
....
....
....
arr_FCColors(18) = "CCCCFF" 'Light violet
arr_FCColors(19) = "669900" 'Shade of green
arr_FCColors(20) = "1941A5" 'Dark Blue
%>

 
Let's quickly see the code for Data.asp now:
<%@ Language=VBScript %>
<!-- #INCLUDE FILE="Includes/Connection_inc.asp" -->
<!-- #INCLUDE FILE="Includes/FC_Colors.asp" -->
<%
'Request the current year from querystring
'The year was passsed to this page in the form Data.asp?Year=199x (where x=6,7,8)

Dim intYear, strDataURL
intYear = Request("Year")
'Define database objects
'oRs - Recordset object
'strSQL - String variable to contain the SQL query
'intCounter - Numeric value to keep a track of number of records
Dim oRs, strSQL, intCounter
'strChartT5CXML - String variable to contain the entire XML data document for the chart
Dim strChartT5CXML
strChartT5CXML = ""
'Initialize the recordset object
Set oRs = Server.CreateObject("ADODB.Recordset")
'--------------------XML Data for TOP 5 COUNTRIES-------------------------
'Query the database
strSQL = "SELECT TOP 5 Country, SUM(ExtendedPrice) As Total, COUNT(DISTINCT OrderID) As orderNumber FROM Invoices WHERE YEAR(OrderDate)=" & intYear & " GROUP BY Country ORDER BY SUM(ExtendedPrice) DESC"
oRs.Open strSQL, DB_CONNECTION
'Create the <graph> element
strChartT5CXML = "<graph shownames='1' showvalues='0' decimalPrecision='0' numberPrefix='$'>" & vbCrlf
'Now iterate through each data row
intCounter=0
While not oRs.EOF
    'Increase the count
    intCounter=intCounter+1
    'Append the value in format <set name='...' value='...' color='...' />
    strChartT5CXML = strChartT5CXML & "<set name='" & ors("Country") & "' value='" & ors("Total") & "'     color='" & arr_FCColors(intCounter mod intFCColors_count) & "'/>" & vbCrlf
    oRs.MoveNext()
Wend
'Entire XML - concatenation
strChartT5CXML = strChartT5CXML & "</graph>"
oRs.Close()
'--------------------------------------------------------------------
'Destroy objects

Set oRs= nothing
'Write the XML data to output stream
Response.Write(strChartT5CXML)
%>

Basically, the above page requests the year, queries the database to retrieve data pertinent to that year, forms an XML data document out if it and then writes it to the output stream.

Let's now see the code in Chart.asp, which contains the chart:

<%@ Language=VBScript %>
<HTML>
<HEAD>
<TITLE>FusionCharts Lite Demo Chart using dataURL method in ASP/MS SQL Northwind Database</TITLE>
<LINK REL='Stylesheet' HREF='Style.css'>
</HEAD>
<!-- #INCLUDE FILE="Includes/Connection_inc.asp" -->
<%
'Request the current year from querystring
Dim intYear, strDataURL
intYear = Request("Year")
'Database objects
'oRsYears - Recordset Object
'strSQL - String variable to hold SQL Query (to get all years list)

Dim oRsYears, strSQL
'Initialize the recordset object and retrieve the years
Set oRsYears = Server.CreateObject("ADODB.Recordset")
strSQL = "SELECT DISTINCT YEAR(OrderDate) As Year FROM Orders ORDER BY 1"
oRsYears.Open strSQL, DB_CONNECTION
'If no years has been specified select the last one
If intYear="" then
   While not oRsYears.EOF
      intYear = oRsYears("Year")
      oRsYears.MoveNext()
   Wend
end if
'Move to first
oRsYears.MoveFirst()
'Define dataURL
strDataURL = "Data.asp?Year=" & intYear
'Filter it in FusionCharts format - Very Important (see the function at the end of this script block)
strDataURL = formatFCUrl(strDataURL)
%>
... HTML Code here ....
<form action="Chart.asp" method="post">
<!-- Year drop down list -->
<SELECT name='year' class='select' onChange="this.form.submit();">
<%
While not oRsYears.EOF
%>
   <option value="<%=oRsYears("Year")%>"
   <% If int(intYear)=int(oRsYears("Year")) then %>
      selected
   <% end if %>
   ><%=oRsYears("Year")%>
   </option>
   </cfoutput>
<%
oRsYears.MoveNext()
Wend
%>
</SELECT>
</form>
... HTML Code here ...
<!-- FusionCharts -->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="565" HEIGHT="420" id="FC2Column" ALIGN="">
<PARAM NAME="FlashVars" value="&dataURL=<%=strDataURL%>">
<PARAM NAME=movie VALUE="../Charts/FC2Column.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="Charts/FC2Column.swf" FlashVars="&dataURL=<%=strDataURL%>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC2Column" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
... HTML Code .....
<%
Function formatFCUrl(strDataURL)
'This function converts the ? and & present in URL to *
strDataURL = Replace(strDataURL,"?","*")
strDataURL = Replace(strDataURL,"&","*")
'Return it
formatFCUrl = strDataURL
End Function
%> 
When you now view this chart, you'll get the following output: