Difference between revisions of "TAChart Demos"

From Lazarus wiki
Jump to navigationJump to search
(→‎multi: Multidemo Page "Field")
(Replace "code" tags by "tt")
 
(25 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
TAChart is Lazarus' powerful charting library. It consists of numerous classes and declarations distributed over some 50 units. New users may be overwhelmed by the complexity of usage, and even experienced charters still find gems from time to time.
 
TAChart is Lazarus' powerful charting library. It consists of numerous classes and declarations distributed over some 50 units. New users may be overwhelmed by the complexity of usage, and even experienced charters still find gems from time to time.
  
In order to demonstrate the possibilities of TAChart a variety of demo projects has been written. They are stored in the directory <code>components/tachart/demo</code> of the Lazarus installation. However, there is no overview of these examples, and it is often quite cumbersome to find a certain application of interest. Therefore, it is the intention of this wiki page to provide some kind of catalogue of the TAChart demos. Each demo project will be accompanied by a short description and a screen shot of the program output.
+
In order to demonstrate the possibilities of TAChart a variety of demo projects has been written. They are stored in the directory <tt>components/tachart/demo</tt> of the Lazarus installation. However, there is no overview of these examples, and it is often quite cumbersome to find a certain application of interest. Therefore, it is the intention of this wiki page to provide some kind of catalogue of the TAChart demos. Each demo project will be accompanied by a short description and a screen shot of the program output.
  
 
== Gallery ==
 
== Gallery ==
 
Click on the '''captions''' to go to the description of that particular demo project. Click on the '''thumbnail''' to see the screenshot at normal size.
 
Click on the '''captions''' to go to the description of that particular demo project. Click on the '''thumbnail''' to see the screenshot at normal size.
 
<gallery>
 
<gallery>
  file:zdemo.png                 | [[TAChart_Demos#3d|3d]]
+
  file:zdemo.png                       | [[TAChart_Demos#3d|3d]]
  file:aggpasdemo.png             | [[TAChart_Demos#aggpas|aggpas]]
+
  file:aggpasdemo.png                 | [[TAChart_Demos#aggpas|aggpas]]
  file:TAChart_Animate_Demo.jpg   | [[TAChart_Demos#animate|animate]]
+
  file:TAChart_Animate_Demo.jpg       | [[TAChart_Demos#animate|animate]]
  file:axis_customized_marks.png | [[TAChart_Demos#axis|axis (Page "Customized marks")]]
+
  file:axis_customized_marks.png       | [[TAChart_Demos#axis|axis (Page "Customized marks")]]
  file:axis_axis_groups.png       | [[TAChart_Demos#axis|axis (Page "Axis groups")]]
+
  file:axis_axis_groups.png           | [[TAChart_Demos#axis|axis (Page "Axis groups")]]
  file:axis_submarks.png         | [[TAChart_Demos#axis|axis (Page "Submarks")]]
+
  file:axis_submarks.png               | [[TAChart_Demos#axis|axis (Page "Submarks")]]
  file:axis_date_and_time.png     | [[TAChart_Demos#axis|axis (Page "Date and time")]]
+
  file:axis_date_and_time.png         | [[TAChart_Demos#axis|axis (Page "Date and time")]]
  file:axis_intervals.png         | [[TAChart_Demos#axis|axis (Page "Intervals")]]
+
  file:axis_intervals.png             | [[TAChart_Demos#axis|axis (Page "Intervals")]]
  file:axis_position.png         | [[TAChart_Demos#axis|axis (Page "Position")]]
+
  file:axis_position.png               | [[TAChart_Demos#axis|axis (Page "Position")]]
  file:axisalign.png             | [[TAChart_Demos#axisalign|axisalign]]
+
  file:axisalign.png                   | [[TAChart_Demos#axisalign|axisalign]]
  file:axistransf_linear.png     | [[TAChart_Demos#axistransf|axistransf (Page "Linear")]]
+
  file:axistransf_linear.png           | [[TAChart_Demos#axistransf|axistransf (Page "Linear")]]
  file:axistransf_indep_scale.png | [[TAChart_Demos#axistransf|axistransf (Page "Independent scale")]]
+
  file:axistransf_indep_scale.png     | [[TAChart_Demos#axistransf|axistransf (Page "Independent scale")]]
  file:axistransf_logarithm.png   | [[TAChart_Demos#axistransf|axistransf (Page "Logarithm")]]
+
  file:axistransf_logarithm.png       | [[TAChart_Demos#axistransf|axistransf (Page "Logarithm")]]
  file:axistransf_normal_dist.png | [[TAChart_Demos#axistransf|axistransf (Page "Normal distribution")]]
+
  file:axistransf_normal_dist.png     | [[TAChart_Demos#axistransf|axistransf (Page "Normal distribution")]]
  file:axistransf_userdefined.png | [[TAChart_Demos#axistransf|axistransf (Page "User defined")]]
+
  file:axistransf_userdefined.png     | [[TAChart_Demos#axistransf|axistransf (Page "User defined")]]
  file:basicdemo.png             | [[TAChart_Demos#basic|basic]]
+
file:barshapesdemo.png              | [[TAChart_Demos#barserieshapes|barserieshapes]]
  file:bgrademo.png               | [[TAChart_Demos#bgra|bgra]]
+
  file:basicdemo.png                   | [[TAChart_Demos#basic|basic]]
  file:clonedemo-series.png       | [[TAChart_Demos#clone|clone (Page "Series")]]
+
  file:bgrademo.png                   | [[TAChart_Demos#bgra|bgra]]
  file:clonedemo-charts.png       | [[TAChart_Demos#clone|clone (Page "Charts")]]
+
file:charteditor_dialog.png          | [[TAChart_Demos#charteditordemo|charteditordemo]]
  file:distancedemo-main.png     | [[TAChart_Demos#distance|distance (Page "Main")]]
+
file:chartsource_basic.png          | [[TAChart_Demos#chartsource_basic|chartsource (Page "Basic")]]
  file:distancedemo-fit.png       | [[TAChart_Demos#distance|distance (Page "Fit")]]
+
file:chartsource_statistics.png      | [[TAChart_Demos#chartsource_statistics|chartsource (Page "Statistics")]]
  file:eventsdemo.png             | [[TAChart_Demos#events|events]]
+
file:chartsource_derivative.png      | [[TAChart_Demos#chartsource_derivative|chartsource (Page "Derivative")]]
  file:extentdemo.png             | [[TAChart_Demos#extent|extent]]
+
file:chartsource_sorting.png        | [[TAChart_Demos#chartsource_sorting|chartsource (Page "Sorting")]]
  file:fitdemo.png               | [[TAChart_Demos#fit|fit]]
+
  file:clonedemo-series.png           | [[TAChart_Demos#clone|clone (Page "Series")]]
  file:funcdemo-domain.png       | [[TAChart_Demos#func|func (Page "Domain")]]
+
  file:clonedemo-charts.png           | [[TAChart_Demos#clone|clone (Page "Charts")]]
  file:funcdemo-colormap.png     | [[TAChart_Demos#func|func (Page "Color map")]]
+
file:combodemo.png                  | [[TAChart_Demos#combobox|combobox]]
  file:funcdemo-spline.png       | [[TAChart_Demos#func|func (Page "Spline")]]
+
  file:distancedemo-main.png           | [[TAChart_Demos#distance|distance (Page "Main")]]
  file:funcdemo-autoyextent.png   | [[TAChart_Demos#func|func (Page "Auto y extent")]]
+
  file:distancedemo-fit.png           | [[TAChart_Demos#distance|distance (Page "Fit")]]
  file:funcdemo-parametric.png   | [[TAChart_Demos#func|func (Page "Parametric")]]
+
  file:eventsdemo.png                 | [[TAChart_Demos#events|events]]
  file:legenddemo-page1.png       | [[TAChart_Demos#legend|legend (Page "Basics")]]
+
  file:extentdemo.png                 | [[TAChart_Demos#extent|extent]]
  file:legenddemo-page2.png       | [[TAChart_Demos#legend|legend (Page "OwnerDrawn"]]
+
  file:fitdemo.png                     | [[TAChart_Demos#fit|fit]]
  file:linedemo-fast.png         | [[TAChart_Demos#line|line (Page "Fast drawing")]]
+
  file:funcdemo-domain.png             | [[TAChart_Demos#func|func (Page "Domain")]]
  file:linedemo-pointers.png     | [[TAChart_Demos#line|line (Page "Pointers")]]
+
  file:funcdemo-colormap.png           | [[TAChart_Demos#func|func (Page "Color map")]]
  file:linedemo-oscilloscope.png  | [[TAChart_Demos#line|line (Page "Oscilloscope")]]
+
  file:funcdemo-spline.png             | [[TAChart_Demos#func|func (Page "Spline")]]
  file:listboxdemo.png           | [[TAChart_Demos#listbox|listbox]]  
+
  file:funcdemo-autoyextent.png       | [[TAChart_Demos#func|func (Page "Auto y extent")]]
  file:multidemo-bubble.png       | [[TAChart_Demos#multi|multi (Page "Bubble")]]  
+
  file:funcdemo-parametric.png         | [[TAChart_Demos#func|func (Page "Parametric")]]
  file:multidemo-stacked.png     | [[TAChart_Demos#multi|multi (Page "Stacked")]]  
+
file:html_demo.png                  | [[TAChart_Demos#html|html]]
  file:multidemo-boxwhisker.png   | [[TAChart_Demos#multi|multi (Page "Box-and-Whiskers")]]  
+
  file:legenddemo-page1.png           | [[TAChart_Demos#legend|legend (Page "Basics")]]
  file:multidemo-ohlc.png         | [[TAChart_Demos#multi|multi (Page "OHLC")]]  
+
  file:legenddemo-page2.png           | [[TAChart_Demos#legend|legend (Page "OwnerDrawn"]]
  file:nandemo.png               | [[TAChart_Demos#nan|nan]]  
+
  file:linedemo-fast.png               | [[TAChart_Demos#line|line (Page "Fast drawing")]]
  file:navigatedemo.png           | [[TAChart_Demos#navigate|navigate]]  
+
  file:linedemo-pointers.png           | [[TAChart_Demos#line|line (Page "Pointers")]]
  file:noguidemo.png             | [[TAChart_Demos#nogui|nogui]]  
+
file:linedemo-customdrawnpointer.png | [[TAChart_Demos#line|line (Page "Customdrawn pointer")]]
  file:opengldemo.png             | [[TAChart_Demos#opengl|opengl]]  
+
file:linedemo-ongetpointerstyle.png  | [[TAChart_Demos#line|line (Page "OnGetPointerStyle event")]]
  file:panesdemo.png             | [[TAChart_Demos#panes|panes]]  
+
  file:linedemo-oscilloscope.png       | [[TAChart_Demos#line|line (Page "Oscilloscope")]]
  file:printdemo.png             | [[TAChart_Demos#print|print]]  
+
  file:linedemo-coloreach.png          | [[TAChart_Demos#line|line (Page "Color each data point")]]
  file:radialdemo_pie.png         | [[TAChart_Demos#radial|radial (page "Pie")]]  
+
  file:listboxdemo.png                 | [[TAChart_Demos#listbox|listbox]]
  file:radialdemo_polar.png       | [[TAChart_Demos#radial|radial (page "Polar")]]  
+
file:liveview.png                    | [[TAChart_Demos#liveview.2C_liveview-paned|liveview, liveview-paned]]
  file:rotatedemo.png             | [[TAChart_Demos#rotate|rotate]]  
+
  file:multidemo-bubble.png           | [[TAChart_Demos#multi|multi (Page "Bubble")]]  
  file:savedemo.png               | [[TAChart_Demos#save|save]]
+
  file:multidemo-stacked.png           | [[TAChart_Demos#multi|multi (Page "Stacked")]]  
  file:scriptdemo.png             | [[TAChart_Demos#script|script]]
+
  file:multidemo-boxwhisker.png       | [[TAChart_Demos#multi|multi (Page "Box-and-Whiskers")]]  
  file:toolsdemo.png             | [[TAChart_Demos#tools|tools]]
+
  file:multidemo-ohlc.png             | [[TAChart_Demos#multi|multi (Page "OHLC")]]
  file:wmfdemo.png               | [[TAChart_Demos#wmf|wmf]]
+
file:multidemo-field.png            | [[TAChart_Demos#multi|multi (Page "Field")]]  
 +
  file:nandemo.png                     | [[TAChart_Demos#nan|nan]]  
 +
  file:navigatedemo.png               | [[TAChart_Demos#navigate|navigate]]  
 +
  file:noguidemo.png                   | [[TAChart_Demos#nogui|nogui]]  
 +
  file:opengldemo.png                 | [[TAChart_Demos#opengl|opengl]]  
 +
  file:panesdemo.png                   | [[TAChart_Demos#panes|panes]]  
 +
  file:printdemo.png                   | [[TAChart_Demos#print|print]]  
 +
  file:radialdemo_pie.png             | [[TAChart_Demos#radial|radial (page "Pie")]]  
 +
  file:radialdemo_polar.png           | [[TAChart_Demos#radial|radial (page "Polar")]]  
 +
  file:rotatedemo.png                 | [[TAChart_Demos#rotate|rotate]]  
 +
  file:savedemo.png                   | [[TAChart_Demos#save|save]]
 +
  file:scriptdemo.png                 | [[TAChart_Demos#script|script]]
 +
  file:toolsdemo.png                   | [[TAChart_Demos#tools|tools]]
 +
  file:wmfdemo.png                     | [[TAChart_Demos#wmf|wmf]]
 
</gallery>
 
</gallery>
  
Line 65: Line 78:
 
=== 3d ===
 
=== 3d ===
 
[[file:zdemo.png|thumbnail|upright 1.5]]
 
[[file:zdemo.png|thumbnail|upright 1.5]]
The project '''<code>zdemo</code>''' in the folder <code>3d</code> illustrates creation of a simple 3d effect in TAChart. Some series types have a property <code>Depth</code> allowing to extrude the series into the third dimension. Using the property <code>ZPosition</code> the series can be "shifted" back and forth into the depth dimension. The same property allows to move the axes and the grid to the front.  
+
The project '''<tt>zdemo</tt>''' in the folder <tt>3d</tt> illustrates creation of a simple 3d effect in TAChart. Some series types have a property <tt>Depth</tt> allowing to extrude the series into the third dimension. Using the property <tt>ZPosition</tt> the series can be "shifted" back and forth into the depth dimension. The same property allows to move the axes and the grid to the front.  
 
<br clear="all" />
 
<br clear="all" />
  
 
=== aggpas ===
 
=== aggpas ===
 
[[file:aggpasdemo.png|thumbnail|upright 1.5]]
 
[[file:aggpasdemo.png|thumbnail|upright 1.5]]
For improved rendering quality, TAChart can take advantage of the fast and powerful [http://www.crossgl.com/aggpas/ AggPas] library with anti-aliased drawing and subpixel accuracy. The project <code>aggpasdemo</code> shows the necessary code to achieve this:
+
For improved rendering quality, TAChart can take advantage of the fast and powerful [http://www.crossgl.com/aggpas/ AggPas] library with anti-aliased drawing and subpixel accuracy. The project <tt>aggpasdemo</tt> shows the necessary code to achieve this:
  
* Add a <code>TChartGUIConnectorAggPas</code> to the form and assign it to the property <code>GUIConnector</code> of the form
+
* Add a <tt>TChartGUIConnectorAggPas</tt> to the form and assign it to the property <tt>GUIConnector</tt> of the form
* Or, use a <code>TPaintbox</code> and use the code given in <code>TForm1.PaintBox1Paint</code> in its <code>OnPaint</code> event.
+
* Or, use a <tt>TPaintbox</tt> and use the code given in <tt>TForm1.PaintBox1Paint</tt> in its <tt>OnPaint</tt> event.
  
Note that this feature is not yet available in Lazarus 1.2 and requires the trunk version. Packages <code>AggPasLCL</code> and <code>TACharstAggPas</code> are needed to compile the demo.
+
Note that this feature is not yet available in Lazarus 1.2 and requires the trunk version. Packages <tt>AggPasLCL</tt> and <tt>TACharstAggPas</tt> are needed to compile the demo.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== animate ===
 
=== animate ===
 
[[File:TAChart_Animate_Demo.jpg|thumbnail|upright 1.5]]
 
[[File:TAChart_Animate_Demo.jpg|thumbnail|upright 1.5]]
The '''<code>animatedemo</code>''' presents animation of a bar chart. The main animation work is done by a <code>TCustomAnimatedChartSource</code> created at runtime and its <code>OnGetItem</code> event.
+
The '''<tt>animatedemo</tt>''' presents animation of a bar chart. The main animation work is done by a <tt>TCustomAnimatedChartSource</tt> created at runtime and its <tt>OnGetItem</tt> event.
 
<br clear="all" />
 
<br clear="all" />
  
Line 87: Line 100:
 
The project "axis" shows some fundamental and advanced aspects of axis formatting and layout in a multi-page form:
 
The project "axis" shows some fundamental and advanced aspects of axis formatting and layout in a multi-page form:
  
Page '''Customized marks''' demonstrates how painting of the marks of an axis can be controlled by modifying their properties, such as <code>Marks.LabelBrush</code>, <code>Marks.Frame</code>, or <code>Marks.LabelFont</code>. Highlighting of individual marks can be done by assigning a handler to the axis event <code>OnMarksToText</code>:
+
Page '''Customized marks''' demonstrates how painting of the marks of an axis can be controlled by modifying their properties, such as <tt>Marks.LabelBrush</tt>, <tt>Marks.Frame</tt>, or <tt>Marks.LabelFont</tt>. Highlighting of individual marks can be done by assigning a handler to the axis event <tt>OnMarksToText</tt>:
  
<syntaxhighlight>
+
<syntaxhighlight lang=pascal>
 
procedure TForm1.ChartCustomMarksAxisList1MarkToText(var AText: String; AMark: Double);
 
procedure TForm1.ChartCustomMarksAxisList1MarkToText(var AText: String; AMark: Double);
 
begin
 
begin
Line 105: Line 118:
  
 
[[File:axis_submarks.png|thumbnail|upright 1.5]]
 
[[File:axis_submarks.png|thumbnail|upright 1.5]]
In the next page, '''Submarks''', a minor axis is used along the x axis, and smaller labels are drawn for each tick of the minor axis. This effect is achieved by adding an additional axis to the property <code>Minors</code>. Minor axes have their own set of marks and labels.
+
In the next page, '''Submarks''', a minor axis is used along the x axis, and smaller labels are drawn for each tick of the minor axis. This effect is achieved by adding an additional axis to the property <tt>Minors</tt>. Minor axes have their own set of marks and labels.
 
<br clear = "all" />
 
<br clear = "all" />
  
Line 113: Line 126:
  
 
[[File:axis_intervals.png|thumbnail|upright 1.5]]
 
[[File:axis_intervals.png|thumbnail|upright 1.5]]
The most prominent feature of the demo in page '''Intervals''' is that the same y data are displayed on several axes with different settings of the <code>Intervals</code> property. The x axis demonstrates how the range of displayed labels can be limited by means of the axis property <code>Marks.Range</code>.
+
The most prominent feature of the demo in page '''Intervals''' is that the same y data are displayed on several axes with different settings of the <tt>Intervals</tt> property. The x axis demonstrates how the range of displayed labels can be limited by means of the axis property <tt>Marks.Range</tt>.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[File:axis_position.png|thumbnail|upright 1.5]]
 
[[File:axis_position.png|thumbnail|upright 1.5]]
Page '''Position''' demonstrates that axes do not have to be at the edge of a chart. In plots of mathematical function, for examples, the axes usually run through the origin at x=0 and y=0. Modifying the property <code>Position</code> of an axis allows to place it at any position. The demo shows also how an additional axis can be added at the chart edge.
+
Page '''Position''' demonstrates that axes do not have to be at the edge of a chart. In plots of mathematical function, for examples, the axes usually run through the origin at x=0 and y=0. Modifying the property <tt>Position</tt> of an axis allows to place it at any position. The demo shows also how an additional axis can be added at the chart edge.
  
 
=== axisalign ===
 
=== axisalign ===
 
[[File:axisalign.png|thumbnail|upright 1.5]]
 
[[File:axisalign.png|thumbnail|upright 1.5]]
In new TAChart versions after Lazarus 1.2.6, the chart axis has a new property <code>LabelSize</code> which - if different from <code>0</code> - overrides the automatic axis positioning mechanism. Therefore, this property can be used to align the axis lines of charts which are stacked or positioned side-by-side and in which the axis labels have different lengths.
+
In new TAChart versions after Lazarus 1.2.6, the chart axis has a new property <tt>LabelSize</tt> which - if different from <tt>0</tt> - overrides the automatic axis positioning mechanism. Therefore, this property can be used to align the axis lines of charts which are stacked or positioned side-by-side and in which the axis labels have different lengths.
 
<br clear="all" />
 
<br clear="all" />
  
Line 141: Line 154:
  
 
[[File:axistransf_logarithm.png|thumbnail|upright 1.5]]
 
[[File:axistransf_logarithm.png|thumbnail|upright 1.5]]
A plot with logarithmic axis is displayed on page '''Logarithm'''. The striped background layout is achieved by means of a <code>TChartStyles</code> component.
+
A plot with logarithmic axis is displayed on page '''Logarithm'''. The striped background layout is achieved by means of a <tt>TChartStyles</tt> component.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[File:axistransf_normal_dist.png|thumbnail|upright 1.5]]
 
[[File:axistransf_normal_dist.png|thumbnail|upright 1.5]]
Page '''Normal distribution''' shows a series with random data, their statistical distribution follows a Normal Distribution. Using a <code>TCumulNormDistrAxisTransform</code> the cumulated probability distribution can be distorted to follow a straight line.
+
Page '''Normal distribution''' shows a series with random data, their statistical distribution follows a Normal Distribution. Using a <tt>TCumulNormDistrAxisTransform</tt> the cumulated probability distribution can be distorted to follow a straight line.
 
<br clear="all" />
 
<br clear="all" />
  
Line 151: Line 164:
 
The chart on page '''User defined''' contains a purple vertical line which acts like a magnifier: The series is zoomed horizontally in the vicinity around this line. Dragging the line allows to blow up any part of the series.
 
The chart on page '''User defined''' contains a purple vertical line which acts like a magnifier: The series is zoomed horizontally in the vicinity around this line. Dragging the line allows to blow up any part of the series.
  
This local zoom effect is achieved by means of a <code>TUserDefinedAxisTransform</code>. In this transform, the axis transformation is defined by the handler of the event <code>OnAxisToGraph</code>.
+
This local zoom effect is achieved by means of a <tt>TUserDefinedAxisTransform</tt>. In this transform, the axis transformation is defined by the handler of the event <tt>OnAxisToGraph</tt>.
 +
<br clear="all" />
 +
 
 +
=== barseriesshapes ===
 +
[[file:barshapesdemo.png|thumbnail|upright 1.5]]
 +
Demonstrates usage of alternative bar shapes in 3D TBarSeries.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== basic ===
 
=== basic ===
 
[[file:basicdemo.png|thumbnail|upright 1.5]]
 
[[file:basicdemo.png|thumbnail|upright 1.5]]
Basic operation with charts and series is demonstrated in the <code>basicdemo</code> project. The demo shows
+
Basic operation with charts and series is demonstrated in the <tt>basicdemo</tt> project. The demo shows
 
* how to create a series at runtime and add it to the chart
 
* how to create a series at runtime and add it to the chart
* how to add data to a series (<code>series.AddXY(...)</code>)
+
* how to add data to a series (<tt>series.AddXY(...)</tt>)
* how to clear series (<code>Chart1.ClearSeries</code>)
+
* how to clear series (<tt>Chart1.ClearSeries</tt>)
* how to change the z position of a series (<code>TForm1.BringToFront</code>)
+
* how to change the z position of a series (<tt>TForm1.BringToFront</tt>)
 
* how to show/hide axes, axis grid, titles and the legend
 
* how to show/hide axes, axis grid, titles and the legend
 
* how to invert the axis direction
 
* how to invert the axis direction
Line 168: Line 186:
 
=== bgra ===
 
=== bgra ===
 
[[file:bgrademo.png|thumbnail|upright 1.5]]
 
[[file:bgrademo.png|thumbnail|upright 1.5]]
For improved rendering quality, TAChart can take advantage of the fast and powerful [[BGRABitmap]] library with anti-aliased drawing and subpixel accuracy. The project <code>bgrademo</code> shows the necessary code to achieve this:
+
For improved rendering quality, TAChart can take advantage of the fast and powerful [[BGRABitmap]] library with anti-aliased drawing and subpixel accuracy. The project <tt>bgrademo</tt> shows the necessary code to achieve this:
  
* Add a <code>TChartGUIConnectorBGRA</code> to the form and assign it to the property <code>GUIConnector</code> of the form
+
* Add a <tt>TChartGUIConnectorBGRA</tt> to the form and assign it to the property <tt>GUIConnector</tt> of the form
* Or, use a <code>TPaintbox</code> and use the code given in <code>TForm1.PaintBox1Paint</code> in its <code>OnPaint</code> event.
+
* Or, use a <tt>TPaintbox</tt> and use the code given in <tt>TForm1.PaintBox1Paint</tt> in its <tt>OnPaint</tt> event.
  
Packages <code>bgrabitmappack</code> and <code>TAChartBgra</code> are needed to compile the demo.
+
Packages <tt>bgrabitmappack</tt> and <tt>TAChartBgra</tt> are needed to compile the demo.
  
 
{{Note|There is a special wiki page [[BGRABitmap_tutorial_TAChart|BGRABitmap Tutorial TAChart]] giving step-by-step instructions how to create a chart like the one in the image at the right.}}
 
{{Note|There is a special wiki page [[BGRABitmap_tutorial_TAChart|BGRABitmap Tutorial TAChart]] giving step-by-step instructions how to create a chart like the one in the image at the right.}}
 +
<br clear="all" />
 +
 +
=== charteditordemo ===
 +
[[file:charteditor_dialog.png|thumbnail|upright 1.5]]
 +
The '''charteditordemo''' project shows a gui how the user could interactively change most elements of a chart. Besides the <tt>TDataPointClickTool</tt>, the project relies strongly on the dedicated chart tools <tt>TTitleFootClickTool</tt>, <tt>TAxisClickTool</tt> and <tt>TLegendClickTool</tt> which were introduced in Lazarus v2.1.
 +
<br clear="all" />
 +
 +
=== chartsource ===
 +
The demo project '''chartsource''' illustrates various use cases for chart source components
 +
[[file:chartsource_basic.png|thumbnail|upright 1.5]]
 +
Page '''Basic'' demonstrates that the same chartsource can be attached to several series and be used in several charts. In this example data are provided by means of a <tt>TListChartSource</tt> and a <tt>TRandomChartSource</tt>.
 +
<br clear="all" />
 +
 +
[[file:chartsource_statistics.png|thumbnail|upright 1.5]]
 +
Page '''Statistics''' illustrates some applications of the <tt>TCalculatedChartSoruce</tt>: cumulative sums and moving average
 +
<br clear="all" />
 +
 +
[[file:chartsource_derivative.png|thumbnail|upright 1.5]]
 +
Page '''Derivative''' highlights numerical calculation and plotting of derivatives of data series using the <tt>TCalculatedChartSource</tt>.
 +
<br clear="all" />
 +
 +
[[file:chartsource_sorting.png|thumbnail|upright 1.5]]
 +
Page '''Sorting''' shows how the data values of a <tt>TUserDefinedChartSource</tt> can be sorted by means of a <tt>TSortedChartSource</tt> having it as <tt>Origin</tt>. This is an interesting application for a <tt>TBubbleSeries</tt>: when the data points are sorted by radius (y value with y index 1) in descending order the bubble are drawn from back to front. Therefore, it is not possible that bubbles are completely covered by anothers.
 
<br clear="all" />
 
<br clear="all" />
  
Line 182: Line 223:
 
Page '''Series''' of the "clonedemo" demonstrates how a series can be duplicated ("cloned"):
 
Page '''Series''' of the "clonedemo" demonstrates how a series can be duplicated ("cloned"):
  
<source>
+
<syntaxhighlight lang=pascal>
 
   bs := TBarSeries.Create(Self);
 
   bs := TBarSeries.Create(Self);
 
   bs.Assign(ChartSeries.Series[i]);
 
   bs.Assign(ChartSeries.Series[i]);
 
   bs.BarOffsetPercent := bs.BarOffsetPercent + 20;
 
   bs.BarOffsetPercent := bs.BarOffsetPercent + 20;
 
   ChartSeries.AddSeries(bs);
 
   ChartSeries.AddSeries(bs);
</source>
+
</syntaxhighlight>
  
 
Cloning of a chart, on page '''Charts''', is even simpler:
 
Cloning of a chart, on page '''Charts''', is even simpler:
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
   ch := Chart1.Clone;  
 
   ch := Chart1.Clone;  
</source>
+
</syntaxhighlight>
 +
 
 +
<br clear="all" />
 +
 
 +
=== combobox ===
 +
[[file:combodemo.png|thumbnail|upright 1.5]]
 +
Application of the <tt>TChartCombobox</tt> is demonstrated by project "combodemo". It contains a chart with a line, bar and area series and has a sidebar for editing the appearance of these series. Brush and pen styles, pen widths and line series pointer styles can be changed by using this decicated multi-featured combobox. The standard <tt>TColorBox</tt> is used for modifying colors.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== distance ===
 
=== distance ===
 
[[File:distancedemo-main.png|thumbnail|upright 1.5]]
 
[[File:distancedemo-main.png|thumbnail|upright 1.5]]
The [[TAChart_documentation#Data_point_distance_tool|<code>TDataPointDistanceTool</code>]] was designed to measure the distance of data points in a chart. The '''<code>distancedemo</code>''' demonstrates is application.
+
The [[TAChart_documentation#Data_point_distance_tool|<tt>TDataPointDistanceTool</tt>]] was designed to measure the distance of data points in a chart. The '''<tt>distancedemo</tt>''' demonstrates is application.
  
Page '''Main''' allows to play with the main parameters of the tool. Use the left button to drag a measurement bar across the screen. The mouse-down event determines the starting point, while during dragging the end point is defined by the current mouse position. The distance is displayed in a label above the measurement line. The label can be turned off by setting the tool's <code>Marks.Visible</code> to </false>. Rotation of the label along with the measurement bar is controlled by some of the tool's <code>Options</code>. The properties <code>DataPointModeStart</code> and <code>DataPointModeEnd</code> determine whether the measurements starts or ends, respectively, at arbitrary points in the chart (<code>dpmFree</code>), or only at data points (<code>dpmSnap</code> or <code>dpmLock</code>, where <code>dpmLock</code> means that the measurement line is only visible when the mouse is near data points, in case of <code>dpmSnap</code> it is always visible but jumps to the next data point when the mouse gets close enough).
+
Page '''Main''' allows to play with the main parameters of the tool. Use the left button to drag a measurement bar across the screen. The mouse-down event determines the starting point, while during dragging the end point is defined by the current mouse position. The distance is displayed in a label above the measurement line. The label can be turned off by setting the tool's <tt>Marks.Visible</tt> to <tt>false</tt>. Rotation of the label along with the measurement bar is controlled by some of the tool's <tt>Options</tt>. The properties <tt>DataPointModeStart</tt> and <tt>DataPointModeEnd</tt> determine whether the measurements starts or ends, respectively, at arbitrary points in the chart (<tt>dpmFree</tt>), or only at data points (<tt>dpmSnap</tt> or <tt>dpmLock</tt>, where <tt>dpmLock</tt> means that the measurement line is only visible when the mouse is near data points, in case of <tt>dpmSnap</tt> it is always visible but jumps to the next data point when the mouse gets close enough).
  
Press the {{keypress|SHIFT}} key while the left mouse button is down to zoom into the chart by a given factor; zoom returns when {{keypress|SHIFT}} is released (code in <code>TForm1.ctDistance1BeforeKeyDown</code>).
+
Press the {{keypress|SHIFT}} key while the left mouse button is down to zoom into the chart by a given factor; zoom returns when {{keypress|SHIFT}} is released (code in <tt>TForm1.ctDistance1BeforeKeyDown</tt>).
  
 
<br clear="all" />
 
<br clear="all" />
  
 
[[File:distancedemo-fit.png|thumbnail|upright 1.5]]
 
[[File:distancedemo-fit.png|thumbnail|upright 1.5]]
Page '''Fit''' shows a more advanced application of the distance tool. It uses its <code>OnGetDistanceText</code> event to fit a polynomial to the data between the start and end points of the measurement line. Fitting is done by means of a <code>TFitSeries</code>. The radiobuttons at the top ("Mean", "slope", "find peak") determine the degree of the fitted polynomial (0, 2, or 2, respectively). The fitted curved is drawn between the end points of the measurement line. For the code, see <code>TForm1.ctFitDataPointDistanceTool1GetDistanceText</code>.
+
Page '''Fit''' shows a more advanced application of the distance tool. It uses its <tt>OnGetDistanceText</tt> event to fit a polynomial to the data between the start and end points of the measurement line. Fitting is done by means of a <tt>TFitSeries</tt>. The radiobuttons at the top ("Mean", "slope", "find peak") determine the degree of the fitted polynomial (0, 2, or 2, respectively). The fitted curved is drawn between the end points of the measurement line. For the code, see <tt>TForm1.ctFitDataPointDistanceTool1GetDistanceText</tt>.
  
 
This kind of measurement is initiated by dragging with the right mouse button, while the left-drag controls a standard zooming process.
 
This kind of measurement is initiated by dragging with the right mouse button, while the left-drag controls a standard zooming process.
Line 216: Line 264:
 
=== events ===
 
=== events ===
 
[[file:eventsdemo.png|thumbnail|upright 1.5]]
 
[[file:eventsdemo.png|thumbnail|upright 1.5]]
TAChart exposes several events to control the appearence of the chart beyond the properties provided in the object inspector. The project <code>eventdemo</code> shows the effect of three typical events:
+
TAChart exposes several events to control the appearence of the chart beyond the properties provided in the object inspector. The project <tt>eventdemo</tt> shows the effect of three typical events:
  
* <code>TChart.OnBeforeDrawBackground</code> is called before painting the entire background rectangle of the chart. The demo shows how the background can be drawn as a gradient.
+
* <tt>TChart.OnBeforeDrawBackground</tt> is called before painting the entire background rectangle of the chart. The demo shows how the background can be drawn as a gradient.
* <code>TChart.OnBeforeDrawBackWall</code> is a possibilty to replace painting of the backwall of the chart by a user-provided procedure (the "backwall" is the rectangle enclosed by the chart axes). Here, the backwall is drawn as another gradient.
+
* <tt>TChart.OnBeforeDrawBackWall</tt> is a possibilty to replace painting of the backwall of the chart by a user-provided procedure (the "backwall" is the rectangle enclosed by the chart axes). Here, the backwall is drawn as another gradient.
* <code>BarSeries.OnBeforeDrawBar</code> allows to intercept the drawing process of a bar series. In the demo every other bar is drawn in a different fill style.
+
* <tt>BarSeries.OnBeforeDrawBar</tt> allows to intercept the drawing process of a bar series. In the demo every other bar is drawn in a different fill style.
All events provide a parameter <code>ADoDefaultDrawing</code> to skip the built-in drawing procedure if set to <code>false</code>. In the BarSeries example the 5th bar is dropped by this way.
+
All events provide a parameter <tt>ADoDefaultDrawing</tt> to skip the built-in drawing procedure if set to <tt>false</tt>. In the BarSeries example the 5th bar is dropped by this way.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== extent ===
 
=== extent ===
 
[[file:extentdemo.png|thumbnail|upright 1.5]]
 
[[file:extentdemo.png|thumbnail|upright 1.5]]
The project <code>extentdemo</code> shows how the extent of a chart, i.e. the start and end of each axis, can be modified (properties <code>Chart.Extent.XMin</code>, <code>Chart.Extent.UseXMin</code>, etc.).
+
The project <tt>extentdemo</tt> shows how the extent of a chart, i.e. the start and end of each axis, can be modified (properties <tt>Chart.Extent.XMin</tt>, <tt>Chart.Extent.UseXMin</tt>, etc.).
  
 
In addition the demo provides code how to setup an extent history which is interesting for undoing extent changes by zooming and panning (see tutorial on "[[TAChart_Tutorial:_ColorMapSeries,_Zooming|ColorMapSeries, zooming]]").
 
In addition the demo provides code how to setup an extent history which is interesting for undoing extent changes by zooming and panning (see tutorial on "[[TAChart_Tutorial:_ColorMapSeries,_Zooming|ColorMapSeries, zooming]]").
Line 233: Line 281:
 
=== fit ===
 
=== fit ===
 
[[file:fitdemo.png|thumbnail|upright 1.5]]
 
[[file:fitdemo.png|thumbnail|upright 1.5]]
Basic fitting of equations to data by means of <code>TFitSeries</code> is illustrated by project '''<code>fitdemo</code>'''. The demo shows
+
Basic fitting of equations to data by means of <tt>TFitSeries</tt> is illustrated by project '''<tt>fitdemo</tt>'''. The demo shows
* how to select the fitting function and the number of fitting parameters (<code>TFitSeries.FitEquation</code>, <code>TFitSeries.ParamCount</code>).
+
* how to select the fitting function and the number of fitting parameters (<tt>TFitSeries.FitEquation</tt>, <tt>TFitSeries.ParamCount</tt>).
* how to restrict the data range for fitting (<code>TFitSeries.FitRange</code>)
+
* how to restrict the data range for fitting (<tt>TFitSeries.FitRange</tt>)
* how to extract the values of the fitted parameters (<code>TFitSeries.Param[]</code>)
+
* how to extract the values of the fitted parameters (<tt>TFitSeries.Param[]</tt>)
  
 
In addition, the usage of logarithmic x and/or y axes is demonstrated.
 
In addition, the usage of logarithmic x and/or y axes is demonstrated.
Line 245: Line 293:
 
=== func ===
 
=== func ===
 
[[file:funcdemo-domain.png|thumbnail|upright 1.5]]
 
[[file:funcdemo-domain.png|thumbnail|upright 1.5]]
The project '''<code>funcdemo</code>''' gives examples of the usage of function series.
+
The project '''<tt>funcdemo</tt>''' gives examples of the usage of function series.
  
The first page of this multi-tab project, '''Domain''', demonstrates the [[TAChart_documentation#Function_series|<code>TFuncSeries</code>]]. This series plots a mathematical function. The function values are passed to the series by means of an event handler for <code>OnCalculate</code>. This series type has the advantage that the plot is always smooth independent of zooming. The function <code>y=1/sin(x)</code> drawn in the screenshot at the right is not defined for integer multiples of <code>pi</code>. Therefore, standard output draws vertical connection lines at these points. This artefact can be avoided by adding the points with undefined function values to the <code>DomainExclusions</code> of the series. Click at "Domain" to see this effect.
+
The first page of this multi-tab project, '''Domain''', demonstrates the [[TAChart_documentation#Function_series|<tt>TFuncSeries</tt>]]. This series plots a mathematical function. The function values are passed to the series by means of an event handler for <tt>OnCalculate</tt>. This series type has the advantage that the plot is always smooth independent of zooming. The function <tt>y=1/sin(x)</tt> drawn in the screenshot at the right is not defined for integer multiples of <tt>pi</tt>. Therefore, standard output draws vertical connection lines at these points. This artefact can be avoided by adding the points with undefined function values to the <tt>DomainExclusions</tt> of the series. Click at "Domain" to see this effect.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[file:funcdemo-colormap.png|thumbnail|upright 1.5]]
 
[[file:funcdemo-colormap.png|thumbnail|upright 1.5]]
The [[TAChart_documentation#Color_map_series|<code>TColorMapSeries</code>]] shown on page '''Color map''' is similar to <code>TFuncSeries</code>, however, it requires an x and y value to calculate the function value z which is encoded as a color. The calculation is done again in the event handler for <code>OnCalculate</code>. The colors are assigned to the z values by means of a ListChartSource which is assigned to the <code>ColorSource</code> property of the series.
+
The [[TAChart_documentation#Color_map_series|<tt>TColorMapSeries</tt>]] shown on page '''Color map''' is similar to <tt>TFuncSeries</tt>, however, it requires an x and y value to calculate the function value z which is encoded as a color. The calculation is done again in the event handler for <tt>OnCalculate</tt>. The colors are assigned to the z values by means of a ListChartSource which is assigned to the <tt>ColorSource</tt> property of the series.
  
 
{{Note|The tutorial [[TAChart_Tutorial:_ColorMapSeries,_Zooming|ColorMapSeries, Zoomin]] explains in detail how the ColorMapSeries is applied.}}
 
{{Note|The tutorial [[TAChart_Tutorial:_ColorMapSeries,_Zooming|ColorMapSeries, Zoomin]] explains in detail how the ColorMapSeries is applied.}}
Line 257: Line 305:
  
 
[[file:funcdemo-parametric.png|thumbnail|upright 1.5]]
 
[[file:funcdemo-parametric.png|thumbnail|upright 1.5]]
Page '''Parametric''' shows another function series requiring an <code>OnCalculate</code> event handler, the <code>TParametricCurveSeries</code>. Here, a single parameter (<code>t</code>) is used to calculate the <code>x</code> and <code>y</code> values. The example shows the parametric function defined by <br>
+
Page '''Parametric''' shows another function series requiring an <tt>OnCalculate</tt> event handler, the <tt>TParametricCurveSeries</tt>. Here, a single parameter (<tt>t</tt>) is used to calculate the <tt>x</tt> and <tt>y</tt> values. The example shows the parametric function defined by <br>
<code>x(t) = cos(a*t) - cos(b*t)^j</code> <br>
+
<tt>x(t) = cos(a*t) - cos(b*t)^j</tt> <br>
<code>y(t) = sin(c*t) - sin(d*d)^k</code>.
+
<tt>y(t) = sin(c*t) - sin(d*d)^k</tt>.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[file:funcdemo-spline.png|thumbnail|upright 1.5]]
 
[[file:funcdemo-spline.png|thumbnail|upright 1.5]]
The [[TAChart_documentation#Cubic_spline_series|<code>TCubicSplineSeries</code>]] shown on page '''Spline''' is similar to a standard <code>TLineSeries</code> (black), but the data points are not connected by straight line segments, but by smooth cubic [http://en.wikipedia.org/wiki/Spline_%28mathematics%29 spline] curves (bright blue). The [[TAChart_documentation#B-spline_series|<code>TBSplineSeries</code>]] (green) is similar, but the spline does not pass through the data points and, therefore, achieves even better smoothing.
+
The [[TAChart_documentation#Cubic_spline_series|<tt>TCubicSplineSeries</tt>]] shown on page '''Spline''' is similar to a standard <tt>TLineSeries</tt> (black), but the data points are not connected by straight line segments, but by smooth cubic [http://en.wikipedia.org/wiki/Spline_%28mathematics%29 spline] curves (bright blue). The [[TAChart_documentation#B-spline_series|<tt>TBSplineSeries</tt>]] (green) is similar, but the spline does not pass through the data points and, therefore, achieves even better smoothing.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[file:funcdemo-autoyextent.png|thumbnail|upright 1.5]]
 
[[file:funcdemo-autoyextent.png|thumbnail|upright 1.5]]
Page '''Auto y extent''' gives a solution to the problem that it is normally not possible to automatically adjust the y axis to the extent of data values. <code>TFuncSeries</code> was equipped with a property <code>ExtentAutoY</code> which has to be enabled for this purpose.
+
Page '''Auto y extent''' gives a solution to the problem that it is normally not possible to automatically adjust the y axis to the extent of data values. <tt>TFuncSeries</tt> was equipped with a property <tt>ExtentAutoY</tt> which has to be enabled for this purpose.
 
<br clear="all" />
 
<br clear="all" />
  
 +
 +
=== html ===
 +
[[file:html_demo.png|thumbnail|upright 1.5]]
 +
Embedding of html tags and entities in TAChart text elements is demonstrated by the project '''<tt>html</tt>'''. This feature is activated by setting the <tt>TextFormat</tt> of the corresponding text element to <tt>tfHTML</tt>. The codes used can be show by checking the corresponding checkboxes; the title of the x axis, for example, is written as <tt>'Angle &amp;alpha;, &amp;deg;</tt>'.
 +
 +
The buttons "Copy to clipboard", "Save to WMF" and "Save to SVG" demonstrate that this special formatting is retained when copying a chart to the clipboard or when saving it to a graphics file.
 +
 +
<br clear="all" />
  
 
=== legend ===
 
=== legend ===
 
[[file:legenddemo-page1.png‎|thumbnail|upright 1.5]]
 
[[file:legenddemo-page1.png‎|thumbnail|upright 1.5]]
The project '''<code>legenddemo</code>''' demonstrates how the legend of the TChart component can be used and modified. (Please note that after Lazarus version 1.2 the project window contains two pages; in older versions, only the first page is available).
+
The project '''<tt>legenddemo</tt>''' demonstrates how the legend of the TChart component can be used and modified. (Please note that after Lazarus version 1.2 the project window contains two pages; in older versions, only the first page is available).
  
 
Page '''Basic''' demonstrates fundamental work with the legend:
 
Page '''Basic''' demonstrates fundamental work with the legend:
* showing series names (<code>series.Legend.Multiplicity = lmSingle</code>)
+
* showing series names (<tt>series.Legend.Multiplicity = lmSingle</tt>)
* showing series data (<code>series.Legend.Multiplicity = lmPoint</code>, demonstrated for the pie series)
+
* showing series data (<tt>series.Legend.Multiplicity = lmPoint</tt>, demonstrated for the pie series)
* owner-drawing series icons for the legend by means of the event <code>OnDrawLegend</code> of a series (see <code>procedure Chart1FuncSeries1DrawLegend</code>)
+
* owner-drawing series icons for the legend by means of the event <tt>OnDrawLegend</tt> of a series (see <tt>procedure Chart1FuncSeries1DrawLegend</tt>)
* using legend group titles (<code>Chart.Legend.GroupTitles</code>)
+
* using legend group titles (<tt>Chart.Legend.GroupTitles</tt>)
* manually adding legend items (event <code>series.Legend.OnCreate</code>, demonstrated for <code>Chart1FuncSeries1</code>). Note the workaround for a bug in <code>FormCreate</code>.
+
* manually adding legend items (event <tt>series.Legend.OnCreate</tt>, demonstrated for <tt>Chart1FuncSeries1</tt>). Note the workaround for a bug in <tt>FormCreate</tt>.
 
* run-time modification of properties for positioning of the legend.
 
* run-time modification of properties for positioning of the legend.
 
<br clear="all" />
 
<br clear="all" />
 
[[file:legenddemo-page2.png‎|thumbnail|upright 1.5]]
 
[[file:legenddemo-page2.png‎|thumbnail|upright 1.5]]
The second page ('''OwnerDraw''') explains how the legend can be drawn as a gradient bar. For this purpose an event handler must be written for the chart's event <code>OnDrawLegend</code>. The gradient is drawn by calling the following procedure:
+
The second page ('''OwnerDraw''') explains how the legend can be drawn as a gradient bar. For this purpose an event handler must be written for the chart's event <tt>OnDrawLegend</tt>. The gradient is drawn by calling the following procedure:
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
procedure DrawGradient(ADrawer: IChartDrawer; ARect: TRect;
 
procedure DrawGradient(ADrawer: IChartDrawer; ARect: TRect;
 
   AStartColor, AEndColor: TColor);
 
   AStartColor, AEndColor: TColor);
Line 299: Line 356:
 
     ADrawer.Line(ARect.Left, y, ARect.Right, y);
 
     ADrawer.Line(ARect.Left, y, ARect.Right, y);
 
   end;
 
   end;
end; </source>
+
end;  
 +
</syntaxhighlight>
 
<br clear="all" />
 
<br clear="all" />
  
 
=== line===
 
=== line===
 
[[file:linedemo-fast.png|thumbnail|upright 1.5]]
 
[[file:linedemo-fast.png|thumbnail|upright 1.5]]
The <code>linedemo</code> illustrates some aspects of line series.
+
The <tt>linedemo</tt> illustrates some aspects of line series.
  
 
Page '''Fast drawing''':
 
Page '''Fast drawing''':
* Change the selection of the combobox to switch between different <code>LineType</code>s of the series. The screen shot at the right is created with the setting <code>LineType = ltStepXY</code>.
+
* Change the selection of the combobox to switch between different <tt>LineType</tt>s of the series. The screen shot at the right is created with the setting <tt>LineType = ltStepXY</tt>.
 
* Create a 3D look by checking the option "3D".  
 
* Create a 3D look by checking the option "3D".  
* Interchange the <code>x</code> and <code>y</code> axes by checking "Rotated".
+
* Interchange the <tt>x</tt> and <tt>y</tt> axes by checking "Rotated".
 
* Quickly add 600,000 data points and measure the time for a refresh.
 
* Quickly add 600,000 data points and measure the time for a refresh.
 
<br clear="all" />
 
<br clear="all" />
Line 315: Line 373:
 
[[file:linedemo-pointers.png|thumbnail|upright 1.5]]
 
[[file:linedemo-pointers.png|thumbnail|upright 1.5]]
  
Page '''Pointers''' shows a list of all pointers that are available for data point markers. The chart is created by using a lineseries with three data points for each pointer <code>Style</code>. The name of the style and a different color have been assigned to the center data point in the AddXY method of the series. The size of the pointers can be changed at runtime.
+
Page '''Pointers''' shows a list of all pointers that are available for data point markers. The chart is created by using a lineseries with three data points for each pointer <tt>Style</tt>. The name of the style and a different color have been assigned to the center data point in the AddXY method of the series. The size of the pointers can be changed at runtime.
 +
<br clear="all" />
 +
 
 +
[[file:linedemo-customdrawnpointer.png|thumbnail|upright 1.5]]
 +
 
 +
Page '''OnCustomdrawn pointer''' demonstrates how a bitmap can be used as a data pointer, and how only every n-th pointer can be drawn. This is done by means of the event <tt>OnCustomDrawPointer</tt>.
 +
<br clear="all" />
 +
 
 +
[[file:linedemo-ongetpointerstyle.png|thumbnail|upright 1.5]]
 +
 
 +
Using the event <tt>OnGetPointerStyle</tt> the pointers of individual data points of a line series can be changed. This is demonstrated on page '''OnGetPointerStyle'''..
 
<br clear="all" />
 
<br clear="all" />
  
Line 321: Line 389:
  
 
Page '''Oscilloscope''':
 
Page '''Oscilloscope''':
Driven by a timer, more and more data points are added to the line series. The oldest data point is deleted once the series contains more than 20 points. The series is updated continously and is drawn using   <code>LineType=ltStepXY</code>. The <code>OnTimer</code> event handler of the timer contains code to allow zooming into various parts of the chart while preserving the "oscilloscope" behavior.
+
Driven by a timer, more and more data points are added to the line series. The oldest data point is deleted once the series contains more than 20 points. The series is updated continously and is drawn using <tt>LineType=ltStepXY</tt>. The <tt>OnTimer</tt> event handler of the timer contains code to allow zooming into various parts of the chart while preserving the "oscilloscope" behavior.
 +
<br clear="all" />
 +
 
 +
[[file:linedemo-coloreach.png|thumbnail|upright 1.5]]
 +
 
 +
Page '''Color each data point''' applies the lineseries property <tt>ColorEach</tt> for colorizing individual datapoints and/or the adjacent line segments. The color is passed as the 4th parameter of the series method <tt>AddXY(x, y, text, color)</tt>.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== listbox ===
 
=== listbox ===
 
[[file:listboxdemo.png|thumbnail|upright 1.5]]
 
[[file:listboxdemo.png|thumbnail|upright 1.5]]
<code>TChartListbox</code> is a useful add-on to TAChart for interactively turning selected series on and off. Just add a <code>TChartListbox</code> to the form and link its <code>Chart</code> property to the chart of interest. The project <code>listboxdemo</code> demonstrates that there is a two-way communication between chart and listbox: when listbox items are checked/unchecked the corresponding series are shown/hidden. Conversely, when series are added/deleted/shown/hidden in the chart the changes are reflected in the listbox automatically.
+
<tt>TChartListbox</tt> is a useful add-on to TAChart for interactively turning selected series on and off. Just add a <tt>TChartListbox</tt> to the form and link its <tt>Chart</tt> property to the chart of interest. The project <tt>listboxdemo</tt> demonstrates that there is a two-way communication between chart and listbox: when listbox items are checked/unchecked the corresponding series are shown/hidden. Conversely, when series are added/deleted/shown/hidden in the chart the changes are reflected in the listbox automatically.
 +
<br clear="all" />
 +
 
 +
=== liveview, liveview-paned ===
 +
[[file:liveview.png|thumb|upright 1.0]] [[file:liveview-paned.png|thumb|upright 1.0]]
 +
These two projects demonstrate usage of the <tt>TChartLiveView</tt> component which displays, in a scrolling viewport, only the most recent data points arriving from some external source.
 +
 
 +
In order to apply a <tt>TChartLiveView</tt> set its <tt>Chart</tt> property to the chart to be controlled. Set <tt>Active</tt> to <tt>true</tt> to activate the live view. Property <tt>ViewportSize</tt> determines the width of the scrolling window in axis units.
 +
 
 +
While the <tt>liveview</tt> project applies to a normal chart with a single y axis, usage of several y axes is demonstrated in the <tt>liveview-paned</tt> project.
 +
The creation of a "paned chart" with several axes is the subject of the demo [[#panes|panes]].
 
<br clear="all" />
 
<br clear="all" />
  
 
=== multi ===
 
=== multi ===
 
[[file:multidemo-bubble.png|thumbnail|upright 1.5]]
 
[[file:multidemo-bubble.png|thumbnail|upright 1.5]]
Usage of series with multiple y values is the subject of project '''<code>multidemo</code>'''. <code>TListChartSource</code> provides storage for additional y values in the array <code>YList[]</code>.  
+
Usage of series with multiple y values is the subject of project '''<tt>multidemo</tt>'''. <tt>TListChartSource</tt> provides storage for additional y values in the array <tt>YList[]</tt>.  
  
 
See [[TAChart_documentation#Multi-valued_sources|TAChart documentation]] of more details.
 
See [[TAChart_documentation#Multi-valued_sources|TAChart documentation]] of more details.
  
Page '''Bubble''' shows a chart with a [[TAChart_documentation#Bubble_series|bubble series]]. This series draws data points as circles of variable radius centered at the data points. In addition to the standard <code>x</code>/<code>y</code> coordinates there must be a second y value to specify the radius. Since - as usual - a color value can be assigned to a data point bubble charts can show four-dimensional data.
+
Page '''Bubble''' shows a chart with a [[TAChart_documentation#Bubble_series|bubble series]]. This series draws data points as circles of variable radius centered at the data points. In addition to the standard <tt>x</tt>/<tt>y</tt> coordinates there must be a second y value to specify the radius. Since - as usual - a color value can be assigned to a data point bubble charts can show four-dimensional data.
 
<br clear="all" />
 
<br clear="all" />
  
 
[[file:multidemo-stacked.png|thumbnail|upright 1.5]]
 
[[file:multidemo-stacked.png|thumbnail|upright 1.5]]
Page '''Stacked''' shows stacked area, bar, or line series charts. Stacked series must provide a y value for the each stack levels. The <code>TChartStyles</code> component is used to define the color of the stacks.  
+
Page '''Stacked''' shows stacked area, bar, or line series charts. Stacked series must provide a y value for the each stack levels. The <tt>TChartStyles</tt> component is used to define the color of the stacks.  
  
 
{{Note|A detailed description how to create stacked charts is given in the tutorial [[TAChart_Tutorial:_Stacked_BarSeries|"Stacked bar series"]].}}
 
{{Note|A detailed description how to create stacked charts is given in the tutorial [[TAChart_Tutorial:_Stacked_BarSeries|"Stacked bar series"]].}}
Line 367: Line 450:
 
=== nan ===
 
=== nan ===
 
[[file:nandemo.png|thumbnail|upright 1.5]]
 
[[file:nandemo.png|thumbnail|upright 1.5]]
The project '''<code>nandemo</code>''' shows how values can be skipped from a series. Click on an x value in the checklistbox at the right to replace the x or y value of the corresponding data point by NaN. In a line series, a NaN value introduces a break in the originally continuous curve. In other series types, the effect is similar. See [[TAChart_documentation#Skipping_source_items|TAChart documentation]] of more details.
+
The project '''<tt>nandemo</tt>''' shows how values can be skipped from a series. Click on an x value in the checklistbox at the right to replace the x or y value of the corresponding data point by NaN. In a line series, a NaN value introduces a break in the originally continuous curve. In other series types, the effect is similar. See [[TAChart_documentation#Skipping_source_items|TAChart documentation]] of more details.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== navigate ===
 
=== navigate ===
 
[[file:navigatedemo.png|thumbnail|upright 1.5]]
 
[[file:navigatedemo.png|thumbnail|upright 1.5]]
For navigation in a zoomed chart, TAChart provides the components [[TAChart_documentation#Scroll_bars|TChartNavScrollbar]] and [[TAChart_documentation#Navigation_panel|TChartNavPanel]]. Usage of these components is demonstarted in the '''<code>navigatedemo</code>''' project.  
+
For navigation in a zoomed chart, TAChart provides the components [[TAChart_documentation#Scroll_bars|TChartNavScrollbar]] and [[TAChart_documentation#Navigation_panel|TChartNavPanel]]. Usage of these components is demonstarted in the '''<tt>navigatedemo</tt>''' project.  
  
The chart in which the navigation occurs must be assigned to this corresponding property. Note the property <code>MiniMap</code> which displays a reduced view of the chart and draws the current viewport as a highlighted rectangle.
+
The chart in which the navigation occurs must be assigned to this corresponding property. Note the property <tt>MiniMap</tt> which displays a reduced view of the chart and draws the current viewport as a highlighted rectangle.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== nogui ===
 
=== nogui ===
 
[[file:noguidemo.png|thumbnail|upright 1.5]]
 
[[file:noguidemo.png|thumbnail|upright 1.5]]
'''<code>noguidemo</code>''' demonstrates that TAChart can also be used for creating graphics output from console (no-gui) programs. This project creates a chart and a simple bar series at runtime and stores the output to a png file without a user-interface showing up.  
+
'''<tt>noguidemo</tt>''' demonstrates that TAChart can also be used for creating graphics output from console (no-gui) programs. This project creates a chart and a simple bar series at runtime and stores the output to a png file without a user-interface showing up.  
  
Note that the freetype-6.dll and zlib1.dll are required in the exe folder in order to run the demo.
+
Note that, for Windows, the <tt>freetype-6.dll</tt> and <tt>zlib1.dll</tt> are required in the exe folder in order to run the demo.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== opengl ===
 
=== opengl ===
 
[[file:opengldemo.png|thumbnail|upright 1.5]]
 
[[file:opengldemo.png|thumbnail|upright 1.5]]
'''<code>opengldemo</code>''' presents code how to use OpenGL for improved rendering quality of the chart by means of <code>TOpenGLDrawer</code>. See [[TAChart_documentation#OpenGL_drawer|TAChart documentation]] for details on this drawer. In addition, the demo illustrates also the usage of [[TAChart_documentation#Transparency|series transparency]].  
+
'''<tt>opengldemo</tt>''' presents code how to use OpenGL for improved rendering quality of the chart by means of <tt>TOpenGLDrawer</tt>. See [[TAChart_documentation#OpenGL_drawer|TAChart documentation]] for details on this drawer. In addition, the demo illustrates also the usage of [[TAChart_documentation#Transparency|series transparency]].  
  
Note that the package <code>LazOpenGLContext</code> needs to be installed to compile this demo.
+
Note that the package <tt>LazOpenGLContext</tt> needs to be installed to compile this demo.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== panes ===
 
=== panes ===
 
[[file:panesdemo.png|thumbnail|upright 1.5]]
 
[[file:panesdemo.png|thumbnail|upright 1.5]]
When working with multiple charts in the same window it sometimes required to use common axes. The '''<code>panes</code>''' demo projects shows two possibilities how to achieve this:
+
When working with multiple charts in the same window it sometimes required to use common axes. The '''<tt>panes</tt>''' demo projects shows two possibilities how to achieve this:
  
In page '''Link''' there are three charts, each with one series. The axes of the charts are linked by means of a <code>TChartExtentLink</code> component. The axes to be coupled are specified by the <code>Mode</code> property. Zoom in one of the chart by dragging a zoom rectangle with the left mouse button, and the other charts will follow.
+
In page '''Link''' there are three charts, each with one series. The axes of the charts are linked by means of a <tt>TChartExtentLink</tt> component. The axes to be coupled are specified by the <tt>Mode</tt> property. Zoom in one of the chart by dragging a zoom rectangle with the left mouse button, and the other charts will follow.
  
 
In page '''Transform''' there is only one chart, but with three series. Each series covers a third of the vertical chart area with its individual y axis. This effect can be achieved by means of three vertical axes and three [[TAChart_documentation#Auto-scaling_transformation|AutoScaleAxisTransforms]].  
 
In page '''Transform''' there is only one chart, but with three series. Each series covers a third of the vertical chart area with its individual y axis. This effect can be achieved by means of three vertical axes and three [[TAChart_documentation#Auto-scaling_transformation|AutoScaleAxisTransforms]].  
Line 404: Line 487:
 
=== print ===
 
=== print ===
 
[[file:printdemo.png|thumbnail|upright 1.5]]
 
[[file:printdemo.png|thumbnail|upright 1.5]]
'''<code>printdemo</code>''' illustrates two ways of printing charts:
+
'''<tt>printdemo</tt>''' illustrates two ways of printing charts:
 
* using direct painting on the printer's canvas by clicking on button "Print via canvas",  
 
* using direct painting on the printer's canvas by clicking on button "Print via canvas",  
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
Chart1.PaintOnCanvas(Printer.Canvas, ARect)
 
Chart1.PaintOnCanvas(Printer.Canvas, ARect)
</source>
+
</syntaxhighlight>
* or using a dedicated drawer for printing (by clicking on button "Print") which generally yields better quality. Package <code>TAChartPrint</code> is necessary to use <code>TPrinterDrawer</code>. See [[TAChart_documentation|TAChart documentation]] for details on [[TAChart_documentation#Printer_drawer|<code>TPrinterDrawer</code>]].
+
 
<source>
+
* or using a dedicated drawer for printing (by clicking on button "Print") which generally yields better quality. Package <tt>TAChartPrint</tt> is necessary to use <tt>TPrinterDrawer</tt>. See [[TAChart_documentation|TAChart documentation]] for details on [[TAChart_documentation#Printer_drawer|<tt>TPrinterDrawer</tt>]].
 +
 
 +
<syntaxhighlight lang=pascal>
 
Chart1.Draw(TPrinterDrawer.Create(Printer), ARect);
 
Chart1.Draw(TPrinterDrawer.Create(Printer), ARect);
</source>
+
</syntaxhighlight>
  
In general, printer support requires the package <code>Printer4Lazarus</code>. The demo also shows how axis marks can be highlighted by a border (<code>Chart1.LeftAxis.Marks.Frame.Visible := true</code>).
+
In general, printer support requires the package <tt>Printer4Lazarus</tt>. The demo also shows how axis marks can be highlighted by a border (<tt>Chart1.LeftAxis.Marks.Frame.Visible := true</tt>).
 
<br clear="all" />
 
<br clear="all" />
  
 
=== radial ===
 
=== radial ===
 
[[file:radialdemo_pie.png|thumbnail|upright 1.5]]
 
[[file:radialdemo_pie.png|thumbnail|upright 1.5]]
The '''<code>radialdemo</code>''' project introduces two series, the [[TAChart_documentation#Pie_series|<code>TPieSeries</code>]] and the [[TAChart_documentation#Polar_series|<code>TPolarSeries</code>]]. Both interpret the x/y coordinates as angle and distance from center, but in an opposite way.
+
The '''<tt>radialdemo</tt>''' project introduces two series, the [[TAChart_documentation#Pie_series|<tt>TPieSeries</tt>]] and the [[TAChart_documentation#Polar_series|<tt>TPolarSeries</tt>]]. Both interpret the x/y coordinates as angle and distance from center, but in an opposite way.
  
<code>TPieSeries</code> shown on page '''Pie''' assumes that the y value of the chart source is the angle of the pie, and the x coordinate corresponds to the distance of the slice from the center. Therefore, the effect of the "exploded" slice can be achieved by increasing the x value (if property <code>Exploded</code> is set). In addition, the demo allows to play with some properties of the pie series:
+
<tt>TPieSeries</tt> shown on page '''Pie''' assumes that the y value of the chart source is the angle of the pie, and the x coordinate corresponds to the distance of the slice from the center. Therefore, the effect of the "exploded" slice can be achieved by increasing the x value (if property <tt>Exploded</tt> is set). In addition, the demo allows to play with some properties of the pie series:
* <code>MarkPositions</code>
+
* <tt>MarkPositions</tt>
* <code>RotateLabels</code>
+
* <tt>RotateLabels</tt>
* <code>Marks.LabelFont.Rotation</code>
+
* <tt>Marks.LabelFont.Rotation</tt>
 
See section [[TAChart_documentation#Pie_series|Pie series]] in the [[TAChart_documentation|documentation]].
 
See section [[TAChart_documentation#Pie_series|Pie series]] in the [[TAChart_documentation|documentation]].
 
<br clear="all" />
 
<br clear="all" />
Line 431: Line 517:
 
The second page '''Polar''' shows two polar series. In a polar series, the x value is interpreted as the angle in radians, and the y value corresponds to the distance of the point from the center.
 
The second page '''Polar''' shows two polar series. In a polar series, the x value is interpreted as the angle in radians, and the y value corresponds to the distance of the point from the center.
  
Both series are linked to the same ChartSource. They are offset with respect to each other because the properties <code>OriginX</code> and <code>OriginY</code> are different. The checkbox "Closed" allows to close the polygons (property <code>CloseCircle</code>) by connecting the first data point with the last one.
+
Both series are linked to the same ChartSource. They are offset with respect to each other because the properties <tt>OriginX</tt> and <tt>OriginY</tt> are different. The checkbox "Closed" allows to close the polygons (property <tt>CloseCircle</tt>) by connecting the first data point with the last one.
  
 
See section [[TAChart_documentation#Polar_series|Polar series]] in the [[TAChart_documentation|documentation]].
 
See section [[TAChart_documentation#Polar_series|Polar series]] in the [[TAChart_documentation|documentation]].
Line 438: Line 524:
 
=== rotate ===
 
=== rotate ===
 
[[file:rotatedemo.png|thumbnail|upright 1.5]]
 
[[file:rotatedemo.png|thumbnail|upright 1.5]]
"Rotate" in the context of project '''<code>rotatedemo</code>''' means "rotation of a series with respect to the x and y axes", i.e. painting of a series with x and y axes interchanged.  
+
"Rotate" in the context of project '''<tt>rotatedemo</tt>''' means "rotation of a series with respect to the x and y axes", i.e. painting of a series with x and y axes interchanged.  
  
 
The demo starts with a line series, a bar series and a 3d area series in the regular arrangement of x along the horizontal and y along the vertical axis. After checking the checkbox assigned to a series, its x values are drawn along the vertical and the y values along the horizontal axes. In the rotated configuration the bars of a bar series are drawn horizontally.
 
The demo starts with a line series, a bar series and a 3d area series in the regular arrangement of x along the horizontal and y along the vertical axis. After checking the checkbox assigned to a series, its x values are drawn along the vertical and the y values along the horizontal axes. In the rotated configuration the bars of a bar series are drawn horizontally.
  
In TAChart, this kind of rotation is achieved by assigning the property <code>AxisIndexX</code> to the index of the vertical axis, and <code>AxisIndexY</code> to that of the horizontal axis.
+
In TAChart, this kind of rotation is achieved by assigning the property <tt>AxisIndexX</tt> to the index of the vertical axis, and <tt>AxisIndexY</tt> to that of the horizontal axis.
  
In addition to rotation, the demo project allows also to play with the position of the series marks by changing the property <code>MarkPositions</code> of the red dotted line series.
+
In addition to rotation, the demo project allows also to play with the position of the series marks by changing the property <tt>MarkPositions</tt> of the red dotted line series.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== save ===
 
=== save ===
 
[[file:savedemo.png|thumbnail|upright 1.5]]
 
[[file:savedemo.png|thumbnail|upright 1.5]]
The project '''<code>savedemo</code>''' shows code how to save a chart to an external graphics file (.bmp, .png, .jpg, .svg)  
+
The project '''<tt>savedemo</tt>''' shows code how to save a chart to an external graphics file (.bmp, .png, .jpg, .svg)  
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
Chart1.SaveToBitmapFile('test.bmp');
 
Chart1.SaveToBitmapFile('test.bmp');
</source>
+
</syntaxhighlight>
 +
 
 
or to copy it to the clipboard
 
or to copy it to the clipboard
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
Chart1.CopyToClipboardBitmap;
 
Chart1.CopyToClipboardBitmap;
</source>
+
</syntaxhighlight>
 +
 
 
<br clear="all" />
 
<br clear="all" />
  
 
=== script ===
 
=== script ===
 
[[file:scriptdemo.png|thumbnail|upright 1.5]]
 
[[file:scriptdemo.png|thumbnail|upright 1.5]]
The project '''<code>scriptdemo</code>''' applies [[Pascal_Script|<code>PascalScript</code>]] to define the mathematical function shown in a [[TAChart_documentation#Function_series|<code>TFuncSeries</code>]]. In this way a mathematical function plotter can be created.
+
The project '''<tt>scriptdemo</tt>''' applies [[Pascal_Script|<tt>PascalScript</tt>]] to define the mathematical function shown in a [[TAChart_documentation#Function_series|<tt>TFuncSeries</tt>]]. In this way a mathematical function plotter can be created.
  
 
A tutorial on usage of TFuncSeries can be found [[TAChart_Tutorial:_Function_Series|here]].
 
A tutorial on usage of TFuncSeries can be found [[TAChart_Tutorial:_Function_Series|here]].
Line 468: Line 558:
 
=== tools ===
 
=== tools ===
 
[[file:toolsdemo.png|thumbnail|upright 1.5]]
 
[[file:toolsdemo.png|thumbnail|upright 1.5]]
Project '''<code>toolsdemo</code>''' gives the opportunity to play with TAChart's zooming and panning tools. Follow the instructions on the screen to activate the individual tools.  
+
Project '''<tt>toolsdemo</tt>''' gives the opportunity to play with TAChart's zooming and panning tools. Follow the instructions on the screen to activate the individual tools.  
  
Internally, the work is done by the <code>TChartTool</code> components. Have a look at chapter [[TAChart_documentation#Tools|Tools]] in the [[TAChart_documentation|TAChart documentation]] or the tutorial "[[TAChart_Tutorial:_Chart_Tools|Chart tools]]" to learn details on this powerful add-on to TAChart.
+
Internally, the work is done by the <tt>TChartTool</tt> components. Have a look at chapter [[TAChart_documentation#Tools|Tools]] in the [[TAChart_documentation|TAChart documentation]] or the tutorial "[[TAChart_Tutorial:_Chart_Tools|Chart tools]]" to learn details on this powerful add-on to TAChart.
 
<br clear="all" />
 
<br clear="all" />
  
 
=== wmf ===
 
=== wmf ===
 
[[file:wmfdemo.png|thumbnail|upright 1.5]]
 
[[file:wmfdemo.png|thumbnail|upright 1.5]]
'''<code>wmfdemo</code>''' saves a chart to a windows metafile (.wmf):
+
'''<tt>wmfdemo</tt>''' saves a chart to a windows metafile (.wmf):
<source>
+
 
 +
<syntaxhighlight lang=pascal>
 
with Chart1 do
 
with Chart1 do
 
   Draw(TWindowsMetafileDrawer.Create('test.wmf'), Rect(0, 0, Width, Height));  
 
   Draw(TWindowsMetafileDrawer.Create('test.wmf'), Rect(0, 0, Width, Height));  
Line 482: Line 573:
 
// or, after r46404:
 
// or, after r46404:
 
Chart1.SaveToWMF('test.wmf');
 
Chart1.SaveToWMF('test.wmf');
</source>
+
</syntaxhighlight>
  
Since r46396, a chart can be '''copied to the clipboard''' as a windows metafile (windows-only); use an empty file name string in above <code>Draw</code> code for this purpose. After r46404, the simpler <code>Chart1.CopyToClipboardMetafile</code> has the same effect.
+
Since r46396, a chart can be '''copied to the clipboard''' as a windows metafile (windows-only); use an empty file name string in above <tt>Draw</tt> code for this purpose. After r46404, the simpler <tt>Chart1.CopyToClipboardMetafile</tt> has the same effect.
  
{{Note|wmf support in TAChart is very limited. In particular, it is available only on the Windows platform. Package <code>TAChartWMF</code> is required to compile this demo.}}
+
{{Note|wmf support in TAChart is very limited. In particular, it is available only on the Windows platform. Package <tt>TAChartWMF</tt> is required to compile this demo.}}
  
 
<br clear="all" />
 
<br clear="all" />
Line 510: Line 601:
  
  
 +
[[Category:Lazarus]]
 +
[[Category:Components]]
 
[[Category:TAChart]]
 
[[Category:TAChart]]

Latest revision as of 19:31, 9 August 2021

Introduction

TAChart is Lazarus' powerful charting library. It consists of numerous classes and declarations distributed over some 50 units. New users may be overwhelmed by the complexity of usage, and even experienced charters still find gems from time to time.

In order to demonstrate the possibilities of TAChart a variety of demo projects has been written. They are stored in the directory components/tachart/demo of the Lazarus installation. However, there is no overview of these examples, and it is often quite cumbersome to find a certain application of interest. Therefore, it is the intention of this wiki page to provide some kind of catalogue of the TAChart demos. Each demo project will be accompanied by a short description and a screen shot of the program output.

Gallery

Click on the captions to go to the description of that particular demo project. Click on the thumbnail to see the screenshot at normal size.

Demo folders

3d

zdemo.png

The project zdemo in the folder 3d illustrates creation of a simple 3d effect in TAChart. Some series types have a property Depth allowing to extrude the series into the third dimension. Using the property ZPosition the series can be "shifted" back and forth into the depth dimension. The same property allows to move the axes and the grid to the front.

aggpas

aggpasdemo.png

For improved rendering quality, TAChart can take advantage of the fast and powerful AggPas library with anti-aliased drawing and subpixel accuracy. The project aggpasdemo shows the necessary code to achieve this:

  • Add a TChartGUIConnectorAggPas to the form and assign it to the property GUIConnector of the form
  • Or, use a TPaintbox and use the code given in TForm1.PaintBox1Paint in its OnPaint event.

Note that this feature is not yet available in Lazarus 1.2 and requires the trunk version. Packages AggPasLCL and TACharstAggPas are needed to compile the demo.

animate

TAChart Animate Demo.jpg

The animatedemo presents animation of a bar chart. The main animation work is done by a TCustomAnimatedChartSource created at runtime and its OnGetItem event.

axis

axis customized marks.png

The project "axis" shows some fundamental and advanced aspects of axis formatting and layout in a multi-page form:

Page Customized marks demonstrates how painting of the marks of an axis can be controlled by modifying their properties, such as Marks.LabelBrush, Marks.Frame, or Marks.LabelFont. Highlighting of individual marks can be done by assigning a handler to the axis event OnMarksToText:

procedure TForm1.ChartCustomMarksAxisList1MarkToText(var AText: String; AMark: Double);
begin
  if AMark = 3 then
    AText := '*' + AText + '*';
end;


axis axis groups.png

In page Axis groups it is shown how a chart layout with multiple axes can be created. The TAChart Tutorial: Multiple Panes in one Chart explains the required steps in detail.

In the demo, the axes and required axis transformations are created at runtime.

axis submarks.png

In the next page, Submarks, a minor axis is used along the x axis, and smaller labels are drawn for each tick of the minor axis. This effect is achieved by adding an additional axis to the property Minors. Minor axes have their own set of marks and labels.

axis date and time.png

Displaying an axis with date and time data is the subject of page Date and time. The series displays random data for every hour in a 10-year date range. Zoom in by clicking with the left, zoom out by clicking with the right mouse button. For every zoom level the TDateTimeIntervalChartSource manages to displays reasonable labels along the x axis.

axis intervals.png

The most prominent feature of the demo in page Intervals is that the same y data are displayed on several axes with different settings of the Intervals property. The x axis demonstrates how the range of displayed labels can be limited by means of the axis property Marks.Range.

axis position.png

Page Position demonstrates that axes do not have to be at the edge of a chart. In plots of mathematical function, for examples, the axes usually run through the origin at x=0 and y=0. Modifying the property Position of an axis allows to place it at any position. The demo shows also how an additional axis can be added at the chart edge.

axisalign

axisalign.png

In new TAChart versions after Lazarus 1.2.6, the chart axis has a new property LabelSize which - if different from 0 - overrides the automatic axis positioning mechanism. Therefore, this property can be used to align the axis lines of charts which are stacked or positioned side-by-side and in which the axis labels have different lengths.

axistransf

axistransf linear.png

The subject of the project "axistransf" are axis transformations which are the key to non-linear or distorted axis scales. Several charts are combined into a multi-paged form.

The chart on page Linear shows two temperature curves which are displaced for better clarity. The summer temperatures are shown as a red curve, the labels are at the left y axis; the winter temperatures are shown as a blue curve (and overlayed bar series) and have their labels on the right y axis. Both axes cover only part of the available space to separate the data.

This effect can be achieved by using auto-scale axis transformations.


axistransf indep scale.png

The demo Independent scale covers the same subject.

See TAChart Tutorial: Multiple Panes in one Chart for a detailed explanation of the steps required.

axistransf logarithm.png

A plot with logarithmic axis is displayed on page Logarithm. The striped background layout is achieved by means of a TChartStyles component.

axistransf normal dist.png

Page Normal distribution shows a series with random data, their statistical distribution follows a Normal Distribution. Using a TCumulNormDistrAxisTransform the cumulated probability distribution can be distorted to follow a straight line.

axistransf userdefined.png

The chart on page User defined contains a purple vertical line which acts like a magnifier: The series is zoomed horizontally in the vicinity around this line. Dragging the line allows to blow up any part of the series.

This local zoom effect is achieved by means of a TUserDefinedAxisTransform. In this transform, the axis transformation is defined by the handler of the event OnAxisToGraph.

barseriesshapes

barshapesdemo.png

Demonstrates usage of alternative bar shapes in 3D TBarSeries.

basic

basicdemo.png

Basic operation with charts and series is demonstrated in the basicdemo project. The demo shows

  • how to create a series at runtime and add it to the chart
  • how to add data to a series (series.AddXY(...))
  • how to clear series (Chart1.ClearSeries)
  • how to change the z position of a series (TForm1.BringToFront)
  • how to show/hide axes, axis grid, titles and the legend
  • how to invert the axis direction
  • how to show a crosshair marker. Note, however, that usage of the reticule is deprecated now, use zoom tools instead.


bgra

bgrademo.png

For improved rendering quality, TAChart can take advantage of the fast and powerful BGRABitmap library with anti-aliased drawing and subpixel accuracy. The project bgrademo shows the necessary code to achieve this:

  • Add a TChartGUIConnectorBGRA to the form and assign it to the property GUIConnector of the form
  • Or, use a TPaintbox and use the code given in TForm1.PaintBox1Paint in its OnPaint event.

Packages bgrabitmappack and TAChartBgra are needed to compile the demo.

Light bulb  Note: There is a special wiki page BGRABitmap Tutorial TAChart giving step-by-step instructions how to create a chart like the one in the image at the right.


charteditordemo

charteditor dialog.png

The charteditordemo project shows a gui how the user could interactively change most elements of a chart. Besides the TDataPointClickTool, the project relies strongly on the dedicated chart tools TTitleFootClickTool, TAxisClickTool and TLegendClickTool which were introduced in Lazarus v2.1.

chartsource

The demo project chartsource illustrates various use cases for chart source components

chartsource basic.png

Page 'Basic demonstrates that the same chartsource can be attached to several series and be used in several charts. In this example data are provided by means of a TListChartSource and a TRandomChartSource.

chartsource statistics.png

Page Statistics illustrates some applications of the TCalculatedChartSoruce: cumulative sums and moving average

chartsource derivative.png

Page Derivative highlights numerical calculation and plotting of derivatives of data series using the TCalculatedChartSource.

chartsource sorting.png

Page Sorting shows how the data values of a TUserDefinedChartSource can be sorted by means of a TSortedChartSource having it as Origin. This is an interesting application for a TBubbleSeries: when the data points are sorted by radius (y value with y index 1) in descending order the bubble are drawn from back to front. Therefore, it is not possible that bubbles are completely covered by anothers.

clone

clonedemo-series.png clonedemo-charts.png
Page Series of the "clonedemo" demonstrates how a series can be duplicated ("cloned"):

  bs := TBarSeries.Create(Self);
  bs.Assign(ChartSeries.Series[i]);
  bs.BarOffsetPercent := bs.BarOffsetPercent + 20;
  ChartSeries.AddSeries(bs);

Cloning of a chart, on page Charts, is even simpler:

  ch := Chart1.Clone;


combobox

combodemo.png

Application of the TChartCombobox is demonstrated by project "combodemo". It contains a chart with a line, bar and area series and has a sidebar for editing the appearance of these series. Brush and pen styles, pen widths and line series pointer styles can be changed by using this decicated multi-featured combobox. The standard TColorBox is used for modifying colors.

distance

distancedemo-main.png

The TDataPointDistanceTool was designed to measure the distance of data points in a chart. The distancedemo demonstrates is application.

Page Main allows to play with the main parameters of the tool. Use the left button to drag a measurement bar across the screen. The mouse-down event determines the starting point, while during dragging the end point is defined by the current mouse position. The distance is displayed in a label above the measurement line. The label can be turned off by setting the tool's Marks.Visible to false. Rotation of the label along with the measurement bar is controlled by some of the tool's Options. The properties DataPointModeStart and DataPointModeEnd determine whether the measurements starts or ends, respectively, at arbitrary points in the chart (dpmFree), or only at data points (dpmSnap or dpmLock, where dpmLock means that the measurement line is only visible when the mouse is near data points, in case of dpmSnap it is always visible but jumps to the next data point when the mouse gets close enough).

Press the Shift key while the left mouse button is down to zoom into the chart by a given factor; zoom returns when Shift is released (code in TForm1.ctDistance1BeforeKeyDown).


distancedemo-fit.png

Page Fit shows a more advanced application of the distance tool. It uses its OnGetDistanceText event to fit a polynomial to the data between the start and end points of the measurement line. Fitting is done by means of a TFitSeries. The radiobuttons at the top ("Mean", "slope", "find peak") determine the degree of the fitted polynomial (0, 2, or 2, respectively). The fitted curved is drawn between the end points of the measurement line. For the code, see TForm1.ctFitDataPointDistanceTool1GetDistanceText.

This kind of measurement is initiated by dragging with the right mouse button, while the left-drag controls a standard zooming process.

(Note that this part of the demo is not working properly in Lazarus 1.2).


events

eventsdemo.png

TAChart exposes several events to control the appearence of the chart beyond the properties provided in the object inspector. The project eventdemo shows the effect of three typical events:

  • TChart.OnBeforeDrawBackground is called before painting the entire background rectangle of the chart. The demo shows how the background can be drawn as a gradient.
  • TChart.OnBeforeDrawBackWall is a possibilty to replace painting of the backwall of the chart by a user-provided procedure (the "backwall" is the rectangle enclosed by the chart axes). Here, the backwall is drawn as another gradient.
  • BarSeries.OnBeforeDrawBar allows to intercept the drawing process of a bar series. In the demo every other bar is drawn in a different fill style.

All events provide a parameter ADoDefaultDrawing to skip the built-in drawing procedure if set to false. In the BarSeries example the 5th bar is dropped by this way.

extent

extentdemo.png

The project extentdemo shows how the extent of a chart, i.e. the start and end of each axis, can be modified (properties Chart.Extent.XMin, Chart.Extent.UseXMin, etc.).

In addition the demo provides code how to setup an extent history which is interesting for undoing extent changes by zooming and panning (see tutorial on "ColorMapSeries, zooming").

fit

fitdemo.png

Basic fitting of equations to data by means of TFitSeries is illustrated by project fitdemo. The demo shows

  • how to select the fitting function and the number of fitting parameters (TFitSeries.FitEquation, TFitSeries.ParamCount).
  • how to restrict the data range for fitting (TFitSeries.FitRange)
  • how to extract the values of the fitted parameters (TFitSeries.Param[])

In addition, the usage of logarithmic x and/or y axes is demonstrated.

Light bulb  Note: These topics are explained in some detail in the tutorial on ListChartSource, logarithmic axis and fitting.


func

funcdemo-domain.png

The project funcdemo gives examples of the usage of function series.

The first page of this multi-tab project, Domain, demonstrates the TFuncSeries. This series plots a mathematical function. The function values are passed to the series by means of an event handler for OnCalculate. This series type has the advantage that the plot is always smooth independent of zooming. The function y=1/sin(x) drawn in the screenshot at the right is not defined for integer multiples of pi. Therefore, standard output draws vertical connection lines at these points. This artefact can be avoided by adding the points with undefined function values to the DomainExclusions of the series. Click at "Domain" to see this effect.

funcdemo-colormap.png

The TColorMapSeries shown on page Color map is similar to TFuncSeries, however, it requires an x and y value to calculate the function value z which is encoded as a color. The calculation is done again in the event handler for OnCalculate. The colors are assigned to the z values by means of a ListChartSource which is assigned to the ColorSource property of the series.

Light bulb  Note: The tutorial ColorMapSeries, Zoomin explains in detail how the ColorMapSeries is applied.


funcdemo-parametric.png

Page Parametric shows another function series requiring an OnCalculate event handler, the TParametricCurveSeries. Here, a single parameter (t) is used to calculate the x and y values. The example shows the parametric function defined by
x(t) = cos(a*t) - cos(b*t)^j
y(t) = sin(c*t) - sin(d*d)^k.

funcdemo-spline.png

The TCubicSplineSeries shown on page Spline is similar to a standard TLineSeries (black), but the data points are not connected by straight line segments, but by smooth cubic spline curves (bright blue). The TBSplineSeries (green) is similar, but the spline does not pass through the data points and, therefore, achieves even better smoothing.

funcdemo-autoyextent.png

Page Auto y extent gives a solution to the problem that it is normally not possible to automatically adjust the y axis to the extent of data values. TFuncSeries was equipped with a property ExtentAutoY which has to be enabled for this purpose.


html

html demo.png

Embedding of html tags and entities in TAChart text elements is demonstrated by the project html. This feature is activated by setting the TextFormat of the corresponding text element to tfHTML. The codes used can be show by checking the corresponding checkboxes; the title of the x axis, for example, is written as 'Angle &alpha;, &deg;'.

The buttons "Copy to clipboard", "Save to WMF" and "Save to SVG" demonstrate that this special formatting is retained when copying a chart to the clipboard or when saving it to a graphics file.


legend

legenddemo-page1.png

The project legenddemo demonstrates how the legend of the TChart component can be used and modified. (Please note that after Lazarus version 1.2 the project window contains two pages; in older versions, only the first page is available).

Page Basic demonstrates fundamental work with the legend:

  • showing series names (series.Legend.Multiplicity = lmSingle)
  • showing series data (series.Legend.Multiplicity = lmPoint, demonstrated for the pie series)
  • owner-drawing series icons for the legend by means of the event OnDrawLegend of a series (see procedure Chart1FuncSeries1DrawLegend)
  • using legend group titles (Chart.Legend.GroupTitles)
  • manually adding legend items (event series.Legend.OnCreate, demonstrated for Chart1FuncSeries1). Note the workaround for a bug in FormCreate.
  • run-time modification of properties for positioning of the legend.


legenddemo-page2.png

The second page (OwnerDraw) explains how the legend can be drawn as a gradient bar. For this purpose an event handler must be written for the chart's event OnDrawLegend. The gradient is drawn by calling the following procedure:

procedure DrawGradient(ADrawer: IChartDrawer; ARect: TRect;
  AStartColor, AEndColor: TColor);
var
  y,h: Integer;
  c: TColor;
begin
  h := ARect.Bottom - ARect.Top;
  if h <= 0 then exit;
  for y := ARect.Bottom-1 downto ARect.Top do begin
    c := InterpolateRGB(AStartColor, AEndColor, (ARect.Bottom - y) / h);
    ADrawer.SetPenParams(psSolid, c);
    ADrawer.Line(ARect.Left, y, ARect.Right, y);
  end;
end;


line

linedemo-fast.png

The linedemo illustrates some aspects of line series.

Page Fast drawing:

  • Change the selection of the combobox to switch between different LineTypes of the series. The screen shot at the right is created with the setting LineType = ltStepXY.
  • Create a 3D look by checking the option "3D".
  • Interchange the x and y axes by checking "Rotated".
  • Quickly add 600,000 data points and measure the time for a refresh.


linedemo-pointers.png

Page Pointers shows a list of all pointers that are available for data point markers. The chart is created by using a lineseries with three data points for each pointer Style. The name of the style and a different color have been assigned to the center data point in the AddXY method of the series. The size of the pointers can be changed at runtime.

linedemo-customdrawnpointer.png

Page OnCustomdrawn pointer demonstrates how a bitmap can be used as a data pointer, and how only every n-th pointer can be drawn. This is done by means of the event OnCustomDrawPointer.

linedemo-ongetpointerstyle.png

Using the event OnGetPointerStyle the pointers of individual data points of a line series can be changed. This is demonstrated on page OnGetPointerStyle..

linedemo-oscilloscope.png

Page Oscilloscope: Driven by a timer, more and more data points are added to the line series. The oldest data point is deleted once the series contains more than 20 points. The series is updated continously and is drawn using LineType=ltStepXY. The OnTimer event handler of the timer contains code to allow zooming into various parts of the chart while preserving the "oscilloscope" behavior.

linedemo-coloreach.png

Page Color each data point applies the lineseries property ColorEach for colorizing individual datapoints and/or the adjacent line segments. The color is passed as the 4th parameter of the series method AddXY(x, y, text, color).

listbox

listboxdemo.png

TChartListbox is a useful add-on to TAChart for interactively turning selected series on and off. Just add a TChartListbox to the form and link its Chart property to the chart of interest. The project listboxdemo demonstrates that there is a two-way communication between chart and listbox: when listbox items are checked/unchecked the corresponding series are shown/hidden. Conversely, when series are added/deleted/shown/hidden in the chart the changes are reflected in the listbox automatically.

liveview, liveview-paned

liveview.png
liveview-paned.png

These two projects demonstrate usage of the TChartLiveView component which displays, in a scrolling viewport, only the most recent data points arriving from some external source.

In order to apply a TChartLiveView set its Chart property to the chart to be controlled. Set Active to true to activate the live view. Property ViewportSize determines the width of the scrolling window in axis units.

While the liveview project applies to a normal chart with a single y axis, usage of several y axes is demonstrated in the liveview-paned project. The creation of a "paned chart" with several axes is the subject of the demo panes.

multi

multidemo-bubble.png

Usage of series with multiple y values is the subject of project multidemo. TListChartSource provides storage for additional y values in the array YList[].

See TAChart documentation of more details.

Page Bubble shows a chart with a bubble series. This series draws data points as circles of variable radius centered at the data points. In addition to the standard x/y coordinates there must be a second y value to specify the radius. Since - as usual - a color value can be assigned to a data point bubble charts can show four-dimensional data.

multidemo-stacked.png

Page Stacked shows stacked area, bar, or line series charts. Stacked series must provide a y value for the each stack levels. The TChartStyles component is used to define the color of the stacks.

Light bulb  Note: A detailed description how to create stacked charts is given in the tutorial "Stacked bar series".


multidemo-boxwhisker.png

A chart with a Box-and-Whiskers-Series is displayed in page Box-and-Whiskers. This series type represents data as rectangles ("box") with a medium line and two T-shaped protrusions in both directions ("whiskers") . It requires five y values:

  • Lower whisker
  • Lower box edge
  • Medium line
  • Upper box edge
  • Upper whisker


multidemo-ohlc.png

Page OHLC shows a chart with a Open-high-low-close series which represents data as a vertical lines with two ticks and requires four y values:

  • Lower point of line = "Low" value
  • Left-facing tick position = "Open" value
  • Right-facing tick position = "Close" value
  • Upper point of line = "High" value


multidemo-field.png

A simple field plot is demonstrated on page Field. This series type draws short arrows at the data points to highlight the directions of a vector field. It requires two x and two y values per data point.

nan

nandemo.png

The project nandemo shows how values can be skipped from a series. Click on an x value in the checklistbox at the right to replace the x or y value of the corresponding data point by NaN. In a line series, a NaN value introduces a break in the originally continuous curve. In other series types, the effect is similar. See TAChart documentation of more details.

navigate

navigatedemo.png

For navigation in a zoomed chart, TAChart provides the components TChartNavScrollbar and TChartNavPanel. Usage of these components is demonstarted in the navigatedemo project.

The chart in which the navigation occurs must be assigned to this corresponding property. Note the property MiniMap which displays a reduced view of the chart and draws the current viewport as a highlighted rectangle.

nogui

noguidemo.png

noguidemo demonstrates that TAChart can also be used for creating graphics output from console (no-gui) programs. This project creates a chart and a simple bar series at runtime and stores the output to a png file without a user-interface showing up.

Note that, for Windows, the freetype-6.dll and zlib1.dll are required in the exe folder in order to run the demo.

opengl

opengldemo.png

opengldemo presents code how to use OpenGL for improved rendering quality of the chart by means of TOpenGLDrawer. See TAChart documentation for details on this drawer. In addition, the demo illustrates also the usage of series transparency.

Note that the package LazOpenGLContext needs to be installed to compile this demo.

panes

panesdemo.png

When working with multiple charts in the same window it sometimes required to use common axes. The panes demo projects shows two possibilities how to achieve this:

In page Link there are three charts, each with one series. The axes of the charts are linked by means of a TChartExtentLink component. The axes to be coupled are specified by the Mode property. Zoom in one of the chart by dragging a zoom rectangle with the left mouse button, and the other charts will follow.

In page Transform there is only one chart, but with three series. Each series covers a third of the vertical chart area with its individual y axis. This effect can be achieved by means of three vertical axes and three AutoScaleAxisTransforms.

Light bulb  Note: Step-by-step instructions are given in the tutorial "Multiple panes in the same chart".


print

printdemo.png

printdemo illustrates two ways of printing charts:

  • using direct painting on the printer's canvas by clicking on button "Print via canvas",
Chart1.PaintOnCanvas(Printer.Canvas, ARect)
  • or using a dedicated drawer for printing (by clicking on button "Print") which generally yields better quality. Package TAChartPrint is necessary to use TPrinterDrawer. See TAChart documentation for details on TPrinterDrawer.
Chart1.Draw(TPrinterDrawer.Create(Printer), ARect);

In general, printer support requires the package Printer4Lazarus. The demo also shows how axis marks can be highlighted by a border (Chart1.LeftAxis.Marks.Frame.Visible := true).

radial

radialdemo pie.png

The radialdemo project introduces two series, the TPieSeries and the TPolarSeries. Both interpret the x/y coordinates as angle and distance from center, but in an opposite way.

TPieSeries shown on page Pie assumes that the y value of the chart source is the angle of the pie, and the x coordinate corresponds to the distance of the slice from the center. Therefore, the effect of the "exploded" slice can be achieved by increasing the x value (if property Exploded is set). In addition, the demo allows to play with some properties of the pie series:

  • MarkPositions
  • RotateLabels
  • Marks.LabelFont.Rotation

See section Pie series in the documentation.

radialdemo polar.png

The second page Polar shows two polar series. In a polar series, the x value is interpreted as the angle in radians, and the y value corresponds to the distance of the point from the center.

Both series are linked to the same ChartSource. They are offset with respect to each other because the properties OriginX and OriginY are different. The checkbox "Closed" allows to close the polygons (property CloseCircle) by connecting the first data point with the last one.

See section Polar series in the documentation.

rotate

rotatedemo.png

"Rotate" in the context of project rotatedemo means "rotation of a series with respect to the x and y axes", i.e. painting of a series with x and y axes interchanged.

The demo starts with a line series, a bar series and a 3d area series in the regular arrangement of x along the horizontal and y along the vertical axis. After checking the checkbox assigned to a series, its x values are drawn along the vertical and the y values along the horizontal axes. In the rotated configuration the bars of a bar series are drawn horizontally.

In TAChart, this kind of rotation is achieved by assigning the property AxisIndexX to the index of the vertical axis, and AxisIndexY to that of the horizontal axis.

In addition to rotation, the demo project allows also to play with the position of the series marks by changing the property MarkPositions of the red dotted line series.

save

savedemo.png

The project savedemo shows code how to save a chart to an external graphics file (.bmp, .png, .jpg, .svg)

Chart1.SaveToBitmapFile('test.bmp');

or to copy it to the clipboard

Chart1.CopyToClipboardBitmap;


script

scriptdemo.png

The project scriptdemo applies PascalScript to define the mathematical function shown in a TFuncSeries. In this way a mathematical function plotter can be created.

A tutorial on usage of TFuncSeries can be found here.

tools

toolsdemo.png

Project toolsdemo gives the opportunity to play with TAChart's zooming and panning tools. Follow the instructions on the screen to activate the individual tools.

Internally, the work is done by the TChartTool components. Have a look at chapter Tools in the TAChart documentation or the tutorial "Chart tools" to learn details on this powerful add-on to TAChart.

wmf

wmfdemo.png

wmfdemo saves a chart to a windows metafile (.wmf):

with Chart1 do
  Draw(TWindowsMetafileDrawer.Create('test.wmf'), Rect(0, 0, Width, Height)); 

// or, after r46404:
Chart1.SaveToWMF('test.wmf');

Since r46396, a chart can be copied to the clipboard as a windows metafile (windows-only); use an empty file name string in above Draw code for this purpose. After r46404, the simpler Chart1.CopyToClipboardMetafile has the same effect.

Light bulb  Note: wmf support in TAChart is very limited. In particular, it is available only on the Windows platform. Package TAChartWMF is required to compile this demo.


Related documents

Main documentation:

Tutorials: