HanengCharts - Easy to use Charts

Questions? Email us: sales@haneng.com

HanengCharts & CGI 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 CGI to generate charts based on form information or data stored in a database.

Download:
You can download the sample HanengCharts applet and the scripts mentioned in this whitepaper: Download

Example 1: CGI (PERL) and a HTML form
This example uses a regular HTML form where the visitor can insert some values. The CGI 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.cgi">
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.cgi is a PERL script that receives the data from Form.html and generates the HTML needed by HanengCharts to display a chart:

#!/usr/bin/perl
print "Content-type:text/html\n\n";

read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);
foreach $pair (@pairs) {
    ($name, $value) = split(/=/, $pair);
    $value =~ tr/+/ /;
    $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
    $FORM{$name} = $value;
}

@parm = ();
if ($FORM{'text_1'} ne "") {
   push(@parm, "<PARAM NAME=\"text_1\" VALUE=\"$FORM{'text_1'}\"><PARAM NAME=\"value_1\" VALUE=\"$FORM{'value_1'}\">");
}
if ($FORM{'text_2'} ne "") {
   push(@parm, "<PARAM NAME=\"text_2\" VALUE=\"$FORM{'text_2'}\"><PARAM NAME=\"value_2\" VALUE=\"$FORM{'value_2'}\">");
}
if ($FORM{'text_3'} ne "") {
   push(@parm, "<PARAM NAME=\"text_3\" VALUE=\"$FORM{'text_3'}\"><PARAM NAME=\"value_3\" VALUE=\"$FORM{'value_3'}\">");
}
if ($FORM{'text_4'} ne "") {
   push(@parm, "<PARAM NAME=\"text_4\" VALUE=\"$FORM{'text_4'}\"><PARAM NAME=\"value_4\" VALUE=\"$FORM{'value_4'}\">");
}
if ($FORM{'text_5'} ne "") {
   push(@parm, "<PARAM NAME=\"text_5\" VALUE=\"$FORM{'text_5'}\"><PARAM NAME=\"value_5\" VALUE=\"$FORM{'value_5'}\">");
}

print <<EndHTML;
<HTML>
<BODY>
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="30DAYDEMO-MYUTG3S9tQGXWC">
<PARAM NAME="ChartType" VALUE="pie">
$parm[0]
$parm[1]
$parm[2]
$parm[3]
$parm[4]
</APPLET>
</BODY>
</HTML>

EndHTML

First statement is for specifying PERL's library and second to prepare format for HTML display. The next 3 statements are for getting all input data from the HTML form and splitting it. It prepares a query to get values of param and value fields from the chart table. The following statement is to array parm and initialise it. Then we prepare and insert 'PARAM' card in array parm using values of 'text_%' and 'value_%'. It then outputs the HTML code to call the applet using the parm values in @parm array.

Example 2: CGI (PERL) and a database
piedb.cgi: In this example we connect to a database, retrieves the data we want to make a graph of using a regular SQL statement and generate the HTML needed by HanengCharts to make the chart:

#!/usr/bin/perl
use DBI;
my $dsn = "DBI:DBDRIVER:database=DBNAME;host=localhost";
my $dbh = DBI->connect($dsn, 'username', 'password',
{RaiseError => 1}) ||
die $DBI::errstr;
my $sth = $dbh->prepare(qq{ SELECT param, value FROM chart });

$sth->execute  || die "Error fetching data: $DBI::errstr";
@val = ();
@txt = ();
while (my ($param, $value) = $sth->fetchrow_array) {
     push(@val, $value);
push(@txt, $param);
}
@parm = ();
$J=0;
for ($I=0; $I<5;$I++) {
$J=$I+1;
if ($txt[$I] ne "") {
   push(@parm, "<PARAM NAME=\"text_$J\" VALUE=\"$txt[$I]\"><PARAM NAME=\"value_$J\" VALUE=\"$val[$I]\">");
}
}
print "Content-type:text/html\n\n";
print <<EndHTML;
<HTML>
<BODY>
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="30DAYDEMO-MYUTG3S9tQGXWC">
<PARAM NAME="ChartType" VALUE="pie">
$parm[0]
$parm[1]
$parm[2]
$parm[3]
$parm[4]
</APPLET>
</BODY>
</HTML>

EndHTML
$dbh->disconnect;

The script uses perl DBI (Database Interface) library to make database connection. First it defines the data source, as follows: $dsn = "DBI:DBDRIVER:database=DBNAME;host=localhost";
where DBRIVER is the database driver:

DBI:mysql --- for MySql database

DBI:Oracle --- for Oracle

DBI:ODBC --- for ODBC
DBNAME is the name of the database. host=localhost identifies that the database exists on the local host where this script is executed.

The second statement creates a database handle objects by opening a connection to the database, as follows:
$dbh = DBI->connect($dsn, 'username', 'password', {RaiseError => 1}) || die
$DBI::errstr;

Where username and password are the userid and user password to connect to the database. If it cannot open the connection, it will display an error and exit. The next statement creates a statement handle objects object, as follows:
my $sth = $dbh->prepare(qq{ SELECT param, value FROM chart });
It prepares a query to get values of param and value fields from the chart table. The query statement is executed, as follows:
$sth->execute || die "Error fetching data: $DBI::errstr";
If the query is successfull, it will return rows in $sth.

In the next 2 statements, the script defines two arrays @val and @txt. The values of 'param' and 'value' fields for every returned row from the database, are inserted into the arrays @val and @txt. The rows are fetched by executing: $sth->fetchrow_array method of $sth object in the while loop.

In the next statments it initializes another array @parm with the values from @txt and @val arrays, as follows:
@parm[0] = <PARAM NAME="text_1" VALUE="$txt[0]"><PARAM NAME="value_1" VALUE="$val[$0]">
@parm[1] = <PARAM NAME="text_2" VALUE="$txt[1]"><PARAM NAME="value_2" VALUE="$val[$1]">
@parm[2] = <PARAM NAME="text_3" VALUE="$txt[2]"><PARAM NAME="value_3" VALUE="$val[$2]">
@parm[3] = <PARAM NAME="text_4" VALUE="$txt[3]"><PARAM NAME="value_4" VALUE="$val[$3]">
@parm[4] = <PARAM NAME="text_5" VALUE="$txt[4]"><PARAM NAME="value_5" VALUE="$val[$4]">

It then outputs the HTML code to call the applet using the parm values in @parm array. The result should look something like this:

Back to the Devlopers Zone