main | documentation | examples | common questions | changes | licensing


EASYCHARTS DOCUMENTATION   :   OVERLAY CHARTS

1. Single overlays
2. Multiple overlays
3. Double ranges
4. Complex overlay chart

By using overlays, you can place one or more charts on top of another chart.

When placing a chart on top of another chart, the overlay chart only paints it's data, the legend, title and so on are not painted. The bottom chart (from here on called the base chart) paints the other chart elements such as labels and grids and controls the size of the chart.

You can overlay any chart or chart type on top of another chart. In an applet this is done using the overlay parameter. In a java application the chart is added using the addOverlayChart() method.

Adding an overlay chart in an applet:

<param name=overlay value="bar">
<param name=overlay value="line">
<param name=overlay value="pie">

The parameters of the overlay chart is set by adding an overlay_ prefix to each parameter.

<param name=overlay value="bar">
<param name=overlay_sampleValues value="20,10,40,30,50">
<param name=overlay_sampleColors value="red">


1. Single Overlays
This example adds a line chart on top of a bar chart. A line chart that is added on top of a bar chart will have it's grid adjusted so the line's sample points will correspond to the center of the bars.

Applet:

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="bar">
<param name=sampleValues value="10,20,30,40,50">
<param name=overlay value="line">
<param name=overlay_sampleValues value="20,10,40,30,45">
<param name=overlay_sampleColors value="red">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=bar&
width=200&
height=140&
sampleValues=10,20,30,40,50&
overlay=line&
overlay_sampleValues=20,10,40,30,45&
overlay_sampleColors=red
">

Java: 

// create base chart
double[] values = new double[] {10,20,30,40,50};
BarChart base = new BarChart();
base.setSampleCount(values.length);
base.setSampleValues(0, values);
base.setRange(0,50);

// create overlay chart
double[] overlay_values = new double[] {20,10,40,30,45};
LineChart overlay = new LineChart();
overlay.setSampleCount(overlay_values.length);
overlay.setSampleValues(0, overlay_values);
overlay.setSampleColor(0, Color.red);
		
// add overlay chart, the ranges of the overlay chart will
// automatically be adjusted to the base chart's range
base.addOverlayChart(overlay);


This example adds a bar chart on top of a line chart.

Applet: <applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="line">
<param name=sampleValues value="20,10,40,30,45">
<param name=overlay value="bar">
<param name=overlay_sampleValues value="10,20,30,40,50">
<param name=overlay_sampleColors value="red">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=line&
width=200&
height=140&
sampleValues=20,10,40,30,45&
overlay=bar&
overlay_sampleValues=10,20,30,40,50&
overlay_sampleColors=red&
">

Java: 

// create base chart
double[] values = new double[] {20,10,40,30,45};
LineChart base = new LineChart();
base.setSampleCount(values.length);
base.setSampleValues(0, values);
base.setRange(0,50);

// create overlay chart
double[] overlay_values = new double[] {10,20,30,40,50};
BarChart overlay = new BarChart();
overlay.setSampleCount(overlay_values.length);
overlay.setSampleValues(0, overlay_values);
overlay.setSampleColor(0, Color.red);
		
// add overlay chart
base.addOverlayChart(overlay);



This example adds a bar chart on top of another bar chart.

Applet: <applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="bar">
<param name=sampleValues value="10,20,30,40,50">
<param name=barWidth value="0.6">
<param name=overlay value="bar">
<param name=overlay_sampleValues value="28,46,34,45,37">
<param name=overlay_sampleColors value="red">
<param name=overlay_barWidth value="0.3">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=bar&
width=200&
height=140&
sampleValues=10,20,30,40,50&
barWidth=0.6&
overlay=bar&
overlay_sampleValues=28,46,34,45,37&
overlay_sampleColors=red&
overlay_barWidth=0.3&
">

Java: 

// create base chart
double[] values = new double[] {10,20,30,40,50};
BarChart base = new BarChart();
base.setSampleCount(values.length);
base.setSampleValues(0, values);
base.setRange(0,50);
base.setBarWidth(0.6);

// create overlay chart
double[] overlay_values = new double[] {28,46,34,45,37};
BarChart overlay = new BarChart();
overlay.setSampleCount(overlay_values.length);
overlay.setSampleValues(0, overlay_values);
overlay.setSampleColor(0, Color.red);
overlay.setBarWidth(0.3);
		
// add overlay chart
base.addOverlayChart(overlay);



2. Multiple Overlays
You can overlay multiple overlay charts by adding an index to the overlay parameter.

