Using with Database and scripts > ASP.NET, MS SQL Server and dataURL Method
 

Here, we'll see how to use FusionCharts with ASP.NET using dataURL method.

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

  • Chart Container Page Chart.aspx - This page contains the chart object alongwith any other HTML objects. We'll name this page as Chart.aspx - 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 Data.aspx- This page provides the XML data required by the chart. This page is invoked by FusionCharts contained in Chart.aspx.

We'll first see the code for Data.aspx. Basically, here we request the year from querystring, retrieve the required data from database, convert it into XML and then write it to the output stream.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQLClient" %>
<script runat="server">
Sub Page_Load(obj as Object, e as EventArgs)
     'Container for the XML Data
     Dim strFCXMLData as String

     'Request the year passed to this page
     Dim strYear as String
     strYear = Request.QueryString("Year")

     'Establish a connection
     Dim DS As DataSet
     Dim MyConnection As SqlConnection
     Dim MyCommand As SqlDataAdapter

     'Get Top 5 Countries the database.
     MyConnection = New SqlConnection(ConfigurationSettings.AppSettings("appDSN"))
     MyCommand = New SqlDataAdapter("SELECT TOP 5 Country, SUM(ExtendedPrice) As Total, COUNT(DISTINCT OrderID) As orderNumber FROM Invoices WHERE YEAR(OrderDate)=" & strYear & " GROUP BY Country ORDER BY SUM(ExtendedPrice) DESC", MyConnection)

     'Fill the dataset
     DS = new DataSet()
     MyCommand.Fill(ds, "Countries")

     'Define a list of Colors
     'NOTE - You can move the array below to some global place so as to use it for all the charts and have a cleaner code
     'We've put it here to simplify the code

     Dim strColor(10) As String
     strColor(0) = "0099CC" 'Blue Shade
     strColor(1) = "FF0000" 'Bright Red
     strColor(2) = "006F00" 'Dark Green
     strColor(3) = "FF66CC" 'Dark Pink
     strColor(4) = "996600" 'Variant of brown
     strColor(5) = "FF9933" 'Orange
     strColor(6) = "9900FF" 'Violet
     strColor(7) = "999999" 'Grey
     strColor(8) = "CCCC00" 'Chrome Yellow+Green
     strColor(9) = "0372AB" 'Dark Blue

     'Initialize the XML String
     strFCXMLData = "<graph shownames='1' showvalues='0' decimalPrecision='0' numberPrefix='$'>" & vbCrLf

     'Now iterate through each data row
     Dim i As Integer
     For i = 0 To ds.Tables("Countries").Rows.Count - 1
         'Append the value in format <set name='...' value='...' color='...' />
         strFCXMLData = strFCXMLData & "<set name='" & ds.Tables("Countries").Rows(i).Item("Country") & "' value='" & ds.Tables("Countries").Rows(i).Item("Total") & "' color='" & strColor(i Mod 9) & "'/>" & vbCrLf
     Next

     'End the XML data by adding the closing </graph> element
     strFCXMLData = strFCXMLData & "</graph>"

     'Write the XML data to the output stream
     'NOTE - NO HTML CONTENTS ARE PRESENT IN THIS PAGE - not even <head></head> tags. This page should just output the XML.

     Response.Write(strFCXMLData)
End Sub
</script>

The code for Chart.aspx can be listed as under:

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQLClient" %>
<script runat="server">
'Initialize a variable that will store FusionCharts dataURL string
Dim strFCdataURL as String

Sub Page_Load(obj as Object, e as EventArgs)
'Set data page as Data.aspx - we'll add the year to it later
strFCdataURL = "Data.aspx?Year="

'If coming for the first time, fill the select (drop down list)

If Not IsPostBack Then
     'Establish a connection
     Dim DS As DataSet
     Dim MyConnection As SqlConnection
     Dim MyCommand As SqlDataAdapter

     'Get the list of years from the database.
     MyConnection = New SqlConnection(ConfigurationSettings.AppSettings("appDSN"))
     MyCommand = New SqlDataAdapter("SELECT DISTINCT YEAR(OrderDate) As Year FROM Orders ORDER BY 1", MyConnection)

     'Fill the dataset
     DS = new DataSet()
     MyCommand.Fill(ds, "Orders")

     'Bind it to the drop down list
     ddlSelYear.DataSource = ds.Tables("Orders").DefaultView
     ddlSelYear.DataTextField = "Year"
     ddlSelYear.DataValueField = "Year"
     ddlSelYear.DataBind()
End If

'Get the selected year's index
strFCdataURL = strFCdataURL & ddlSelYear.selectedItem.Value
'Filter it
strFCdataURL = formatFCUrl(strFCdataURL)
End Sub

Public Function formatFCUrl(strDataURL) as String
     'This function converts the ? and & present in URL to *
     strDataURL = Replace(strDataURL,"?","*")
     strDataURL = Replace(strDataURL,"&","*")
     'Return the formatted dataURL
     Return strDataURL
End Function
</script>

... HTML Code ...
<form id="YearSelect" method="post" runat="server">
... HTML Code ...
Please select the year for which you want to see the chart:
<asp:dropdownlist AutoPostBack="True" id="ddlSelYear" runat="server" class="Select"></asp:dropdownlist>
... HTML Code ...
<OBJECT id="FC2Column" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
height="420" width="565" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" VIEWASTEXT>
<PARAM NAME="Movie" VALUE="../Charts/FC2Column.swf?dataurl=<%= strFCdataURL %>&noCache=<%= Server.URLEncode(Now())%>">
<PARAM NAME="BGColor" VALUE="FFFFFF">
<EMBED src="../Charts/FC2Column.swf?dataurl=<%= strFCdataURL %>&noCache=<%= Server.URLEncode(Now())%>" 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 ...

When you now view this chart, you'll get the following output: