![]() ![]() ![]() Introduction HanengCharts is Java applets that you use with your website by supplying the parameters (the values and labels) through HTML PARAM tags. This allows any technology that can generate HTML to work dynamically with HanengCharts. This whitepaper will give you some sample scripts and explanations on how you can use HanengCharts and ASP to generate charts based on form information or data stored in a database. ![]() ![]() ![]() Sample Scripts & Files: The sample scripts and the database mentioned in this whitepaper is located in the ASP folder. ![]() ![]() ![]() Example 1: ASP and a HTML form This example uses a regular HTML form where the visitor can insert some values. The ASP script retrieves this information when the form is submitted and the data is used to generate a pie chart. Form.html is a regular HTML page that has a regular HTML form. It has 5 pairs of text fields called Text and Value. The Text is the label that will be used for the value in the legend and the Value is the value that will be used in the pie chart. Here is the HTML code for the page: <HTML> <BODY> <FORM METHOD="POST" ACTION="Pie.asp"> Text 1: <INPUT NAME="Text_1" TYPE="TEXT" SIZE=20><BR> Value 1: <INPUT NAME="Value_1" TYPE="TEXT" SIZE=5><BR> Text 2: <INPUT NAME="Text_2" TYPE="TEXT" SIZE=20><BR> Value 2: <INPUT NAME="Value_2" TYPE="TEXT" SIZE=5><BR> Text 3: <INPUT NAME="Text_3" TYPE="TEXT" SIZE=20><BR> Value 3: <INPUT NAME="Value_3" TYPE="TEXT" SIZE=5><BR> Text 4: <INPUT NAME="Text_4" TYPE="TEXT" SIZE=20><BR> Value 4: <INPUT NAME="Value_4" TYPE="TEXT" SIZE=5><BR> Text 5: <INPUT NAME="Text_5" TYPE="TEXT" SIZE=20><BR> Value 5: <INPUT NAME="Value_5" TYPE="TEXT" SIZE=5><BR> <INPUT TYPE="SUBMIT" VALUE="Display chart"> </FORM> </BODY> </HTML> Pie.asp is an ASP script that loops through all the form data from Form.html and outputs PARAM tags with the text and value information. This data is used by HanengCharts to create the chart. Here is the ASP code for Pie.asp: <HTML> <BODY> <!-- Start HanengCharts Code --> <APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260> <PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN"> <PARAM NAME="ChartType" VALUE="pie"> <% FOR i=1 TO 5 IF Len(Request.Form("Text_" & i)) > 0 THEN %> <PARAM NAME="Text_<%=i%>" VALUE="<%=Request.Form("Text_" & i)%>"> <% END IF %> <PARAM NAME="Value_<%=i%>" VALUE="<%=Request.Form("Value_" & i)%>"> <% NEXT %> </APPLET> <!-- End HanengCharts Code --> </BODY> </HTML> Try the script online by clicking here (window opens in a new window) ![]() ![]() ![]() Example 2: ASP and MS Access (or MS SQL Server) In this example we extract the data we use from an MS Access database, but by just changing the database connection string this example will work just as well with MS SQL Server. The MS Access example is done with a so called "DSN-less" connection so you don't have to set up any DSN or ODBC connection for it to work. 1. Locate the Whitepaper files The sample scripts and the database mentioned in this whitepaper is located in the ASP folder. 2. Upload all files to your server It is important that the HanengCharts.asp, HanengCharts_Database.mdb and HanengCharts3.jar are in the same directory. 3. Run the HanengCharts.asp file to see the result Make sure that your ASP server is running and that you run the file through a browser with the URL being: It should now show up like this: 4. The code for HanengCharts.asp <HTML> <BODY> <!-- Start HanengCharts Code --> <CENTER> <APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260> <PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN"> <PARAM NAME="ChartType" VALUE="3dbar"> <% 'This will connect us to the Access database Db = "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" Db = Db & Server.MapPath("HanengCharts_Database.mdb") & ";" 'Use the line below instead if you want to use SQL Server 'Db = "DSN=Your_DSN_Name_Here; UID=Your_User_Name_Here; PWD=Your_Password_Here" 'Now we open the connection to the database Set MyConn = Server.CreateObject("ADODB.Connection") MyConn.Open Db 'Here we do a SQL query that will grab the data from the database 'In this case we want to access the data from the Products table SQL_query = "SELECT * FROM Products" Set RS = MyConn.Execute(SQL_query) 'We need to label each Parameter with it's own number, this 'variable will start at 1 and increase by 1 for each parameter pair we output ParameterCounter = 1 'Now it is time to loop through the database results and output them in 'a format that HanengCharts understands WHILE NOT RS.EOF %> <PARAM NAME="Text_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("ProductName"))%>"> <PARAM NAME="Value_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("Sold"))%>"> <% ParameterCounter = ParameterCounter + 1 RS.MoveNext WEND 'We then close the results and the database connection RS.Close Set RS = nothing MyConn.Close Set MyConn = nothing %> </APPLET> </CENTER> <!-- End HanengCharts Code --> </BODY> </HTML> More information The MS Access table Products looks like this: ![]() ProductName is of data type Text and Sold is a Number. Product_ID is just an Autonumber to keep each row unique, it is not used in creating the chart. This is what you will see if you choose View -> Source in your browser after running the script: <HTML> <BODY> <!-- Start HanengCharts Code --> <CENTER> <APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260> <PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN"> <PARAM NAME="ChartType" VALUE="3dbar"> <PARAM NAME="Text_1" VALUE="Light Edition"> <PARAM NAME="Value_1" VALUE="75"> <PARAM NAME="Text_2" VALUE="Standard Edition"> <PARAM NAME="Value_2" VALUE="42"> <PARAM NAME="Text_3" VALUE="PRO Edition"> <PARAM NAME="Value_3" VALUE="78"> <PARAM NAME="Text_4" VALUE="Deluxe Edition"> <PARAM NAME="Value_4" VALUE="32"> <PARAM NAME="Text_5" VALUE="Enterprise Edition"> <PARAM NAME="Value_5" VALUE="15"> </APPLET> </CENTER> <!-- End HanengCharts Code --> </BODY> </HTML> ![]() ![]() |