![]() ![]() ![]() 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. Unzip the download and 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 DataBaseVB.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: ![]() ![]() ![]() Example 1: Simple Form (PieVB.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 PieVB.aspx: Show sample code in: VB.Net | C# <%@ Page Language="VB" %> <html> <body> <script runat="server"> Sub Page_Load(Source As Object, E As EventArgs) 'Hide chart until we got form data Chart.Visible = false 'Form submitted If IsPostBack Then 'Show chart since we have a form post Chart.Visible = true 'Get form data ChartData.Text = "" Dim i As Integer Dim ValueParameter As TextBox Dim TextParameter As TextBox For i=1 To 5 ValueParameter = FindControl("Value_" & i) If Len(ValueParameter.Text) > 0 Then ChartData.Text = ChartData.Text & "<PARAM NAME=""Value_" & i & """ VALUE=""" & ValueParameter.Text & """>" TextParameter = FindControl("Text_" & i) If Len(TextParameter.Text) > 0 Then ChartData.Text = ChartData.Text & "<PARAM NAME=""Text_" & i & """ VALUE=""" & TextParameter.Text & """>" End If End If Next End If End Sub </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) (DatabaseVB.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 DataBaseVB.aspx file to see the result It should now show up like this: The code for DataBaseVB.aspx Show sample code in: VB.Net | C# <%@ Page Language="VB" Debug="true"%> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.OleDb" %> <html> <body> <script runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Dim Conn as OLEDBConnection Dim Rdr as OLEDBDataReader Dim strSQL as string Dim ParameterData AS String Dim ParameterCounter AS Integer 'ConnectString needed to connect to our Access Database using DSN-less connection Dim strConn as string ="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA SOURCE=" strConn &= server.mappath("HanengCharts_Database.mdb") & ";" 'The SQL Query that gives us the data we want strSQL="select * from products" Conn=New OLEDBConnection(strConn) Conn.Open() 'Connect to database and execute our SQL Query Dim objCommand as OleDbCommand objCommand = New OleDbCommand(strSQL, Conn) Dim objDataReader as OleDbDataReader objDataReader = objCommand.ExecuteReader(CommandBehavior.CloseConnection) dgResults.DataSource = objDataReader 'Create parameters for HanengCharts ParameterData = "" ParameterCounter = 0 While objDataReader.Read() ParameterCounter = ParameterCounter + 1 ParameterData = ParameterData & "<PARAM NAME=""Text_" & ParameterCounter & """ VALUE=""" & objDataReader("ProductName") & """>" ParameterData = ParameterData & "<PARAM NAME=""Value_" & ParameterCounter & """ VALUE=""" & objDataReader("Sold") & """>" End While ChartData.Text = ParameterData 'Close the datareader/db connection objDataReader.Close() Conn.Close() End Sub </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 (XmlVB.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 XmlVB.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 XmlVB.aspx Show sample code in: VB.Net | C# <%@ Import Namespace="System.Data" %> <%@ Page Language="VB" Debug="true" %> <script runat="server"> Sub Page_Load If Not Page.IsPostBack Then dim DS = New DataSet DS.ReadXml(MapPath("ChartData.xml")) ChartData.DataSource = DS ChartData.DataBind() End If End Sub </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_<%#Container.DataItem("id")%>" VALUE="<%#Container.DataItem("text")%>"> <PARAM NAME="Value_<%#Container.DataItem("id")%>" VALUE="<%#Container.DataItem("value")%>"> </ItemTemplate> </asp:Repeater> </APPLET> </asp:PlaceHolder> <!-- End HanengCharts Code --> </form> </body> </html> |