Chart API Examples Plugin

Last updated: Jan 20, 2006

Table of Contents

Prefix

How to run the examples?

1. Sample Charts written by API (org.eclipse.birt.chart.examples.api)

1.1- Use different renderers to present various types of charts (org.eclipse.birt.chart.examples.api.viewer)

1.1.1 SWING Renderer
1.1.2 SWT Renderer
1.1.3 Live Bar and Line Combination Chart
1.1.4 Dial Chart Viewer
1.1.5 Curve Fitting Chart Viewer
1.1.6 3D Chart Viewer

1.2- Databinding, Grouping and Sorting (org.eclipse.birt.chart.examples.api.data)

1.2.1 Bar Chart with multiple Y series
1.2.2 Line Chart with multiple Y axis
1.2.3 Bar Chart with grouping on Y axis
1.2.4 Pie Chart with min slice (Old)
1.2.5 Pie Chart with min slice
1.2.6 Bar Chart with sorting/grouping on X series

1.3- Data Format, Legend/Title/Plot Properties (org.eclipse.birt.chart.examples.api.format)

1.3.1 Chart with formatted X-axis (DateTime) / Y-axis (Number) labels
1.3.2 Chart with formatted X-series / Y-series values
1.3.3 Bar Chart colored by category
1.3.4 Chart with formatted Legend and Title
1.3.5 Pie chart with percentage values
1.3.6 Chart with customized Plot

1.4- Interactivity (org.eclipse.birt.chart.examples.api.interactivity)

1.4.1 Bar chart: Mouse_Click + Highlight_Series
1.4.2 Scatter chart: Mouse_Over + Show_Tooltip
1.4.3 Pie chart: Mouse_Down + URL_Redirect
1.4.4 Linechart: Mouse_Down + Toggle_Visibility

1.5- Script (org.eclipse.chart.examples.api.script)

1.5.1 JavaScript
1.5.2 Java

1.6- Style processor (org.eclipse.chart.examples.api.processor)

1.6.1 StyleProcessor

1.7- Preference page (org.eclipse.chart.examples.api.preference)

Please read the Help.htm file within the preference folder.

2. Sample Reports with Embeded Charts (org.eclipse.birt.chart.examples.report)

2.1 Use DE-API/Chart API to create reports with embedded charts (org.eclipse.birt.chart.examples.report.api)

2.1.1 Stock Analysis Report with embedded Stock chart and Bar chart
2.1.2 Sales Report with embedded Pie chart
2.1.3 Meter Chart

2.2 Use BIRT designer to create reports with embedded charts (org.eclipse.birt.chart.example.report.design)

2.2.1 Bar chart with JavaScript
2.2.2 Bar chart within Table group header
2.2.3 Dynamic Series Pie Chart

Prefix: How to run the examples?

Please set the following argument when running chart examples:

-DBIRT_HOME=D:\AllInOne\eclipse

AllInOne package is available to download in BIRT download page.

1.1.1 & 1.1.2 Swing / SWT Renderers

Use Swing render and SWT render to present the various types of charts (2D+2D with depth) respectively:

The renderers also provide "Transposed", "Percent" and "Logarithmic" attributes for the charts mentioned above.

1.1.3 Live Bar and Line Combination Chart

The example shows how to create a live chart. It contains a bar chart and a line chart. They share the same X-Axis, and the chart graphics is keeping changing according to the change of X-Axis. The example defines a background thread (extends TimerTask) that scrolls/refreshes the chart (offscreeen).

1.1.4 Dial Chart Viewer

The example shows 4 types of dial / meter charts. Meter charts desplays the current value of a certain measurement. The value is indicated by a pointer and the scale of the meter dial. The background of the meter can be divided into regions.

