HanengCharts - Easy to use Charts

Questions? Email us: sales@haneng.com

HanengCharts Sample Code Multi HanengCharts with ASP and Access

Introduction
If you have not read the HanengCharts & ASP whitepaper I recommend that you do so before looking at this sample. This sample code will show you how to use ASP to get data from an Access database and use that data to create a multi chart (e.g. a chart with more than one line).

Download:
You can download the sample scripts and the database mentioned in this sample: Download

How to install this script 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. Download the Sample files
Download the sample scripts and the database mentioned in this sample: Download

2. Unzip the download and upload all files to your server
It is important that the HanengCharts_Multi.asp, HanengCharts_Database_Multi.mdb and HanengCharts3.jar are in the same directory.

3. Run the HanengCharts_Multi.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: http://[something]/HanengCharts_Multi.asp and NOT file:///[something]/HanengCharts_Multi.asp
It should now show up like this:

4. The code for HanengCharts_Multi.asp
<HTML>
<BODY>


<CENTER>
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=500 HEIGHT=350>
<PARAM NAME="LicenseKey" VALUE="Insert Your License Key Here">
<PARAM NAME="ChartType" VALUE="multiline">
<PARAM NAME="Title" VALUE="Ed's Grocery Store Sales">
<PARAM NAME="XAxisName" VALUE="Days">
<PARAM NAME="YAxisName" VALUE="Units Sold">
<PARAM NAME="LineThickness" VALUE="2">
<PARAM NAME="DataSet_a" VALUE="Fish Fingers">
<PARAM NAME="DataSet_b" VALUE="Hamburger Patties">
<PARAM NAME="DataSet_c" VALUE="Cheddar Cheese">
<PARAM NAME="DataSet_d" VALUE="Banans">
<PARAM NAME="DataSet_e" VALUE="Ice Cream">
<PARAM NAME="DataSet_f" VALUE="Instant Coffee">

<%
'This will connect us to the Access database
Db = "Driver={Microsoft Access Driver (*.mdb)}; DBQ="
Db = Db & Server.MapPath("HanengCharts_Multi.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 Sales table
'ordered by the Day field in ascending order (from low to high)
SQL_query = "SELECT * FROM Sales ORDER BY Day ASC" 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("Day"))%>">
  <PARAM NAME="Value_a_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("FishFingers"))%>">
  <PARAM NAME="Value_b_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("HamburgerPatties"))%>">
  <PARAM NAME="Value_c_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("CheddarCheese"))%>">
  <PARAM NAME="Value_d_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("Bananas"))%>">
  <PARAM NAME="Value_e_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("IceCream"))%>">
  <PARAM NAME="Value_f_<%=ParameterCounter%>" VALUE="<%=TRIM(RS("InstantCoffee"))%>">
  <%
  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>


</BODY>
</HTML>

Multi 3D Bar Chart
To use a multi 3D bar chart instead of the multi line chart is very easy. Just change the ChartType parameter from multiline to multi3dbar and you will get this result instead:

Multi Filled Line Chart
To use a multi filled line chart instead of the multi line chart is also very easy. Just change the ChartType parameter from multiline to multifilledline and you will get this result instead:

More information
The MS Access table Sales looks like this:

All the fields are of data type Number except Sale_ID which 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>


<CENTER>
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=500 HEIGHT=350>
<PARAM NAME="LicenseKey" VALUE="Inert Your License Key Here">
<PARAM NAME="ChartType" VALUE="multiline">
<PARAM NAME="Title" VALUE="Ed's Grocery Store Sales">
<PARAM NAME="XAxisName" VALUE="Days">
<PARAM NAME="YAxisName" VALUE="Units Sold">
<PARAM NAME="LineThickness" VALUE="2">
<PARAM NAME="DataSet_a" VALUE="Fish Fingers">
<PARAM NAME="DataSet_b" VALUE="Hamburger Patties">
<PARAM NAME="DataSet_c" VALUE="Cheddar Cheese">
<PARAM NAME="DataSet_d" VALUE="Banans">
<PARAM NAME="DataSet_e" VALUE="Ice Cream">
<PARAM NAME="DataSet_f" VALUE="Instant Coffee">

  <PARAM NAME="Text_1" VALUE="1">
  <PARAM NAME="Value_a_1" VALUE="390">
  <PARAM NAME="Value_b_1" VALUE="324">
  <PARAM NAME="Value_c_1" VALUE="623">
  <PARAM NAME="Value_d_1" VALUE="453">
  <PARAM NAME="Value_e_1" VALUE="986">
  <PARAM NAME="Value_f_1" VALUE="585">

  <PARAM NAME="Text_2" VALUE="2">
  <PARAM NAME="Value_a_2" VALUE="456">
  <PARAM NAME="Value_b_2" VALUE="443">
  <PARAM NAME="Value_c_2" VALUE="786">
  <PARAM NAME="Value_d_2" VALUE="543">
  <PARAM NAME="Value_e_2" VALUE="722">
  <PARAM NAME="Value_f_2" VALUE="924">

  <PARAM NAME="Text_3" VALUE="3">
  <PARAM NAME="Value_a_3" VALUE="595">
  <PARAM NAME="Value_b_3" VALUE="348">
  <PARAM NAME="Value_c_3" VALUE="803">
  <PARAM NAME="Value_d_3" VALUE="512">
  <PARAM NAME="Value_e_3" VALUE="743">
  <PARAM NAME="Value_f_3" VALUE="951">

  <PARAM NAME="Text_4" VALUE="4">
  <PARAM NAME="Value_a_4" VALUE="587">
  <PARAM NAME="Value_b_4" VALUE="401">
  <PARAM NAME="Value_c_4" VALUE="798">
  <PARAM NAME="Value_d_4" VALUE="501">
  <PARAM NAME="Value_e_4" VALUE="855">
  <PARAM NAME="Value_f_4" VALUE="1006">

  <PARAM NAME="Text_5" VALUE="5">
  <PARAM NAME="Value_a_5" VALUE="370">
  <PARAM NAME="Value_b_5" VALUE="457">
  <PARAM NAME="Value_c_5" VALUE="841">
  <PARAM NAME="Value_d_5" VALUE="476">
  <PARAM NAME="Value_e_5" VALUE="768">
  <PARAM NAME="Value_f_5" VALUE="994">

</APPLET>
</CENTER>


</BODY>
</HTML>

Back to the Developers Zone