| 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:
We'll also need two other pages:
FC_Colors.asp looks as under: |
<% |
| 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: |
![]() |