HanengCharts & ASP.Net
HanengCharts Whitepaper


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.Net to generate charts based on form information, data stored in a database or data stored in a XML file with both VB.Net and C#.


How to Run the Examples:

1. Locate the sample files
The sample files are in the ASP.Net folder

2. Upload all files to your server
It is important that ALL the files are in the same directory.

3. Run the sample .aspx files (for example DataBaseCS.aspx) to see the result
Make sure that your web server is running and that you run the file through a browser with the URL being: http://[something]/DataBaseCS.aspx and NOT file:///[something]/DataBaseCS.aspx


Example 1: Simple Form (PieCS.aspx)
In this example we use a single ASP.Net page to collect data from the user in a form and when this form is submitted we will take the form data and generate a pie chart.

The form 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 numeric value that will be used in the pie chart.

Here is the code for the page PieCS.aspx:
Show sample code in: VB.Net | C#

<%@ Page Language="C#" %>
<HTML>
<BODY>

<script runat="server">
void Page_Load(Object Source, EventArgs E) {

  //Hide chart until we got form data
  Chart.Visible = false;

  //Form submitted
  if(IsPostBack) {

    //Show chart since we have a form post
    Chart.Visible = true;

    //Get form data
    ChartData.Text = "";
    for(int i=1; i<=5; i++) {
      TextBox ValueParameter = (TextBox)this.FindControl("Value_" + i);
      if(ValueParameter.Text.Length > 0) {
        ChartData.Text = ChartData.Text + "<PARAM NAME=\"Value_" + i + "\" VALUE=\"" + ValueParameter.Text + "\">";
        TextBox TextParameter = (TextBox)this.FindControl("Text_" + i);
        if(TextParameter.Text.Length > 0) {
          ChartData.Text = ChartData.Text + "<PARAM NAME=\"Text_" + i + "\" VALUE=\"" + TextParameter.Text + "\">";
        }
      }
    }
  }

}
</script>

<!-- Start HanengCharts Code -->
<asp:PlaceHolder runat="server" id="Chart">

<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN">
<PARAM NAME="ChartType" VALUE="pie">

<asp:label runat="server" id="ChartData"></asp:label>

</APPLET>

</asp:PlaceHolder>
<!-- End HanengCharts Code -->

<form runat="server" id="ChartForm">
Text 1: <asp:textbox runat="server" id="Text_1" size=20 /><BR>
Value 1: <asp:textbox runat="server" id="Value_1" size=5 /><BR>
Text 2: <asp:textbox runat="server" id="Text_2" size=20 /><BR>
Value 2: <asp:textbox runat="server" id="Value_2" size=5 /><BR>
Text 3: <asp:textbox runat="server" id="Text_3" size=20 /><BR>
Value 3: <asp:textbox runat="server" id="Value_3" size=5 /><BR>
Text 4: <asp:textbox runat="server" id="Text_4" size=20 /><BR>
Value 4: <asp:textbox runat="server" id="Value_4" size=5 /><BR>
Text 5: <asp:textbox runat="server" id="Text_5" size=20 /><BR>
Value 5: <asp:textbox runat="server" id="Value_5" size=5 /><BR>
<input type="submit" value="Display chart" />
</form>

</BODY>
</HTML>





Example 2: ASP.Net with MS Access (or MS SQL Server) (DatabaseCS.aspx)
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.

Run the DataBaseCS.aspx file to see the result
It should now show up like this:


The code for DataBaseCS.aspx
Show sample code in: VB.Net | C#

<%@ Page Language="C#" Debug="true"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<html>
<body>
<script runat="server">
void Page_Load(Object Source, EventArgs E) {

  //ConnectString needed to connect to our Access Database using DSN-less connection
  string strConn = "PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA SOURCE=";
  strConn = strConn + Server.MapPath("HanengCharts_Database.mdb") + ";";

  //The SQL Query that gives us the data we want
  string strSQL = "select * from products";

  //Connect to database and execute our SQL Query
  OleDbConnection Conn = new OleDbConnection(strConn);
  Conn.Open();
  OleDbCommand objCommand = new OleDbCommand(strSQL, Conn);
  OleDbDataReader objDataReader = objCommand.ExecuteReader(CommandBehavior.CloseConnection);
  dgResults.DataSource = objDataReader;

  //Create parameters for HanengCharts
  string ParameterData = "";
  int ParameterCounter = 0;
  while(objDataReader.Read()) {
    ParameterCounter++;
    ParameterData += "<PARAM NAME=\"Text_"+ParameterCounter+"\" VALUE=\""+objDataReader["ProductName"]+"\">";
    ParameterData += "<PARAM NAME=\"Value_"+ParameterCounter+"\" VALUE=\""+objDataReader["Sold"]+"\">";
  }
  ChartData.Text = ParameterData;

  //Close the datareader/db connection
  objDataReader.Close();
  Conn.Close();
}
</script>
<html><head>
<title>HanengCharts ASP.Net Database Example</title>
</head>
<body>


<asp:DataGrid id="dgResults" runat="server" />

<!-- Start HanengCharts Code -->
<asp:PlaceHolder runat="server" id="Chart">

<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN">
<PARAM NAME="ChartType" VALUE="pie">

<asp:label runat="server" id="ChartData"></asp:label>

</APPLET>

</asp:PlaceHolder>
<!-- 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.





Example 3: ASP.Net with DataSets (XmlCS.aspx)
In this example we will use a ASP.Net DataSet to create a 2D Pie chart using a XML file as our data source. When you run the file XmlCS.aspx you should see the resulting pie chart:


Lets have a look at the XML file we used as a data source: ChartData.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<dataset>
  <datapoint id="1" text="Bob Dylan" value="1090" />
  <datapoint id="2" text="Bonnie Tyler" value="990" />
  <datapoint id="3" text="Dolly Parton" value="890" />
  <datapoint id="4" text="Eros Ramazzotti" value="1020" />
</dataset>

The code for XmlCS.aspx
Show sample code in: VB.Net | C#

<%@ Import Namespace="System.Data" %>
<%@ Page Language="C#" Debug="true"%>

<script runat="server">
void Page_Load(Object Source, EventArgs E) {
  if(!Page.IsPostBack) {
    DataSet DS = new DataSet();
    DS.ReadXml(MapPath("ChartData.xml"));
    ChartData.DataSource = DS;
    ChartData.DataBind();
  }
}
</script>
<html>
<body><form runat="server">


<!-- Start HanengCharts Code -->
<asp:PlaceHolder runat="server" id="Chart">

<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN">
<PARAM NAME="ChartType" VALUE="2dpie">
<PARAM NAME="Title" VALUE="CD Sales by Artist">

<asp:Repeater id="ChartData" runat="server">
<ItemTemplate>
<PARAM NAME="Text_<%#DataBinder.Eval(Container.DataItem,"id") %>" VALUE="<%#DataBinder.Eval(Container.DataItem,"text") %>">
<PARAM NAME="Value_<%#DataBinder.Eval(Container.DataItem,"id") %>" VALUE="<%#DataBinder.Eval(Container.DataItem,"value") %>">
</ItemTemplate>
</asp:Repeater>
</APPLET>

</asp:PlaceHolder>
<!-- End HanengCharts Code -->

</form>
</body>
</html>