Difference between revisions of "TAChart Tutorial: Background design"

From Free Pascal wiki
m (Data)
Line 12: Line 12:
{| class="wikitable"
{| class="wikitable"
! Year !! 2005 !! 2006 !! 2007 || 2008 || 2009 || 2010 || 2011 || 2012 || 2013
! Year || 2005 || 2006 || 2007 || 2008 || 2009 || 2010 || 2011 || 2012 || 2013
|Downloads || 53299 || 119613 || 158060 || 218915 || 190567 || 230108 || 267858 || 298335 || 280586  
| <b>Downloads</b> || 53299 || 119613 || 158060 || 218915 || 190567 || 230108 || 267858 || 298335 || 280586  

Revision as of 09:27, 3 September 2014


tachart background finished.png

Standard charts created by the TAChart package have a gray background. Using the Color property it is possibly to modify the color of the entire chart background, and the BackColor controls the color of the chart area encloses by the axes, the so-called "back wall". In any case, the design of quite conventional compared to other charting packages and applications. Is is possible to give the chart background a more interesting design?

In this tutorial, we will demonstrate that this is a relatively easy task by taking advantage of one or two events of TChart. We will create a plot of the evolution of the Lazarus downloads during the previous years. To highlight the connection with Lazarus we plan to show the Lazarus splash screen as a background image of the chart.



Sourceforge provides a list of the Lazarus download counts per month. From http://sourceforge.net/projects/lazarus/files/Lazarus%20Windows%2032%20bits/stats/timeline?dates=2003-01-01+to+2014-09-02 I extracted the download count per year for the windows-32 installation file:

Year 2005 2006 2007 2008 2009 2010 2011 2012 2013
Downloads 53299 119613 158060 218915 190567 230108 267858 298335 280586

These data will be basis of our chart.

Setting up the chart

Create a new project and add a TChart to the form. Client-align it such that the chart fills the entire form. Drag the form borders such that the window is about 400 pixels wide and 300 pixels high.

We will plot the "Years" along the x axis, and the "Download count" along the y axis of the chart. Therefore, go to bottom axis, find the property Title and enter "Years" in the field for Caption. Show the title by setting its Visible to true. Adapt other properties to your liking: I often prefer to have the Title in bold font and size 12. And sometimes the grid is annoying, you can turn if off by setting the Visible of the axis' Grid to false. The same with the vertical axis, the title should be named "Downloads per year".

We should also show a title above the chart. Select the text "Lazarus downloads" for the Text of the chart's Title. Again, set the property Visible to true to show the title. You may also want to switch the title font to bold and increase its size a bit.

tachart background no data.png tachart background datapoints editor.png

A good series type for time-series data is a bar series. At first we add a TBarSeries to the chart: Double-click on the chart to open the series editor, click "Add" and select "Bar series" from the dropdown list.

There are various ways to assign data to the series. Since we have static data which do not change in the program it is convenient to use a TListSource which has a datapoint editor for entering data at design-time. You find the ListChartSource in the "Chart" component palette, it is the second icon. In order to enter data click on the ellipsis button next to the property DataPoints of the component - this opens the DataPoints editor. Enter the data from the table above into the x and y columns of the editor grid. The "year" goes into the x column, the "downloads" go into the y column. There is no need to enter anything into the "Color" and "Text" columns.

Finally, we connect the ListChartSource to the BarSeries. Each series has a property Source. Click on the dropdown arrow and select the ListChartSource from the list. Immediately the bar chart shows up.

tachart background first version.png

Showing the background image

Showing a background gradient