Single Dial, Multi Regions:
DialSeries seDial = (DialSeries) DialSeriesImpl.create();
DialRegion dregion1 = DialRegionImpl.create();
seDial.getDial().getDialRegions().add(dregion1);
....
seDial.getDial().getDialRegions().add(dregion2);
Multi Dials, Multi Regions:
DialSeries seDial1 = (DialSeries) DialSeriesImpl.create();
DialRegion dregion1 = DialRegionImpl.create();
seDial1.getDial().getDialRegions().add(dregion1);
....
seDial1.getDial().getDialRegions().add(dregion2);
...
DialSeries seDial2 = (DialSeries) DialSeriesImpl.create();
seDial2.getDial().getDialRegions().add(dregion1);
seDial2.getDial().getDialRegions().add(dregion2);
...
dialChart.setDialSuperimposition(true);
Single Dial, Single Region
DialSeries seDial = (DialSeries) DialSeriesImpl.create();
DialRegion dregion = DialRegionImpl.create();
seDial.getDial().getDialRegions().add(dregion);

Multi Dials, Single Region

DialSeries seDial1 = (DialSeries) DialSeriesImpl.create();
DialSeries seDial2 = (DialSeries) DialSeriesImpl.create();
dialChart.setDialSuperimposition(true);

1.1.5 Curve Fitting Chart Viewer

Curve Fitting feature will be available for Series of ChartWithAxes, including Bar, Line, Area, Scatter and Stock charts. The curve line shows the general trend of data values.

LineSeries ls = (LineSeries) LineSeriesImpl.create( );
ls.setCurve( true );

1.1.6 3D Chart Viewer

3D chart is supported by the types of Bar, Line and Area.

ChartWithAxes cwaBar = ChartWithAxesImpl.create( ); cwaBar.setDimension( ChartDimension.THREE_DIMENSIONAL_LITERAL );
......
Axis zAxis = AxisImpl.create( Axis.ANCILLARY_BASE );
xAxisPrimary.getAncillaryAxes( ).add( zAxis );
......

SeriesDefinition sdZ = SeriesDefinitionImpl.create( );
zAxis.getSeriesDefinitions( ).add( sdZ );

// Rotate the chart
cwaBar.setRotation( Rotation3DImpl.create( new Angle3D[]{
Angle3DImpl.create( -20, 45, 0 )} ) );

1.2.1 Bar Chart with multiple Y series

The example shows a bar chart with 2 Y-series. The 2 groups of datas has the same X-Series value, but different in Y-Series value, which could be acheived in the report designer as follows: Chart Builder -> Data -> Y Axis -> Set: Number of Series Definitions = 2.

yAxis.getSeriesDefinitions().add(ySeriesDefinition1);
yAxis.getSeriesDefinitions().add(ySeriesDefinition2);

1.2.2 Line Chart with multiple Y axis

The example shows a line chart with 2 Y axis. Each axis matches one of Y series, which could be acheived in the report designer as follows: Chart Builder -> Data -> X Axis -> Set: Number of Y Axes = 2.

Axis yAxisPrimary = cwaBar.getPrimaryOrthogonalAxis(xAxisPrimary);
yAxisPrimary.getSeriesDefinitions().add(sdY1);

Axis yAxis = AxisImpl.create(Axis.ORTHOGONAL);
xAxis.getAssociatedAxes( ).add( yAxis );
yAxis.getSeriesDefinitions().add(sdY2);

1.2.3 Bar Chart with grouping on Y axis

This example shows how to create a bar chart with mulitple Y series, which could be acheived in the report designer as follows: Chart Builder -> Data -> Y Axis -> Set: Series Grouping Key.

Axis axisBase = (Axis) ( (ChartWithAxes) cm ).getAxes( ).get( 0 ); // X-Axis
Axis axisOrth = (Axis) axisBase.getAssociatedAxes( ).get( 0 ); //Y-Axis
SeriesDefinition sdY = (SeriesDefinition) axisOrth.getSeriesDefinitions().get(0); //Y-Series

SeriesDefinition sdGroup = SeriesDefinitionImpl.create();
Query query = QueryImpl.create("row[\"Month\"]");
sdGroup.setQuery(query);

axisOrth.getSeriesDefinitions().clear(); // Clear the original Y-Series (sdY)
axisOrth.getSeriesDefinitions().add(0, sdGroup);
sdGroup.getSeries().add(sdY.getSeries().get(0));

1.2.4 Pie Chart with min slice (Old)

The pie chart itself does not have the "min slice" grouping feature yet, but the result could be achieved by using a query with a union in the chart dataset. Here is an example of such an SQL Query that groups values by category, and where the minimum slice value is 10:


