TAChart Tutorial: Background design
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:
These data will be basis of our char.
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'
false. The same with the vertical axis, the title should be named "Downloads per year".
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.
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
true to show the title. You may also want to switch the title font to bold and increase its size a bit.
To host the data we add a TListChartSource. This is convenient since is provides a data editor to enter 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.