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

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

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

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

Chart.aspx looks as under:

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQLClient" %>
<script runat="server">
'Initialize a variable that will store FusionCharts XML Data document
Dim strFCdataXML as String
'Year for which the data is to be shown
Dim strSelectedYear as String

Sub Page_Load(obj as Object, e as EventArgs)
     '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
     strSelectedYear = ddlSelYear.selectedItem.Value
End Sub

Public Function getFCXMLData() as String
     'This function returns the XML data for FusionCharts chart
     'Container for the XML Data

     Dim strFCXMLData as String

     '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)=" & strSelectedYear & " 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>"

     'Return the XML data
     Return strFCXMLData
End Function
</script>
...HTML Content...
<form id="YearSelect" method="post" runat="server">
...HTML Content...
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 Content...
<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?dataXML=<%= getFCXMLData() %>">
<PARAM NAME="BGColor" VALUE="FFFFFF">
<EMBED src="../Charts/FC2Column.swf?dataXML=<%= getFCXMLData() %>" 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 Content...

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