Select Product, sum (Product_sales) as totalSales
From productTable
Group by Product
Having sum(Product_sale)>10
Union
Select 'Others' as Product, sum (Product_sales) as totalSales
From productTable where Product IN ( Select Product From productTable
Group by Product
Having sum(Product_sale)<=10)
Group by 'others'

OdaDataSetHandle dataSet = (OdaDataSetHandle) designHandle.getDataSets().get(0);
dataSet.setQueryText(query);

1.2.5 Pie Chart with min slice


New Features added into Pie chart:
1. Pie chart slice can be exploded by setting expression to explosion attribute.
2. Implement the same function with MinSlice.java. However, it used chart API to generate the aggregated values under the minimum value for a slice.

//Explosion
sePie.setExplosion(30);
sePie.setExplosionExpression("orthogonalValue<20 ||orthogonalValue>50");

//Min Slice
cwoaPie.setMinSlice(10);
cwoaPie.setMinSlicePercent(false);
cwoaPie.setMinSliceLabel("Others");

1.2.6 Bar Chart with sorting/grouping on X Series

This example shows how to group multiple data values in X axis, which could be acheived in the report designer as follows: Chart Builder -> Data -> X Series -> Set Dat Sorting / Tick Grouping Enabled.

SeriesDefinition sdX = (SeriesDefinition) ( (Axis) ( (ChartWithAxes) cm).getAxes( ).get( 0 ) ).getSeriesDefinitions( ).get( 0 ); //Get the X-Series from a chart instance

sdX.setSorting(SortOption.ASCENDING_LITERAL);
sdX.getGrouping().setEnabled(true);
sdX.getGrouping().setAggregateExpression("Sum");
sdX.getGrouping().setGroupType(DataType.NUMERIC_LITERAL);
sdX.getGrouping().setGroupingInterval(1);

1.3.1 Chart with formatted X-axis (DateTime) / Y-axis (Number) labels

This example shows how to format the lable of Axes.

If the type of axis is DATE_TIME, the statement will be axis.setFormatSpecifier(JavaDateFormatSpecifierImpl.create(" "));
If the type of axis is NUMBER, the statement will be axis.setFormatSpecifier(JavaNumberFormatSpecifierImpl.create(" "));

1.3.2 Chart with formatted X-series / Y-series values

The example shows how to format the value of Series.

If the LegendItemType is SERIES, X series will not display on the screen, then Y series could be formatted as follows:
seriesDefinition.setFormatSpecifier(JavaNumberFormatSpecifierImpl.create(" "));

If the LegendItemType is CATEGORIES,

X series: seriesDefinition.setFormatSpecifier(JavaDateFormatSpecifierImpl.create(" "));
Y series: DataPointComponent dpc = DataPointComponentImpl.create( DataPointComponentType.ORTHOGONAL_VALUE_LITERAL, JavaNumberFormatSpecifierImpl.create("") );
              barSeries.getDataPoint().getComponents().clear();
              barSeries.getDataPoint().getComponents().add(dpc);

1.3.3 Bar Chart colored by category

The example shows how to create a bar chart. Each bar series has different colors.

Firstly, the LegendItemType should be set as CATEGORIES, and then set X series: seriesDefinition.getSeriesPalette( ).update(0);

1.3.4 Chart with formatted Legend and Title

The example shows how to format chart legend and title. Before setting the attributes of legend and title, you should get the default legend and title for chart model.

They could be achieved via the following statements: TitleBlock tb = chart .getTitle(); and Legend lg = chart.getLegend();

1.3.5 Pie chart with percentage values

The pie chart could show the percentage values of categories. The result cannot be achieved directly from chart builder. However, it could be made by operating the data set.

Firstly, you should use values[i] += (data[i] / TotalValue) * 100 to generate a new data set containing the values we required in the pie chart. Then use the following statements to format the values:

DataPointComponent dpc = DataPointComponentImpl.create( DataPointComponentType.ORTHOGONAL_VALUE_LITERAL,
JavaNumberFormatSpecifierImpl.create("0'%'") );
sePie.getDataPoint().getComponents().clear();
sePie.getDataPoint().getComponents().add(dpc);

1.3.6 Chart with customized Plot

