org.eclipse.birt.chart.examples
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
<div align="center">
<p><font size="5" face="Times New Roman, Times, serif"><strong><font face="Arial, Helvetica, sans-serif">Chart
API Examples Plugin</font></strong></font></p>
<p><font face="Times New Roman, Times, serif">Last updated: Jan 20, 2006</font></p>
<p align="left"><font face="Arial, Helvetica, sans-serif"><strong>Table of Contents</strong></font></p>
</div>
<blockquote>
<div align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">Prefix</font></strong></div>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif"><a href="#000"> How
to run the examples?</a></font></p>
<p> </div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"><strong>1.
Sample Charts written by API </strong>(org.eclipse.birt.chart.examples.api)</font></div>
<div align="left"></div>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"> 1.1- Use different
renderers to present various types of charts (org.eclipse.birt.chart.examples.api.viewer)</font></p>
</div>
<blockquote>
<div align="left"></div>
<div align="left"> </div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.1.1
<a href="#111">SWING Renderer</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 1.1.2
<a href="#111">SWT Renderer</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> </font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 1.1.3
<a href="#113">Live Bar and Line Combination Chart</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.1.4
<a href="#114">Dial Chart Viewer</a></font></div>
<div align="left"> <font size="2" face="Arial, Helvetica, sans-serif">1.1.5
<a href="#115">Curve Fitting Chart Viewer</a></font> </div>
<div align="left"> <font size="2" face="Arial, Helvetica, sans-serif">1.1.6
<a href="#116">3D Chart Viewer</a></font> </div>
</blockquote>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">1.2- Databinding, Grouping
and Sorting (org.eclipse.birt.chart.examples.api.data)</font></p>
</div>
<blockquote>
<div align="left"></div>
<div align="left">
<div align="left"></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.1
<a href="#121">Bar Chart with multiple Y series</a></font></div>
</div>
<div align="left">
<div align="left"></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.2
<a href="#122"> Line Chart with multiple Y axis</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.3
<a href="#123">Bar Chart with grouping on Y axis</a></font></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.4
<a href="#124">Pie Chart with min slice (Old)</a></font></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.5
<a href="#125">Pie Chart with min slice </a></font></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.2.6
<a href="#126">Bar Chart with sorting/grouping on X series</a></font></div>
</div>
</blockquote>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">1.3- Data Format, Legend/Title/Plot
Properties (org.eclipse.birt.chart.examples.api.format)</font></p>
</div>
<blockquote>
<div align="left"></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.1
<a href="#131">Chart with formatted X-axis (DateTime) / Y-axis (Number)
labels</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.2
<a href="#132">Chart with formatted X-series / Y-series values</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.3
<a href="#133"> Bar Chart colored by category</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.4
<a href="#134">Chart with formatted Legend and Title</a> </font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.5
<a href="#135">Pie chart with percentage values</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.3.6
<a href="#136">Chart with customized Plot</a></font></div>
</blockquote>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">1.4- Interactivity (org.eclipse.birt.chart.examples.api.interactivity)</font></p>
</div>
<blockquote>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 1.4.1
<a href="#141">Bar chart: Mouse_Click + Highlight_Series</a></font></div>
<div align="left"></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.4.2
<a href="#142">Scatter chart: Mouse_Over + Show_Tooltip</a></font></div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.4.3
<a href="#143">Pie chart: Mouse_Down + URL_Redirect</a></font></div>
<div align="left"></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.4.4
<a href="#144">Linechart: Mouse_Down + Toggle_Visibility</a></font></div>
</div>
<div align="left"></div>
</blockquote>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">1.5- Script (org.eclipse.chart.examples.api.script)</font></p>
</div>
<blockquote>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 1.5.1
<a href="#151"> JavaScript</a></font></div>
<div align="left"></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">1.5.2
<a href="#152">Java</a></font></div>
</blockquote>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">1.6- Style processor
(org.eclipse.chart.examples.api.processor)</font></p>
</div>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"> 1.6.1
<a href="#161">StyleProcessor</a></font></div>
</blockquote>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">1.7- Preference page
(org.eclipse.chart.examples.api.preference)</font></p>
</div>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Please
read the Help.htm file within the preference folder.</font></div>
</blockquote>
<div align="left">
<p><font face="Arial, Helvetica, sans-serif"><strong><font size="2">2. Sample
Reports with Embeded Charts</font></strong></font> <font size="2" face="Arial, Helvetica, sans-serif">(org.eclipse.birt.chart.examples.report)</font></p>
</div>
<div align="left"></div>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">2.1 Use DE-API/Chart
API to create reports with embedded charts (org.eclipse.birt.chart.examples.report.api)</font></p>
</div>
<blockquote>
<div align="left"></div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">2.1.1
<a href="#211">Stock Analysis Report with embedded Stock chart and Bar
chart</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> </font></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 2.1.2
<a href="#212">Sales Report with embedded Pie chart</a></font></div>
</div>
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">2.1.3
<a href="#213">Meter Chart</a></font></div>
</div>
<div align="left">
<div align="left"></div>
</div>
</blockquote>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">2.2 Use BIRT designer
to create reports with embedded charts (org.eclipse.birt.chart.example.report.design)</font></p>
</div>
<blockquote>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 2.2.1
<a href="#221">Bar chart with JavaScript</a></font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> 2.2.2
<a href="#222">Bar chart within Table group header</a></font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">2.2.3
<a href="#223">Dynamic Series Pie Chart</a></font></div>
</blockquote>
</blockquote>
<div align="center">
<hr>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif"><a name="000"></a>Prefix:
<u>How to run the examples?</u></font></strong></p>
<p align="left"><font size="-1" face="Arial, Helvetica, sans-serif"> Please
set the following argument when running chart examples:</font></p>
</div>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">-DBIRT_HOME=D:\birt-runtime-osgi\ReportEngine</font></div>
</blockquote>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">BIRT RunTime package (osgi version) is available
to download in BIRT download page. </font></p>
</div>
<div align="center">
<hr>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><strong><u><a name="111"></a>1.1.1
& 1.1.2 Swing / SWT Renderers</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">Use Swing
render and SWT render to present the various types of charts (2D+2D with depth)
respectively:</font></p>
</div>
<ul>
<li>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> Bar
chart</font></div>
</li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Multiple series bar chart</font></li>
<li>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> Pie
chart</font></div>
</li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Multiple series pie chart</font></li>
<li>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> Line
chart</font></div>
</li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Bar and line combination
chart </font></li>
<li>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> Scatter
chart</font></div>
</li>
<li>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"> Stock
chart</font></div>
</li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Area chart</font></li>
</ul>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"> The renderers
also provide "Transposed", "Percent" and "Logarithmic"
attributes for the charts mentioned above. </font></p>
<p></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="113"></a><strong><u>1.1.3
Live Bar and Line Combination Chart</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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).</font></p>
<p></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="114"></a><strong><u>1.1.4
Dial Chart Viewer</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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.
</font></p>
</div>
<blockquote>
<div align="left"> <font size="-1" face="Arial, Helvetica, sans-serif">Single
Dial, Multi Regions:</font></div>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"> DialSeries
seDial = (DialSeries) DialSeriesImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialRegion
dregion1 = DialRegionImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial.getDial().getDialRegions().add(dregion1);</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">....</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial.getDial().getDialRegions().add(dregion2);
</font></div>
</blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Multi
Dials, Multi Regions:</font></div>
<blockquote>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries
seDial1 = (DialSeries) DialSeriesImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialRegion
dregion1 = DialRegionImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial1.getDial().getDialRegions().add(dregion1);</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">....</font></div>
</div>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial1.getDial().getDialRegions().add(dregion2);
</font></div>
</div>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">...</font></div>
</div>
<div align="left">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries
seDial2 = (DialSeries) DialSeriesImpl.create();</font></div>
<div align="left"></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial2.getDial().getDialRegions().add(dregion1);</font></div>
<div align="left"></div>
</div>
</div>
<div align="left">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">seDial2.getDial().getDialRegions().add(dregion2);
</font></div>
</div>
</div>
<div align="left">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">...</font></div>
</div>
</div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">dialChart.setDialSuperimposition(true);
</font></div>
</blockquote>
<div><font size="-1" face="Arial, Helvetica, sans-serif">Single Dial, Single Region</font></div>
<blockquote>
<div><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries seDial
= (DialSeries) DialSeriesImpl.create();</font></div>
<div><font size="-1" face="Arial, Helvetica, sans-serif">DialRegion dregion
= DialRegionImpl.create();</font></div>
<div><font size="-1" face="Arial, Helvetica, sans-serif">seDial.getDial().getDialRegions().add(dregion);</font></div>
</blockquote>
<p align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Multi Dials,
Single Region</font></p>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries
seDial1 = (DialSeries) DialSeriesImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries
seDial2 = (DialSeries) DialSeriesImpl.create();</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">dialChart.setDialSuperimposition(true);</font></div>
</blockquote>
</blockquote>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="115"></a><strong><u>1.1.5
Curve Fitting Chart Viewer</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
<blockquote>
<blockquote>
<p align="left"><font size="-1" face="Arial, Helvetica, sans-serif">LineSeries ls =
(LineSeries) LineSeriesImpl.create( );<br>
ls.setCurve( true );</font></p>
</blockquote>
</blockquote>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="116"></a><strong><u>1.1.6
3D Chart Viewer</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">3D chart is
supported by the types of Bar, Line and Area.</font></p>
<blockquote>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">ChartWithAxes
cwaBar = ChartWithAxesImpl.create( ); cwaBar.setDimension( ChartDimension.THREE_DIMENSIONAL_LITERAL
);</font></div>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">......</font></div>
</div>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Axis
zAxis = AxisImpl.create( Axis.ANCILLARY_BASE );<br>
xAxisPrimary.getAncillaryAxes( ).add( zAxis );</font></div>
</div>
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">......
</font></div>
</div>
<p align="left"><font size="-1" face="Arial, Helvetica, sans-serif">SeriesDefinition
sdZ = SeriesDefinitionImpl.create( );<br>
zAxis.getSeriesDefinitions( ).add( sdZ );</font></p>
<p><font size="-1" face="Arial, Helvetica, sans-serif"> // Rotate the chart<br>
cwaBar.setRotation( Rotation3DImpl.create( new Angle3D[]{<br>
Angle3DImpl.create( -20, 45, 0 )} ) );</font></p>
</blockquote>
</blockquote>
<hr>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="121"></a><strong><u>1.2.1
Bar Chart with multiple Y series</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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. </font></p>
<blockquote>
<blockquote>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">yAxis.getSeriesDefinitions().add(ySeriesDefinition1);
</font></div>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">yAxis.getSeriesDefinitions().add(ySeriesDefinition2);</font></div>
</blockquote>
</blockquote>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="122"></a><strong><u>1.2.2
Line Chart with multiple Y axis</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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. </font></p>
</div>
<blockquote>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Axis
yAxisPrimary = cwaBar.getPrimaryOrthogonalAxis(xAxisPrimary);</font></div>
<div align="left"> <font size="-1" face="Arial, Helvetica, sans-serif">yAxisPrimary.getSeriesDefinitions().add(sdY1);</font></div>
<br>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">Axis
yAxis = AxisImpl.create(Axis.ORTHOGONAL);<br>
xAxis.getAssociatedAxes( ).add( yAxis );</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">yAxis.getSeriesDefinitions().add(sdY2);</font></div>
</blockquote>
</blockquote>
<blockquote>
<blockquote>
<div align="left"></div>
</blockquote>
</blockquote>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="123"></a><strong><u>1.2.3
Bar Chart with grouping on Y axis </u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
</div>
<blockquote>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Axis
axisBase = (Axis) ( (ChartWithAxes) cm ).getAxes( ).get( 0 ); // X-Axis<br>
Axis axisOrth = (Axis) axisBase.getAssociatedAxes( ).get( 0 ); //Y-Axis
<br>
SeriesDefinition sdY = (SeriesDefinition) axisOrth.getSeriesDefinitions().get(0);
//Y-Series<br>
<br>
SeriesDefinition sdGroup = SeriesDefinitionImpl.create();<br>
Query query = QueryImpl.create("row[\"Month\"]");<br>
sdGroup.setQuery(query);<br>
<br>
axisOrth.getSeriesDefinitions().clear(); // Clear the original Y-Series
(sdY)<br>
axisOrth.getSeriesDefinitions().add(0, sdGroup); <br>
sdGroup.getSeries().add(sdY.getSeries().get(0));</font></div>
</blockquote>
</blockquote>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="124"></a><strong><u>1.2.4
Pie Chart with min slice (Old)</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
<blockquote>
<blockquote>
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"><br>
Select Product, sum (Product_sales) as totalSales<br>
From productTable<br>
Group by Product<br>
Having sum(Product_sale)>10<br>
Union<br>
Select 'Others' as Product, sum (Product_sales) as totalSales<br>
From productTable where Product IN ( Select Product From productTable<br>
Group by Product<br>
Having sum(Product_sale)<=10)<br>
Group by 'others'</font></div><br>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">OdaDataSetHandle
dataSet = (OdaDataSetHandle) designHandle.getDataSets().get(0);</font></div>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">dataSet.setQueryText(query);</font></div>
</blockquote>
</blockquote>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="125"></a><strong><u>1.2.5
Pie Chart with min slice </u></strong></font></p>
<p align="left"><br>
<font size="-1" face="Arial, Helvetica, sans-serif">New Features added into
Pie chart:</font><font size="-1" face="Arial, Helvetica, sans-serif"><br>
1. Pie chart slice can be exploded by setting expression to explosion attribute.<br>
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.</font></p>
</div>
<blockquote>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">//Explosion<br>
sePie.setExplosion(30);<br>
sePie.setExplosionExpression("orthogonalValue<20 ||orthogonalValue>50");</font></div><br>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">//Min
Slice<br>
cwoaPie.setMinSlice(10);<br>
cwoaPie.setMinSlicePercent(false);<br>
cwoaPie.setMinSliceLabel("Others");<br>
</font> </div>
</blockquote>
</blockquote>
<div align="center">
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="126"></a><strong><u>1.2.6
Bar Chart with sorting/grouping on X Series</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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. </font></p>
</div>
<blockquote>
<blockquote>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">SeriesDefinition
sdX = (SeriesDefinition) ( (Axis) ( (ChartWithAxes) cm).getAxes( ).get(
0 ) ).getSeriesDefinitions( ).get( 0 ); //Get the X-Series from a chart
instance</font></div><br>
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">sdX.setSorting(SortOption.ASCENDING_LITERAL);
</font><font size="-1" face="Arial, Helvetica, sans-serif"><br>
sdX.getGrouping().setEnabled(true);<br>
sdX.getGrouping().setAggregateExpression("Sum");<br>
sdX.getGrouping().setGroupType(DataType.NUMERIC_LITERAL);<br>
sdX.getGrouping().setGroupingInterval(1);</font></div>
</blockquote>
</blockquote>
<div align="center">
<hr>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="131"></a><strong><u>1.3.1 Chart
with formatted X-axis (DateTime) / Y-axis (Number) labels</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">This example shows how
to format the lable of Axes. </font></p>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">If
the type of axis is DATE_TIME, the statement will be axis.setFormatSpecifier(JavaDateFormatSpecifierImpl.create("
"));</font></div>
</div>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">If
the type of axis is NUMBER, the statement will be axis.setFormatSpecifier(JavaNumberFormatSpecifierImpl.create("
"));</font></div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="132"></a><strong><u>1.3.2 Chart
with formatted X-series / Y-series values</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">The example shows how
to format the value of Series. </font></p>
</div>
</div>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">If the
LegendItemType is SERIES, X series will not display on the screen, then Y
series could be formatted as follows: </font></div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">seriesDefinition.setFormatSpecifier(JavaNumberFormatSpecifierImpl.create("
"));</font></div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">If the LegendItemType
is CATEGORIES, </font></p>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">X series:
seriesDefinition.setFormatSpecifier(JavaDateFormatSpecifierImpl.create("
"));</font></div>
</div>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">Y series:
DataPointComponent dpc = DataPointComponentImpl.create( DataPointComponentType.ORTHOGONAL_VALUE_LITERAL,
JavaNumberFormatSpecifierImpl.create("") );<br>
barSeries.getDataPoint().getComponents().clear();<br>
barSeries.getDataPoint().getComponents().add(dpc);</font></div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="133"></a><strong><u>1.3.3 Bar
Chart colored by category</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">The example shows how
to create a bar chart. Each bar series has different colors.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Firstly, the LegendItemType
should be set as CATEGORIES, and then set X series: seriesDefinition.getSeriesPalette(
).update(0);</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="134"></a><strong><u>1.3.4 Chart
with formatted Legend and Title</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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.
</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">They could be achieved
via the following statements: TitleBlock tb = chart .getTitle(); and Legend
lg = chart.getLegend();</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="135"></a><strong><u>1.3.5 Pie
chart with percentage values</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">DataPointComponent
dpc = DataPointComponentImpl.create( DataPointComponentType.ORTHOGONAL_VALUE_LITERAL,<br>
JavaNumberFormatSpecifierImpl.create("0'%'") );<br>
sePie.getDataPoint().getComponents().clear();<br>
sePie.getDataPoint().getComponents().add(dpc);</font></div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="136"></a><strong><u>1.3.6 Chart
with customized Plot</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">The plot could be formatted
similar with Title and Legend.</font></p>
<hr>
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="141"></a>Interactivity
examples include 3 parts: Svg, Swt and Swing.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong><u>1.4.1
Bar chart: Mouse_Click + Highlight_Series</u></strong></font></p>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">cwaBar.getInteractivity(
).setLegendBehavior( LegendBehaviorType.HIGHLIGHT_SERIE_LITERAL
);<br>
barSeries.getTriggers( ).add( TriggerImpl.create( TriggerCondition.ONCLICK_LITERAL,ActionImpl.create(
ActionType.HIGHLIGHT_LITERAL, SeriesValueImpl.create( String.valueOf(
bs.getSeriesIdentifier( ) ) ) ) ) );</font></div>
</div>
</div>
</blockquote>
</blockquote>
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="142"></a><strong><u>1.4.2
Scatter chart: Mouse_Over + Show_Tooltip</u></strong></font></p>
</div>
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font> </p>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">scatterSeries.getTriggers().add(TriggerImpl.create(TriggerCondition.ONMOUSEOVER_LITERAL,
ActionImpl.create(ActionType.SHOW_TOOLTIP_LITERAL, TooltipValueImpl.create(500,
null))));</font></div>
</div>
</blockquote>
</blockquote>
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="143"></a><strong><u>1.4.3 Pie
chart: Mouse_Down + URL_Redirect</u></strong></font></p>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif">Trigger
triger = TriggerImpl.create(TriggerCondition.ONMOUSEDOWN_LITERAL, ActionImpl.create(ActionType.URL_REDIRECT_LITERAL,
URLValueImpl.create("Url", "", "", "",
"")));<br>
pieSeries .getTriggers().add(triger);</font></div>
</div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="144"></a><strong><u>1.4.4
Line chart: Mouse_Down + Toggle_Visibility</u></strong></font></p>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
</div>
</div>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">legend.getTriggers(
).add( TriggerImpl.create( TriggerCondition.ONMOUSEDOWN_LITERAL,ActionImpl.create(
ActionType.TOGGLE_VISIBILITY_LITERAL, SeriesValueImpl.create(
"not-used" ) ) ) );</font></div>
</div>
</div>
</div>
</div>
</div>
</blockquote>
<div align="center"></div>
</blockquote>
<div align="center">
<div align="left">
<hr>
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="151"></a><strong><u>1.5.1
JavaScript </u></strong></font></p>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">The examples
include all beforeXXX( ) functions. The effect could be obtained
by chartModel.setScript( ):</font></p>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">ChartWithAxes
cwaBar = ChartWithAxesImpl.create( );<br>
cwaBar.setScript( "function beforeDrawSeries(series,
renderer, scriptContext)" <br>
+ "{importPackage(Packages.org.eclipse.birt.chart.model.component.impl);"<br>
+ "series.setCurveFitting(CurveFittingImpl.create());}");</font></div>
</div>
</div>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="152"></a><strong><u>1.5.2
Java</u></strong></font></p>
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif">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:</font></p>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">ChartWithAxes
cwaBar = ChartWithAxesImpl.create( );<br>
cwaBar.setScript( "org.eclipse.birt.chart.examples.api.script.java.LegendScript"
);</font></div>
</div>
</div>
</blockquote>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">Define class
LegendScript.java:</font></p>
</div>
</div>
</div>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">public
class LegendScript extends ChartEventHandlerAdapter{<br>
public void beforeDrawLegendEntry( Label label, IChartScriptContext
icsc ){<br>
label.getCaption( ).getColor( ).set( 35, 184, 245 );}}</font></div>
</div>
</div>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<blockquote>
<div align="center"></div>
</blockquote>
<div align="center">
<div align="left">
<hr>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="161" id="161"></a><strong><u>1.6.1
Style Processor</u></strong></font></p>
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">Define the
customized style processor by implementing IStyleProcessor,
and then use the customized style to generate the chart
model:</font></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<blockquote>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left"> <font size="-1" face="Arial, Helvetica, sans-serif">Generator.instance(
).build( idr.getDisplayServer( ), cm,
bo, null, null, StyleProcessor.instance(
) );</font></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"> </div>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="211"></a><strong><u>2.1.1
Stock Analysis Report with embedded Stock chart</u></strong></font><u><strong><font size="2">
</font></strong></u></p>
<font size="2">
<p><font face="Arial, Helvetica, sans-serif">The report presents a stock anaylsis
within 8 days. </font><font size="2" face="Arial, Helvetica, sans-serif">After
running the class, the output SalesReport.rptdesign file is stored in "output"
file folder in the first-level subdirectory of the plugin.</font></p>
</font> </div>
</div>
<div align="center">
<div align="left"><strong><font size="-1" face="Arial, Helvetica, sans-serif">ScriptDataSet
column</font></strong><font size="-1" face="Arial, Helvetica, sans-serif">:</font></div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left"></div>
</div>
</blockquote>
<div align="center">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">ComputedColumn cc
= StructureFactory.createComputedColumn();<br>
......Set Property: ColumnName/Expression/DataType......</font></p>
<p><font size="-1" face="Arial, Helvetica, sans-serif">cc.setExpression(
"row[\"XXX\"]" );</font></p>
</div>
</div>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">PropertyHandle
columnSet = dataSetHandle.getPropertyHandle(ScriptDataSetHandle.COMPUTED_COLUMNS_PROP);<br>
columnSet.addItem(cc);</font></div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left"></div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left"></div>
</div>
<div align="center"></div>
</div>
</div>
<div align="center"></div>
</blockquote>
<div align="center">
<div align="left">
<p><strong><font size="-1" face="Arial, Helvetica, sans-serif">ExtendedItemHandle:</font></strong></p>
</div>
</div>
<blockquote>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">PropertyHandle computedSet = extendedItemHandle.getColumnBindings(
);</font></div>
</div>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">cc.setExpression("dataSetRow[\"XXX\"]"
);</font></div>
</div>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">columnSet.addItem(cc);</font></div>
</div>
</blockquote>
<div align="center">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif"><strong>StockChart</strong>:</font></p>
</div>
</div>
<blockquote>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Query
query1 = QueryImpl.create("row[\"High\"]");<br>
Query query2 = QueryImpl.create("row[\"Low\"]");<br>
Query query3 = QueryImpl.create("row[\"Open\"]");<br>
Query query4 = QueryImpl.create("row[\"Close\"]");<br>
ArrayList list = new ArrayList();<br>
list.add(query1);<br>
list.add(query2);<br>
list.add(query3);<br>
list.add(query4);<br>
stockChart.getDataDefinition().addAll(list);</font></div>
</div>
</blockquote>
<div align="center">
<div align="left">
<div align="left"> </div>
<div align="left">
<p><a name="212"></a><u><strong><font size="2" face="Arial, Helvetica, sans-serif"> 2.1.2
Sales Report with embedded Pie chart and Bar chart</font></strong></u></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
</div>
</div>
</div>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Dynamic
Series Pie Chart</strong>: </font></div>
</div>
</div>
<blockquote>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">Gradient backgroup:
</font></p>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">cwoaPie.getBlock().setBackground(GradientImpl.create(ColorDefinitionImpl.create(204,
254, 204), ColorDefinitionImpl.create(254, 226, 240), -35, false));
<br>
cwoaPie.getPlot().getClientArea().setBackground(ColorDefinitionImpl.TRANSPARENT());<br>
cwoaPie.getLegend().setBackground(ColorDefinitionImpl.TRANSPARENT());<br>
cwoaPie.getLegend().getClientArea().setBackground(ColorDefinitionImpl.TRANSPARENT());</font></p>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">Series:</font></p>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">withoutAxesChart.getSeriesDefinitions().add(series);
//series: Base Series</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">series.getSeriesDefinitions().add(seGroup);
//seGroup: Series Group Key<br>
seGroup.getSeries().add(ps); //ps: Orthogonal Series</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"> </div>
</div>
</div>
</blockquote>
<div align="center">
<div align="left">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>EmbeddedImage</strong>:</font></p>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"></div>
</div>
</div>
<blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">EmbeddedImage
image = StructureFactory.createEmbeddedImage( ); //Create a new embedded
image</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">......Set
Type/Data/Name for the embedded image......</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">reportDesignHandle.addImage(
image ); //Add EmbeddedImage into the report</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"><br>
ImageHandle imageHandle = elementFactory.newImage("imageHandle");</font></div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">......Set
Source/ImageName for the image handle......</font></div>
</div>
</div>
</blockquote>
<div align="center">
<div align="left">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>TableGroup</strong>:</font></div>
</div>
</div>
<blockquote>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">TableGroupHandle
group = elementFactory.newTableGroup(); //Create a table group<br>
group.setKeyExpr(""); //Set the group key<br>
table.getGroups().add(group);</font></p>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">RowHandle groupHeader=
elementFactory.newTableRow(3); //Create table header / footer<br>
group.getHeader().add(groupHeader);</font></p>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">PropertyHandle
computedSet = table.getColumnBindings( ); //Data column binding</font></div>
</div>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">cc.setName("XXX"
);</font></div>
</div>
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">columnSet.addItem(cc);</font></div>
</div>
<p><font size="-1" face="Arial, Helvetica, sans-serif">data.setResultSetColumn(
cc.getName( ) ); //Set value to table data</font></p>
</div>
</div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<div align="left">
<div align="center">
<div align="left">
<div align="left"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><a name="213" id="213"></a><strong><u>2.1.3
Meter Chart</u></strong></font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
</div>
</div>
</div>
</div>
<blockquote>
<blockquote>
<div align="center">
<div align="left">
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">Series seCategory
= SeriesImpl.create( );<br>
</font></div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"> SeriesDefinition
series = SeriesDefinitionImpl.create( );</font></div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left">
<p><font size="-1" face="Arial, Helvetica, sans-serif">series.getSeries( ).add(
seCategory );<br>
dChart.getSeriesDefinitions( ).add( series ); </font></p>
</div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif">DialSeries
seDial = (DialSeries) DialSeriesImpl.create( );</font></div>
</div>
</div>
</div>
<div align="center">
<div align="left">
<div align="center">
<div align="left"><font size="-1" face="Arial, Helvetica, sans-serif"> SeriesDefinition
seGroup = SeriesDefinitionImpl.create( );<br>
<br>
series.getSeriesDefinitions( ).add( seGroup );<br>
seGroup.getSeries( ).add( seDial );</font></div>
</div>
</div>
</div>
</blockquote>
</blockquote>
<div align="center">
<div align="left">
<blockquote>
<div align="center">
<div align="left">
<p> </p>
</div>
</div>
</blockquote>
<hr>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="221"></a><strong><u>2.2.1
Bar chart with JavaScript</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">DataSource:
Script data source</font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
<div align="left">
<p><a name="222"></a><u><strong><font size="2" face="Arial, Helvetica, sans-serif">2.2.2
Bar chart within Table group header</font></strong></u></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">DataSource: Classic
Model Inc. sample database</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">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"].</font></p>
</div>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif"><a name="223"></a><strong><u>2.2.3
Dynamic Series Pie Chart</u></strong></font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">Data Source:
Script data source</font></p>
<p align="left"><font size="2" face="Arial, Helvetica, sans-serif">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.</font></p>
<p><br>
</p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong><br>
</strong></font> </p>
</div>
<p align="left"><br>
</p>
<p align="left"><br>
</p>
<p align="left"><font size="2"><br>
</font><font size="1"> </font> </p>
<p></p>
<p align="left"><strong> </strong></p>
</div>