NetCharts® Applets and CFML:

 

The complete CFML code for Sales Data example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sales Data Applet</title>
</head>
<body>
<h2>Sales Data</h2>
This page uses Cold Fusion to extract data from a small Access database. This data is then inserted into a NetCharts bar chart applet.
<p>
<!----
Copyright 2001 by Visual Mining, Inc, Rockville, MD USA
Permission to use, copy, modify, or distribute this software
and its documentation for any purpose is hereby granted.
This notice must appear in all copies and this copyright
permission notice must appear in supporting documentation.
Visual Mining Inc. disclaims all warranties with regard to this software,
including all implied warranties of merchantability and fitness.
In no event shall Visual Mining Inc. be liable for any special, indirect
or consequential damages or any damages whatsoever resulting from
loss of use, data or profits, whether in an action of contract,
negligence or other tortuous action, arising out of or in
connection with the use or performance of this software.
--->
<!---
' The purpose of this Cold Fusion example is to demonstrate extracting
' data from an ODBC data source and populating a NetCharts
' chart with this data. The basic order of events is as follows:
' - Create the variables
' - Connect to the database and pass in the SQL statement
' - Open the database and extract the data
' - Temporarily pass the data into holding arrays
' - Populate the variables with the data from the arrays
' - Close the connection to the database
' - Instantiate the applet and pass the variables in through
' the NFParamScript parameter.
--->

<!---- here, the variables are defined as cold fusion parameters. ---->

<!--- Create CFML variables to hold values to be passed to the NetCharts Applet. --->
<cfparam name=DataSet1 default=#URLEncodedFormat("15,20,25,15")#>
<cfparam name=DataSet1 default=#URLEncodedFormat("15,20,25,15")#>
<cfparam name=DataSet1 default=#URLEncodedFormat("15,20,25,15")#>
<cfparam name=DataSet1 default=#URLEncodedFormat("15,20,25,15")#>
<cfparam name=BarLabels default=#URLEncodedFormat("Jan,Feb,Mar,Apr")#>

<!--- Create arrays to temporarily hold data from database --->
<cfset ds1 = ArrayNew(1)>
<cfset ds2 = ArrayNew(1)>
<cfset ds3 = ArrayNew(1)>
<cfset ds4 = ArrayNew(1)>
<cfset labels = ArrayNew(1)>

<!--- Query regionalsales data source for sales info.
Remember to add the regionalsales.mdb Access database
as a System DSN.
--->
<cfquery name="sales" datasource="regionalsales">
SELECT region, quarter1, quarter2, quarter3, quarter4 FROM Sales
</cfquery>

<!--- Loop through the RecordSets and populate the arrays with the data --->
<cfloop query="sales">
<cfset ds1[CurrentRow]=sales.quarter1[CurrentRow]>
<cfset ds2[CurrentRow]=sales.quarter2[CurrentRow]>
<cfset ds3[CurrentRow]=sales.quarter3[CurrentRow]>
<cfset ds4[CurrentRow]=sales.quarter4[CurrentRow]>
<cfset labels[CurrentRow]=sales.region[CurrentRow]>
</cfloop>

<!--- Use cfscript to transfer the array data over to the variables
to be used in the NetCharts Applet's NFParamScript
--->
<cfscript>
DataSet1 = arraytolist(ds1,",");
DataSet2 = arraytolist(ds2,",");
DataSet3 = arraytolist(ds3,",");
DataSet4 = arraytolist(ds4,",");
BarLabels = arraytolist(labels,",");
</cfscript>

<!--- Build the applet and populate the datasets and barlabels with the cf params --->
<!--
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. If,
for instance, an older version of NetCharts 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.
(NetCharts 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, 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);
BottomTics = ("ON",black,"Helvetica",10,0,null);
DataSets = ("Quarter1",null,BAR,4,FILLED),
("Quarter2",null,BAR,4,FILLED),
("Quarter3",null,BAR,4,FILLED),
("Quarter4",null,BAR,4,FILLED);
DwellLabel = ("",black,"Courier",12,0);
GraphType = GROUP;
TopAxisTitle = ("Regional Sales by Quarter",black,"Helvetica",12,0);
HeaderBox = (null,NONE,2,null,TILE,black);
LeftTics = ("ON",black,"Helvetica",10,0,null);
BarWidth = 61;
Bar3DDepth = -1;
DataAxis = (BOTTOM,LEFT),(BOTTOM,LEFT);
Grid = (lightgray,null,black,null,TILE);
DwellLabelBox = (yellow,RAISED,3,null,TILE,black);
Legend = ("Legend",black,"Helvetica",10,0);
LegendAxis = (BOTTOM,LEFT);
LegendLayout = (VERTICAL,RIGHT,0,0,TOPLEFT,-1);
LegendBox = (null,NONE,1,null,TILE,black);
ColorTable = x6c5d94,x999966,x315394,x213321,x00566f,x690931,x515f23;
LeftColor = black;
GridAxis = (BOTTOM,LEFT);
GridLine = (HORIZONTAL,SOLID,1);
BottomColor = black;
BarBorder = (NONE,1,black);
AntiAlias = "ON";
StackLabel = ITEM;
BottomTicLayout = (AUTO,0,1);
BottomAxisTitle = ("Region",black,"Helvetica",12,0);
DwellLabel = ("ON", navy, "Helvetica", 10, 0);
DwellLabelBox = (lightgrey, RAISED, 2);

#Now populate the chart with the dynamic data extracted from the database via Cold Fusion;
<cfoutput>
DataSet1 = #DataSet1#;
DataSet2 = #DataSet2#;
DataSet3 = #DataSet3#;
DataSet4 = #DataSet4#;
BarLabels = #BarLabels#;
</cfoutput>
'>
</applet>
</body>
</html>