The plot could be formatted similar with Title and Legend.

Interactivity examples include 3 parts: Svg, Swt and Swing.

1.4.1 Bar chart: Mouse_Click + Highlight_Series

The example presents a simple bar chart. When the mouse clicks the legend of chart, the series will be highlighted. The effect could be obtained by the following code:

cwaBar.getInteractivity( ).setLegendBehavior( LegendBehaviorType.HIGHLIGHT_SERIE_LITERAL );
barSeries.getTriggers( ).add( TriggerImpl.create( TriggerCondition.ONCLICK_LITERAL,ActionImpl.create( ActionType.HIGHLIGHT_LITERAL, SeriesValueImpl.create( String.valueOf( bs.getSeriesIdentifier( ) ) ) ) ) );

1.4.2 Scatter chart: Mouse_Over + Show_Tooltip

The example presents a scatter chart. When the mouse hovers in one of the data pair points, a predefined tooltip message will be displayed. The effect could be obtained by the following code:

scatterSeries.getTriggers().add(TriggerImpl.create(TriggerCondition.ONMOUSEOVER_LITERAL, ActionImpl.create(ActionType.SHOW_TOOLTIP_LITERAL, TooltipValueImpl.create(500, null))));

1.4.3 Pie chart: Mouse_Down + URL_Redirect

The example presents a simple pie chart. When the mouse hovers in one of the pie series, the series will be spotlighted. When the mouse clicks on one of the pie series, a designated URL page will be opened. The effect could be obtained by the following code:

Trigger triger = TriggerImpl.create(TriggerCondition.ONMOUSEDOWN_LITERAL, ActionImpl.create(ActionType.URL_REDIRECT_LITERAL, URLValueImpl.create("Url", "", "", "", "")));
pieSeries .getTriggers().add(triger);

1.4.4 Line chart: Mouse_Down + Toggle_Visibility

The example presents a simple line chart. When the mouse clicks on the legend of chart, the series will be hiden. The effect could be obtained by the following code:

legend.getTriggers( ).add( TriggerImpl.create( TriggerCondition.ONMOUSEDOWN_LITERAL,ActionImpl.create( ActionType.TOGGLE_VISIBILITY_LITERAL, SeriesValueImpl.create( "not-used" ) ) ) );

1.5.1 JavaScript

The examples include all beforeXXX( ) functions. The effect could be obtained by chartModel.setScript( ):

ChartWithAxes cwaBar = ChartWithAxesImpl.create( );
cwaBar.setScript( "function beforeDrawSeries(series, renderer, scriptContext)"
+ "{importPackage(Packages.org.eclipse.birt.chart.model.component.impl);"
+ "series.setCurveFitting(CurveFittingImpl.create());}");

1.5.2 Java

First a java class (extends ChartEventHandlerAdapter) should be defined, then import the java class into chartModel.setScript( ). The effect could be obtained by the following code:

ChartWithAxes cwaBar = ChartWithAxesImpl.create( );
cwaBar.setScript( "org.eclipse.birt.chart.examples.api.script.java.LegendScript" );

Define class LegendScript.java:

public class LegendScript extends ChartEventHandlerAdapter{
public void beforeDrawLegendEntry( Label label, IChartScriptContext icsc ){
label.getCaption( ).getColor( ).set( 35, 184, 245 );}}

1.6.1 Style Processor

Define the customized style processor by implementing IStyleProcessor, and then use the customized style to generate the chart model:

Generator.instance( ).build( idr.getDisplayServer( ), cm, bo, null, null, StyleProcessor.instance( ) );

2.1.1 Stock Analysis Report with embedded Stock chart

The report presents a stock anaylsis within 8 days. After running the class, the output SalesReport.rptdesign file is stored in "output" file folder in the first-level subdirectory of the plugin.
ScriptDataSet column:

ComputedColumn cc = StructureFactory.createComputedColumn();
......Set Property: ColumnName/Expression/DataType......

cc.setExpression( "row[\"XXX\"]" );

PropertyHandle columnSet = dataSetHandle.getPropertyHandle(ScriptDataSetHandle.COMPUTED_COLUMNS_PROP);
columnSet.addItem(cc);

ExtendedItemHandle:

PropertyHandle computedSet = extendedItemHandle.getColumnBindings( );
cc.setExpression("dataSetRow[\"XXX\"]" );
columnSet.addItem(cc);

StockChart:

Query query1 = QueryImpl.create("row[\"High\"]");
Query query2 = QueryImpl.create("row[\"Low\"]");
Query query3 = QueryImpl.create("row[\"Open\"]");
Query query4 = QueryImpl.create("row[\"Close\"]");
ArrayList list = new ArrayList();
list.add(query1);
list.add(query2);
list.add(query3);
list.add(query4);
stockChart.getDataDefinition().addAll(list);

2.1.2 Sales Report with embedded Pie chart and Bar chart

The report presents a sales report of 3 brands. The first grid in the top conotains 3 logos for these companys. The following grid contains a grouped table in the left cell and a pie chart in the right cell. After running the class, the output SalesReport.rptdesign file is stored in "output" file folder in the first-level subdirectory of the plugin.

Dynamic Series Pie Chart:

Gradient backgroup:

cwoaPie.getBlock().setBackground(GradientImpl.create(ColorDefinitionImpl.create(204, 254, 204), ColorDefinitionImpl.create(254, 226, 240), -35, false));
cwoaPie.getPlot().getClientArea().setBackground(ColorDefinitionImpl.TRANSPARENT());
cwoaPie.getLegend().setBackground(ColorDefinitionImpl.TRANSPARENT());
cwoaPie.getLegend().getClientArea().setBackground(ColorDefinitionImpl.TRANSPARENT());

Series:

withoutAxesChart.getSeriesDefinitions().add(series); //series: Base Series
series.getSeriesDefinitions().add(seGroup); //seGroup: Series Group Key
seGroup.getSeries().add(ps); //ps: Orthogonal Series

EmbeddedImage:

EmbeddedImage image = StructureFactory.createEmbeddedImage( ); //Create a new embedded image
......Set Type/Data/Name for the embedded image......
reportDesignHandle.addImage( image ); //Add EmbeddedImage into the report

ImageHandle imageHandle = elementFactory.newImage("imageHandle");
......Set Source/ImageName for the image handle......
TableGroup:

TableGroupHandle group = elementFactory.newTableGroup(); //Create a table group
group.setKeyExpr(""); //Set the group key
table.getGroups().add(group);

RowHandle groupHeader= elementFactory.newTableRow(3); //Create table header / footer
group.getHeader().add(groupHeader);

PropertyHandle computedSet = table.getColumnBindings( ); //Data column binding
cc.setName("XXX" );
columnSet.addItem(cc);

data.setResultSetColumn( cc.getName( ) ); //Set value to table data

2.1.3 Meter Chart

The report presents a report with a meter chart. After running the class, the output SalesReport.rptdesign file is stored in "output" file folder in the first-level subdirectory of the plugin.

Series seCategory = SeriesImpl.create( );
SeriesDefinition series = SeriesDefinitionImpl.create( );

series.getSeries( ).add( seCategory );
dChart.getSeriesDefinitions( ).add( series );

DialSeries seDial = (DialSeries) DialSeriesImpl.create( );
SeriesDefinition seGroup = SeriesDefinitionImpl.create( );

series.getSeriesDefinitions( ).add( seGroup );
seGroup.getSeries( ).add( seDial );

 

2.2.1 Bar chart with JavaScript

DataSource: Script data source

The chart presents computer sale balance based on the hardware components. The scripts have been added in the Chart builder -> Scripts, it works on setting the runtime color for the series with value < 0.

2.2.2 Bar chart within Table group header

DataSource: Classic Model Inc. sample database

The report contains a table with 2 groups to present the product order situation for a model manufactory. The outer table group is grouped on "Product Line", while the inner one is grouped on "Product Code". A bar chart is inserted in the header of outer group, which shows the order of different products in the same product line. The product line information is passed from the table group to the chart via a parameter row[0]["ProductLine"].

2.2.3 Dynamic Series Pie Chart

Data Source: Script data source

The example shows how to create a dynamic chart. In a Pie chart, set the value of Orthogonal Series Definitions as an array of values. The single chart will expand to a series of charts when clicking preview tab.