graph chart

2D / 3D Area Graph Examples

[ Graph Home ] [ Documentation ] [ Getting Started ] [ Solutions ]

Applet Example 1 - Multiple Series 3D

if you do not see the graph below then click here


Probably the simplest implementation, this example demonstrates setting up the graph in a web page so that both the configuration and graph data are read from the <PARAM> tags within the HTML page.

and here is the HTML code,

<applet code="AreaGraphApplet.class" archive="AreaGraph.jar" width="460" height="440">
<!-- Start Up Parameters -->
<param name="LOADINGMESSAGE" value="Area Graph Loading - Please Wait.">
<param name="STEXTCOLOR" value="0,0,100">
<param name="STARTUPCOLOR" value="255,255,255">

<!-- Chart Switches -->
<param name="3D" value="true">
<param name="grid" value="true">
<param name="axis" value="true">
<param name="ylabels" value="true">
<param name="outline" value="true">
<param name="legend" value="true">
<param name="autoscale" value="true">

<!-- Chart Characteristics -->
<param name="nPoints" value="12">
<param name="nRows" value="7">
<param name="vSpace" value="30">
<param name="nSeries" value="3">
<param name="hSpace" value="30">
<param name="gridxpos" value="75">
<param name="gridypos" value="350">
<param name="gridstyle" value="3">
<param name="depth3D" value="20">
<param name="ndecplaces" value="0">
<param name="labelOrientation" value="5">
<param name="labelsY" value="350">
<param name="labelsYpre" value="$">
<param name="labelsYpost" value=" ">

<param name="label1" value="January">
<param name="label2" value="February|0">
<param name="label3" value="March">
<param name="label4" value="April|0">
<param name="label5" value="May">
<param name="label6" value="June|0">
<param name="label7" value="July">
<param name="label8" value="August|0">
<param name="label9" value="September">
<param name="label10" value="October|0">
<param name="label11" value="November">
<param name="label12" value="December|0">

<!-- Font information -->
<param name="yFont" value="Arial,N,10">
<param name="xFont" value="Arial,N,10">

<!-- Color information -->
<param name="gridbg" value="#EECCFF">
<param name="BgColor" value="white">
<param name="gridcolor" value="#88AACC">
<param name="axiscolor" value="#88AACC">
<param name="floorcolor" value="0,100,170">
<param name="outlinecolor" value="0,0,0">
<param name="labelcolor" value="50,50,50">
<param name="Ycolor" value="50,50,50">

<!-- Legend -->
<param name="legendfont" value="Arial,N,10">
<param name="legendposition" value="300,5">
<param name="legendtitle" value="Products">
<param name="LegendBackground"value="#EEEEFF">
<param name="LegendBorder"value="0,50,175">
<param name="LegendtextColor"value="50,50,50">

<!-- Titles - Main, x and y -->
<!-- <PARAM name="title" value="text,xpos,ypos,font-type,font-style,font-size,Rcolor,Gcolor,Bcolor"> -->
<param name="title" value="Sales by Month|80,60|Arial,BI,18|100,100,200">
<param name="xtitle" value="Year 2002|200,420|Arial,B,16|100,100,200">
<param name="ytitle" value="Value $|10,300|Arial,B,16|100,100,200">

<!-- Free Form Text -->
<!-- <PARAM name="textn" value="text,xpos,ypos,font-type,font-style,font-size,Rcolor,Gcolor,Bcolor"> -->
<param name="text1" value="Note :|80,85|Arial,N,10|100,100,200">
<param name="text2" value="Product Z launched April|85,100|Arial,N,10|50,50,50">
<param name="text3" value="Product Y discontinued in October|85,115|Arial,N,10|50,50,50">

<!-- Series Data -->
<!-- <PARAM name="seriesN" value="series color|point style|Point Size|fill|legend label"> -->
<param name="series1" value="120,120,205|3|8|true|Product X">
<param name="series2" value="38,205,205|4|8|true|Product Y">
<param name="series3" value="255,194,95|5|8|true|Product Z">

<!-- Trend Lines -->
<!-- color|start point|end point|start value|end value|label|font -->
<!-- <PARAM name="trend1" value="0,0,0|7|12|2200|3300| Upper trend|Arial,B,12"> -->

<!-- Target Lines -->
<!-- color|style|start point|end point|value|label|font -->
<!-- <param name="target1" value="0,125,0|4|1|12|10500| Target|Arial,B,12"> -->
<!-- <param name="target2" value="125,0,0|4|1|12|8400| Break Even|Arial,B,12"> -->

<!-- Point Data -->
<!-- <PARAM name="dataNseriesN" value="value|URL|Target Frame"> -->
<param name="data1series1" value="3162">
<param name="data2series1" value="2516">
<param name="data3series1" value="2945">
<param name="data4series1" value="3980">
<param name="data5series1" value="5750">
<param name="data6series1" value="6230">
<param name="data7series1" value="4765">
<param name="data8series1" value="5636">
<param name="data9series1" value="5120">
<param name="data10series1" value="4365">
<param name="data11series1" value="5789">
<param name="data12series1" value="5623">
<param name="data1series2" value="6840">
<param name="data2series2" value="6704">
<param name="data3series2" value="3945">
<param name="data4series2" value="4780">
<param name="data5series2" value="4750">
<param name="data6series2" value="2230">
<param name="data7series2" value="1065">
<param name="data8series2" value="636">
<param name="data9series2" value="820">
<param name="data10series2" value="1500">
<param name="data11series2" value="1250">
<param name="data12series2" value="2250">
<param name="data1series3" value="1253">
<param name="data2series3" value="853">
<param name="data3series3" value="1253">
<param name="data4series3" value="2253">
<param name="data5series3" value="682">
<param name="data6series3" value="989">
<param name="data7series3" value="1920">
<param name="data8series3" value="1240">
<param name="data9series3" value="2240">
<param name="data10series3" value="1450">
<param name="data11series3" value="2808">
<param name="data12series3" value="2050">


For a full explanation of and range of values for the above parameters please see the Documentation - Configuration Options».

« back to Examples Index

« back to Getting Started

[ Graph Home ] [ Documentation ] [ Getting Started ] [ Solutions ]

Getting Started



Common Problems
This section describes and provides solutions to common problems.