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

In the previous example, we had used dataURL method in conjunction with ASP/MS SQL to create a dynamic chart. Here, we'll replicate that chart but using dataXML method.

As we had earlier seen, the dataXML method just requires one page:

  • Chart.asp: This page contains everything - the year select drop down list, the chart and the XML data.

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 Chart.asp now:
<%@ Language=VBScript %>
... HTML Code ...
<!-- #INCLUDE FILE="Includes/Connection_inc.asp" -->
<!-- #INCLUDE FILE="Includes/FC_Colors.asp" -->
<%
'Request the current year from querystring
Dim intYear, strDataURL
intYear = Request("Year")
'Database objects
'oRsYears - Recordset Object
'oRs - Recordset object
'intCounter - Numeric value to keep a track of number of records
'strSQL - String variable to hold SQL Query (to get all years list)

Dim oRsYears, oRs, intCounter, strSQL
'strChartT5CXML - String variable to contain the entire XML data document for the chart
Dim strChartT5CXML
strChartT5CXML = ""
'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()
'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>"
%>
... HTML Code ...
<form action="Chart.asp">
<!-- 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 ...
<!-- 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="&dataXML=<%=strChartT5CXML%>">
<PARAM NAME=movie VALUE="../Charts/FC2Column.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="Charts/FC2Column.swf" FlashVars="&dataXML=<%=strChartT5CXML%>" 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 ...
<%
'Destroy objects
Set oRs = nothing
Set oRsYears = nothing
%>
When you now view this chart, you'll get the following output: