Questions? Email us:
sales@haneng.com
|
|
HanengCharts & HTML
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 whitepaper will give you some sample code and explanations on how
you can use HanengCharts with HTML to generate charts.
Download 30 day demo
If you haven't purchased HanengCharts yet you can download our 30 day fully working demo
to test these scripts.
The code
All you have to do to use HanengCharts on your webpage is to
copy the HanengCharts3.jar file to the same directory as your HTML page.
Then add the following code to your HTML page using your favorite HTML editor.
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="30DAYDEMO-MZVULBWRF7VTF7">
<PARAM NAME="ChartType" VALUE="3dpie">
<PARAM NAME="Value_1" VALUE="40">
<PARAM NAME="Value_2" VALUE="50">
<PARAM NAME="Value_3" VALUE="60">
<PARAM NAME="Text_1" VALUE="Sales 1">
<PARAM NAME="Text_2" VALUE="Sales 2">
<PARAM NAME="Text_3" VALUE="Sales 3">
</APPLET>
The result will look like this:
Place the code between the <BODY> and </BODY> tags where you want the chart to apear.
(You need to have <HTML> and <BODY> tags before the code if you don't already have it, and
</BODY> and </HTML> tags after the code if you don't have that)
Editing the chart
You can edit the values used to create each slice of the pie chart and the
legend text by changing the values for the PARAM VALUE tags.
In the code below we have changed all the values:
<APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=460 HEIGHT=260>
<PARAM NAME="LicenseKey" VALUE="30DAYDEMO-MZVULBWRF7VTF7">
<PARAM NAME="ChartType" VALUE="3dpie">
<PARAM NAME="Value_1" VALUE="2000">
<PARAM NAME="Value_2" VALUE="1000">
<PARAM NAME="Value_3" VALUE="500">
<PARAM NAME="Text_1" VALUE="Share of our visitors from USA (2000 visitors)">
<PARAM NAME="Text_2" VALUE="Share of our visitors from Europe (1000 visitors)">
<PARAM NAME="Text_3" VALUE="Share of our visitors from Asia (500 visitors)">
</APPLET>
The pie chart will now look like this:
See the difference? You can also add more parameters to add more
values, more labels etc. You can also change the colors used in the chart and the size of the chart.
Here is a two examples:
Change the size of the chart: Just change the width and heigt parameters in the APPLET tag.
The size is measured in pixels.
Change chart type: Change the value of the ChartType PARAM tag from 3dpie to the chart type you want.
See the documentation for valid chart type names. Please note
that the multi charts need a different set of value and text parameters.
You can find all the parameters for each chart in the documentation.
Back to the Developers Zone
|
|