graph chart

Stacked Vertical Bar Graph Examples

Applet Example 1

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.

Your Browser is not Java enabled !
To enable Java on your browser please install a Java Virtual Machine from the following page http://www.java.com

 

and here is the HTML code,

<applet code="SVbarchartApplet.class" archive="SVbarchart.jar" width="450" height="440" mayscript>

<!-- Start Up Parameters -->
<PARAM name="LOADINGMESSAGE" value="Creating Chart - Please Wait.">
<PARAM name="STEXTCOLOR" value="0,0,100">
<PARAM name="STARTUPCOLOR" value="255,255,255">

<!-- Character Encoding -->
<PARAM name="charset" value="8859_1">

<!-- 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="false">
<PARAM name="gradientfill" value="true">

<!-- Chart Characteristics -->
<PARAM name="nCols" value="4">
<PARAM name="nRows" value="6">
<PARAM name="ndecplaces" value="0">
<PARAM name="nSeries" value="3">
<PARAM name="chartScale" value="20000">
<PARAM name="chartStartY" value="0">
<PARAM name="labelOrientation" value="0">
<PARAM name="labelsY" value="390">
<PARAM name="labelsY_offset" value="15">
<PARAM name="bar_spacing" value="25">
<PARAM name="barwidth" value="40">
<PARAM name="depth3D" value="20">
<PARAM name="linkcursor" value="hand">
<PARAM name="BackgroundColor" value="White">
<PARAM name="barOutlineColor" value="black">

<!-- Grid properties -->
<PARAM name="gridxpos" value="70">
<PARAM name="gridypos" value="375">
<PARAM name="vSpace" value="30">
<PARAM name="gridStyle" value="2">
<PARAM name="gridColor" value="50,50,50">
<PARAM name="axisColor" value="0,0,255">
<PARAM name="floorColor" value="50,50,50">
<PARAM name="gridbgcolor" value="#EEEEFF">
<PARAM name="gridbgimage" value=" ">

<!-- Label and popup value properties -->
<PARAM name="xlabel_font" value="Arial,N,12">
<PARAM name="ylabel_font" value="Arial,I,10">
<PARAM name="popupfont" value="Arial,N,10">
<PARAM name="labelColor" value="75,75,125">
<PARAM name="popupbgcolor" value="255,255,200">
<PARAM name="popup_pre" value="$">
<PARAM name="popup_post" value=" ">
<PARAM name="ylabel_pre" value="$">
<PARAM name="ylabel_post" value=" ">
<PARAM name="thousandseparator" value=",">

<!-- Bar Labels -->
<PARAM name="label1" value="Quarter 1">
<PARAM name="label2" value="Quarter 2">
<PARAM name="label3" value="Quarter 3">
<PARAM name="label4" value="Quarter 4">

<!-- Legend Information -->
<PARAM name="legendfont" value="Arial,N,10">
<PARAM name="legendposition" value="285,50">
<PARAM name="legendtitle" value="Product Range">
<PARAM name="LegendBackground" value="240,240,240">
<PARAM name="LegendBorder" value="125,125,125">
<PARAM name="LegendtextColor" value="50,50,50">

<!-- Titles - Main, x and y -->
<!-- text|xpos,ypos|Font|Color -->
<PARAM name="title" value="Sales by Quarter|50,25|Arial,BI,18|130,130,180">
<PARAM name="xtitle" value="Quarter|200,435|Arial,B,16|130,130,180">
<PARAM name="ytitle" value="Sales Value|5,200|Arial,B,16|130,130,180">

<!-- Series Data -->
<!-- series color|legend label|Link URL|Target Frame -->
<PARAM name="series1" value="199,199,199|Product X|./images/productX.gif|X">
<PARAM name="series2" value="200,100,100|Product Y|./images/productY.gif|Y">
<PARAM name="series3" value="100,100,200|Product Z|./images/productZ.gif|Z">

<!-- Target Lines -->
<!-- Color|style|value|label|font -->
<!-- <PARAM name="target1" value="#990000|4|28000|Break Even|Arial,N,10"> -->
<!-- <PARAM name="target2" value="#007700|1|55000|Target|Arial,N,10"> -->

<!-- Free Form Text -->
<!-- text|xpos,ypos|Font|Color -->
<PARAM name="text1" value="Note :|125,60|Arial,N,12|0,0,175">
<PARAM name="text2" value="New product range|125,75|Arial,N,12|50,50,50">
<PARAM name="text3" value="launched during|125,90|Arial,N,12|50,50,50">
<PARAM name="text4" value="quarter 2.|125,105|Arial,N,12|50,50,50">

<!-- Images -->
<!-- Image URL, x, y -->
<PARAM name="image1" value="./images/productY.gif,375,85">
<PARAM name="image2" value="./images/productX.gif,375,110">
<PARAM name="image3" value="./images/productZ.gif,375,135">


<!-- Bar Data -->
<!-- value,URL,Target Frame -->
<PARAM name="data1series1" value="34000,./images/productX.gif,_self">
<PARAM name="data2series1" value="34900,./images/productX.gif,_self">
<PARAM name="data3series1" value="52000">
<PARAM name="data4series1" value="27600">

<PARAM name="data1series2" value="14000,./images/productY.gif,_self">
<PARAM name="data2series2" value="14900,./images/productY.gif,_self">
<PARAM name="data3series2" value="12000,./images/productY.gif,_self">
<PARAM name="data4series2" value="16600,./images/productY.gif,_self">

<PARAM name="data2series3" value="34100,./images/productZ.gif,_self">
<PARAM name="data3series3" value="52900,./images/productZ.gif,_self">
<PARAM name="data4series3" value="56650,./images/productZ.gif,_self">

Your Browser is not Java enabled !<br>
To enable Java on your browser please install a Java Virtual Machine from the following page <a href="http://www.java.com">http://www.java.com</a>


</applet>

 

 

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

Note: If you are using the evaluation version then in the applet a pop-up window will appear upon the startup and an evaluation message will be incorporated by the servlet. Both these features have been removed from the licensed version. Licensing information can be found at http://www.jpowered.com/graph_chart/index.htm

 

 

 

<< back to Examples Index

<< back to Getting Started

Getting Started

Documentation

Examples

Tutorials

Common Problems

Purchase

Bar Graph Home

 

Graph & Charting

Pie Chart
Line Graph
Stacked Vertical Bar Graph
Stacked Bar Graph
Horizontal Bar Graph
more...

 

Advanced Data Grid Control