Applet:

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="bar">
<param name=sampleValues value="10,20,30,40,50">
<param name=barWidth value="0.6">
<param name=overlay0 value="bar">
<param name=overlay0_sampleValues value="28,46,34,45,37">
<param name=overlay0_sampleColors value="red">
<param name=overlay0_barWidth value="0.3">
<param name=overlay1 value="line">
<param name=overlay1_sampleValues value="16,18,24,35,27">
<param name=overlay1_sampleColors value="orange">
<param name=overlay1_stackedOn value="true">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=bar&
width=200&
height=140&
sampleValues=10,20,30,40,50&
barWidth=0.6&
overlay0=bar&
overlay0_sampleValues=28,46,34,45,37&
overlay0_sampleColors=red&
overlay0_barWidth=0.3&
overlay1=line&
overlay1_sampleValues=16,18,24,35,27&
overlay1_sampleColors=orange&
overlay1_stackedOn=true&
">

Java: 

// create base chart
double[] values = new double[] {10,20,30,40,50};
BarChart base = new BarChart();
base.setSampleCount(values.length);
base.setSampleValues(0, values);
base.setRange(0,50);
base.setBarWidth(0.6);

// create the first overlay chart
double[] overlay0_values = new double[] {28,46,34,45,37};
BarChart overlay0 = new BarChart();
overlay0.setSampleCount(overlay_values.length);
overlay0.setSampleValues(0, overlay0_values);
overlay0.setSampleColor(0, Color.red);
overlay0.setBarWidth(0.3);

// create the second overlay chart
double[] overlay1_values = new double[] {16,18,24,35,27};
LineChart overlay1 = new LineChart();
overlay1.setSampleCount(overlay_values.length);
overlay1.setSampleValues(0, overlay1_values);
overlay1.setSampleColor(0, Color.orange);
overlay1.setStackedOn(true);
		
// add overlay charts
int overlay0_index = base.addOverlayChart(overlay0);
int overlay1_index = base.addOverlayChart(overlay1);


Each overlay chart added is given an index. You can use this index to control the individual overlays:

removeOverlayChart(int index);
setOverlayChart(int index, Chart chart);
getOverlayChart(int index);
setOverlayChartOn(int index, boolean on);
isOverlayChartOn(int index);


3. Double Ranges
An overlay chart can use another range than the base chart. The ranges are controlled from the base chart and the overlay chart is configured to use a second range.

Applet:

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=200 height=140>
<param name=chart value="bar">
<param name=sampleValues value="10,20,30,40,50">
<param name=rangePosition value=left>
<param name=rangeColor value=blue>
<param name=rangeOn_2 value=true>
<param name=rangeColor_2 value=red>
<param name=rangeStep_2 value=100>
<param name=overlay value="line">
<param name=overlay_sampleValues value="623,765,176,825,438">
<param name=overlay_seriesRange_0 value="2">
<param name=overlay_sampleColors value="red">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
chart=bar&
width=200&
height=140&
sampleValues=10,20,30,40,50&
rangePosition=left&
rangeColor=blue&
rangeOn_2=true&
rangeColor_2=red&
rangeStep_2=100&
overlay=line&
overlay_sampleValues=623,765,176,825,438&
overlay_seriesRange_0=2&
overlay_sampleColors=red">

Java: 

// create the base chart
double[] values = new double[] {10,20,30,40,50};
BarChart base = new BarChart();
base.setSampleCount(values.length);
base.setSampleValues(0, values);
base.setRange(0,50);
base.setRangePosition(0, 0); // range 0 on the left side
base.setRangeColor(0, Color.blue);
base.setRangeOn(1, true); // turn on second range
base.setRangeColor(1, Color.red);

// create the overlay chart
double[] overlay_values = new double[] {623,765,176,825,438};
LineChart overlay = new LineChart();
overlay.setSampleCount(overlay_values.length);
overlay.setSampleValues(0, overlay_values);
overlay.setSampleColor(0, Color.red);

// configure the overlay chart's first series adjust 
// itself with the second range of the base chart
overlay.setSeriesRange(0, 2);

// add overlay chart, and set its upper range
base.addOverlayChart(overlay);
base.setRelativeRange(1, 1.0, 100);


