NetCharts® Applets and ASP/.NET
NetCharts Applets can be used in combination with Microsoft's ASP.NET WebForms (ASPX) technology to dynamically produce chart-enabled HTML pages.
This example uses ASP.NET and ADO.NET to extract data from an ODBC data source called regionalsales, populate variables with the data, and build an HTML page that contains a NetCharts Applets applet that uses this data.
Configuring the ODBC data source
Running the example
Examining the ASPX code
The complete ASPX source code
When run, the example will generate a page containing the following barchart applet:
Configuring the ODBC Data Source
This example extracts data from a small Access database called regionalsales.mdb. This sample database is provided as part of the NetCharts Applets distribution and can be be registered as a System DSN called regionalsales as follows.
- Launch the Control Panel.
- Select Data Sources (ODBC).
- Select the System DSN tab.
- Add a "Microsoft Access Driver (*.mdb)" data source
- Name the data source regionalsales.
- Select the regionalsales.mdb file. Its default location is
C:\Program Files\Visual Mining\Netcharts 4.5\examples\dataimport.
Running the Example
The example ASPX script can be configured and run using the following steps:
- Make sure that regionalsales.mdb is available as a System DSN.
- Copy the getSalesDataChart.aspx file to any Web Application under an IIS installation. The file can be found in the\examples\dataimport directory under the NetCharts Applets installation directory. You might need to change the Inherits attribute to the correct Web Application name.
- Make a copy of the NetCharts Applets \classes directory under \wwwroot, or make a virtual directory that points to the \classes directory under the NetCharts Applets 4.5 installation. The default installation directory for NetCharts Applets is C:\Program Files\Visual Mining\Netcharts 4.x\.
- Start a web browser and load the WebForm. For example, if the ASPX page was installed in the netchartsexamples Web Application, the URL would look like http://localhost/netchartsexamples/getSalesDataChart.aspx.
When you load the page, you should see a page the regional sales chart shown above.
Examining the Code
This WebForm performs the following steps to create chart-enabled web page.
- Create the OdbcConnection to the database
- Create the SQL statement
- Create the OdbcCommand
- Retrieve the DataReader
- Define the variables
- Populate the variables with the data from the DataReader
- Close the OdbcConnection and DataReader
- Instantiate the applet and pass the variables in through the NFParamScript parameter.
The first section of code opens an OdbcConnection to the database, and prepares and executes the SQL statement.
' Create the OdbcConnection to the database
Dim sConnString As String = "Dsn=regionalsales"
Dim oODBCConnection As New System.Data.Odbc.OdbcConnection(sConnString)
oODBCConnection.Open()' Create the SQL statement
Dim sqlString As String = "SELECT region, quarter1, quarter2, quarter3, quarter4 FROM Sales"' Create the OdbcCommand
Dim oOdbcCommand As New System.Data.Odbc.OdbcCommand(sqlString, oODBCConnection)
The next section of code retrieves the DataReader from the OdbcCommand.
Dim oReader As System.Data.Odbc.OdbcDataReader = oOdbcCommand.ExecuteReader()
The next section defines several variables. These variables are used to hold and populate the data for passing to the NetCharts Applets applet:
Dim count As Integer = 0
Dim barLabels As String = ""
Dim ds1 As String = ""
Dim ds2 As String = ""
Dim ds3 As String = ""
Dim ds4 As String = ""
Next, data is read from the OdbcDataReader and stored in strings. These strings contain the data in a comma-separated format, which NetCharts Applets can understand. Ultimately, the data will look something like "5,10,15,20".
' Loop thru the OdbcDataReader and populate the datasets and barlabels with the extracted data.
While oReader.Read()
Dim prefix as String = ""
If count > 0 Then prefix = ","barLabels = barLabels & prefix & """ & oReader.GetString(0) & """
ds1 = ds1 & prefix & oReader.GetString(1)
ds2 = ds2 & prefix & oReader.GetString(2)
ds3 = ds3 & prefix & oReader.GetString(3)
ds4 = ds4 & prefix & oReader.GetString(4)count = count + 1
End While
After the data is extracted from the data base, the OdbcConnection and DataReader can be closed.
oReader.Close()
oODBCConnection.Close()
The applet tag can now be constructed. NetCharts Applets uses an applet parameter called NFParamScript to pass in chart definition strings. A simple name=value format is used to construct complete chart definitions that can be processed by the NetCharts Applets applet.
Note: The "code=" attribute of the applet is pointing to the netcharts4.apps.* package. This is done to avoid any classpath conflicts that may occur on the system running NetCharts Applets. If, for instance, an older version of NetCharts Applets is installed on the system, and the CLASSPATH environment variable is pointing to that package, then a conflict could occur that might keep this example from running. By pointing specifically to the netcharts4.apps.* package, no conflict will occur. Note that a change will need to be made to the "code=" attribute in all of the applet tags with every major new version upgrade of NetCharts Applets. (NetCharts Applets 5.0, 6.0, etc.)
If this potential classpath conflict is not a concern, then set "code=netcharts.apps.*". This will allow the applets to run across multiple versions of NetCharts Applets, without any changes.
<applet name=Quarterly Sales
code=netcharts4.apps.NFBarchartApp
codebase=/classes
archive=netcharts4.jar
width=600 height=400>
<param name=NFParamScript value='
#Populate the chart with all of the static template information;
ChartName = "Basic Grouped Barchart";
DebugSet = ALL;
ChartWidth = 600;
ChartHeight = 400;
Background = (white,NONE,3,null,TILE,black);
...
The key CDL parameters for this chart are DataSet1, DataSet2, DataSet3, DataSet4, and BarLabels. These parameters are assigned variables for their values.
#Now populate the chart with the dynamic data extracted from the database via ASP;
DataSet1 = <%=ds1%>;
DataSet2 = <%=ds2%>;
DataSet3 = <%=ds3%>;
DataSet4 = <%=ds4%>;
BarLabels = <%=barLabels%>;
When this WebForm runs, it will substitute the values for the variables ds1, ds2,ds3 and barlabels creating a complete chart definition.