4. Complex Overlay Chart
Here is a complex overlay chart example with many of the different chart features set and configured.

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=700 height=350>
<param name=chart value="bar">
<param name="sampleValues_0" value="4,2,6,12,15,14,24,32,32,44,37,64,
59,47,62,73,60,44,61,75,58">
<param name="seriesRange_0" value="2">
<param name="sampleLabels" value="jul 1999,aug 1999,sep 1999,oct 1999,nov 1999,
dec 1999,jan 2000,feb 2000,mar 2000,apr 2000,may 2000,jun 2000,jul 2000,
aug 2000,sep 2000,oct 2000,nov 2000,dec 2000,jan 2001,feb 2001,mar 2001">
<param name="sampleColors" value="blue, red">
<param name="valueLabelsOn" value="true">
<param name="valueLabelStyle" value="inside">
<param name="barLabelsOn" value="true">
<param name="barLabelAngle" value="270">
<param name="valueLinesOn" value="true">
<param name="chartTitle" value="Bike Sales">
<param name="legendOn" value="true">
<param name="legendPosition" value="top">
<param name="legendLabels" value="Count,Sales">
<param name="rangeOn_2" value="true">
<param name="rangeStep" value="1000">
<param name="rangeStep_2" value="10">
<param name="rangePosition" value="right">
<param name="rangePosition_2" value="left">
<param name="rangeAxisLabel" value="US Dollars">
<param name="rangeAxisLabelFont" value="Verdana, bold, 16">
<param name="rangeAxisLabelAngle" value="90">
<param name="rangeAxisLabel_2" value="Number of sales">
<param name="rangeAxisLabelAngle_2" value="270">
<param name="rangeLabelPrefix" value="$">
<param name="multiSeriesOn" value="true">
<param name="barWidth" value="0.6">
<param name="barOutlineOff" value="true">
<param name="overlay" value="line">
<param name="overlay_seriesCount" value="2">
<param name="overlay_sampleValues_1" value="1247,648,1794,2238,3185,3997,4176,9247,
8465,14982,12263,21847,23515,18344,20765,25047,18616,16327,19746,22547,11074">
<param name="overlay_sampleColors" value="red">
<param name="overlay_valueLabelsOn" value="true">
<param name="overlay_sampleHighlightOn" value="true">
<param name="overlay_sampleHighlightStyle" value="circle_opaque">
<param name="overlay_lineWidth" value="4">
</applet>


5. 3D Overlay Chart
Here is a 3D overlay chart. It is crated by setting 3D base line chart or bar chart with "barType" parameter set to "behind". The overlay charts can be either 2D or 3D. The last added overlay chart is displayed in front of the chart grid while the previous ones are pushed towards the back side of the grid in the order they were added.

Applet:

<applet code=com.objectplanet.chart.ChartApplet
 archive=chart.jar width=350 height=250>
<param name=chart value="bar">
<param name="sampleValues_0" value="4,2,6,12,15,14,24,32,32,44,37,64,
59,47,62,73,60,44,61,75,58">
<param name="seriesRange_0" value="2">
<param name="sampleLabels" value="jul 1999,aug 1999,sep 1999,oct 1999,nov 1999,
dec 1999,jan 2000,feb 2000,mar 2000,apr 2000,may 2000,jun 2000,jul 2000,
aug 2000,sep 2000,oct 2000,nov 2000,dec 2000,jan 2001,feb 2001,mar 2001">
<param name="sampleColors" value="blue, red">
<param name="valueLabelsOn" value="true">
<param name="valueLabelStyle" value="inside">
<param name="barLabelsOn" value="true">
<param name="barLabelAngle" value="270">
<param name="valueLinesOn" value="true">
<param name="chartTitle" value="Bike Sales">
<param name="legendOn" value="true">
<param name="legendPosition" value="top">
<param name="legendLabels" value="Count,Sales">
<param name="rangeOn_2" value="true">
<param name="rangeStep" value="1000">
<param name="rangeStep_2" value="10">
<param name="rangePosition" value="right">
<param name="rangePosition_2" value="left">
<param name="rangeAxisLabel" value="US Dollars">
<param name="rangeAxisLabelFont" value="Verdana, bold, 16">
<param name="rangeAxisLabelAngle" value="90">
<param name="rangeAxisLabel_2" value="Number of sales">
<param name="rangeAxisLabelAngle_2" value="270">
<param name="rangeLabelPrefix" value="$">
<param name="multiSeriesOn" value="true">
<param name="barWidth" value="0.6">
<param name="barOutlineOff" value="true">
<param name="overlay" value="line">
<param name="overlay_seriesCount" value="2">
<param name="overlay_sampleValues_1" value="1247,648,1794,2238,3185,3997,4176,9247,
8465,14982,12263,21847,23515,18344,20765,25047,18616,16327,19746,22547,11074">
<param name="overlay_sampleColors" value="red">
<param name="overlay_valueLabelsOn" value="true">
<param name="overlay_sampleHighlightOn" value="true">
<param name="overlay_sampleHighlightStyle" value="circle_opaque">
<param name="overlay_lineWidth" value="4">
</applet>

Servlet:

<img src="http://localhost:8080/servlet/com.objectplanet.chart.ChartServlet?
width=350&
height=250&
seriesCount=3&
sampleCount=11&
range=70&
barType=behind&
3DModeOn=true&
3DDepth=30&
overlay0=bar&
overlay0_sampleValues_0=15,25,30,15,15&
overlay0_sampleValues_1=10,15,40,35,15&
overlay0_seriesCount=2&
overlay0_sampleColors=%23dc2626df,%23267ec2df&
overlay0_barType=stacked&
overlay0_barShape=cylinder&
overlay1=spline&
overlay1_3DModeOn=true&
overlay1_sampleValues_0=30,35,45,50,45,30,25,28,32&
overlay1_sampleColors=%2335CE35af&
overlay1_line3DDepth=0.8&
overlay2=spline&
overlay2_3DModeOn=true&
overlay2_sampleValues_0=20,13,10,15,30,35,30,20,15&
overlay2_sampleColors=%23FE8500bb&
overlay2_stackedOn=true&
overlay2_line3DDepth=0.3&
chartBackground=%23B2D8FF|%23F5F6F7&
background=%23F5F6F7|%23B2D8FF&
chartForeground=%236a9bbd">

Java: 

import com.objectplanet.chart.*;
import com.objectplanet.chart.ext.SplineChart;

import java.awt.*;

public class Overlay {

    public static void main(String[] argv) {
        BarChart chart = new BarChart();

        chart.setSeriesCount(3);
        chart.setSampleCount(11);
        chart.setRange(0, 70);
        chart.setBarType(BarChart.BEHIND_BARS);
        chart.set3DModeOn(true);
        chart.set3DDepth(30);

        BarChart overlay0 = new BarChart(5);
        overlay0.setSeriesCount(2);
        overlay0.setSampleValues(0, new double[] {15,25,30,15,15});
        overlay0.setSampleValues(1, new double[] {10,15,40,35,15});
        overlay0.setSampleColors(new Color[] {new Color(0xdc, 0x26, 0x26, 0xdf), new Color(0x26, 0x7e, 0xc2, 0xdf)});
        overlay0.setBarType(BarChart.STACKED_BARS);
        overlay0.setBarShape(BarChart.CYLINDER);
        chart.addOverlayChart(overlay0);

        SplineChart overlay1 = new SplineChart();
        overlay1.setSampleCount(9);
        overlay1.set3DModeOn(true);
        overlay1.setSampleValues(0, new double[] {30,35,45,50,45,30,25,28,32});
        overlay1.setSampleColors(new Color[] {new Color(0x35, 0xCE, 0x35, 0xaf)});
        overlay1.setLine3DDepth(-1, 0.8);
        chart.addOverlayChart(overlay1);

        SplineChart overlay2 = new SplineChart();
        overlay2.setSampleCount(9);
        overlay2.set3DModeOn(true);
        overlay2.setSampleValues(0, new double[] {20,13,10,15,30,35,30,20,15});
        overlay2.setSampleColors(new Color[] {new Color(0xfe, 0x85, 0x00, 0xbb)});
        overlay2.setStackedOn(true);
        overlay2.setLine3DDepth(-1, 0.3);
        chart.addOverlayChart(overlay2);

        chart.setChartBackground(new Color(0xb2, 0xd8, 0xff));
        chart.setChartBackground2(new Color(0xf5, 0xf6, 0xf7));
        chart.setBackground(new Color(0xf5, 0xf6, 0xf7));
        chart.setBackground2(new Color(0xb2, 0xd8, 0xff));
        chart.setChartForeground(new Color(0x6a, 0x9b, 0xbd));

        com.objectplanet.chart.NonFlickerPanel p = new com.objectplanet.chart.NonFlickerPanel(new BorderLayout());
        p.add("Center", chart);
        Frame f = new Frame();
        f.add("Center", p);
        f.setSize(350,250);
        f.show();
    }
}


Copyright (C) 1998-2010 ObjectPlanet, Inc.
phone (+47) 2233 3360 fax (+47) 2233 3361