Difference between revisions of "TAChart Tutorial: Background design"
m (→Data) |
|||
Line 39: | Line 39: | ||
=== Setting up the 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. | + | Create a new project and add a <code>TChart</code> 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 <code>x</code> axis, and the "Download count" along the <code>y</code> axis of the chart. Therefore, go to bottom axis, find the property <code>Title</code> and enter "Years" in the field for <code>Caption</code>. Show the title by setting its <code>Visible</code> to true. Adapt other properties to your liking: I often prefer to have the | + | We will plot the "Years" along the <code>x</code> axis, and the "Download count" along the <code>y</code> axis of the chart. Therefore, go to bottom axis, find the property <code>Title</code> and enter "Years" in the field for <code>Caption</code>. Show the title by setting its property <code>Visible</code> to <code>true</code>. Adapt other properties to your liking: I often prefer to have the title in bold font and larger size (12). And sometimes the grid is annoying, you can turn if off by setting the <code>Visible</code> property of the axis' <code>Grid</code> to <code>false</code>. Repeat 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 <code>Text</code> of the chart's <code>Title</code>. Again, set the property <code>Visible</code> to <code>true</code> to show the title. You may also want to switch the title font to bold and increase its size a bit. | + | We should also show a title above the chart. Select the text "Lazarus downloads" for the <code>Text</code> of the chart's <code>Title</code>. Again, set the property <code>Visible</code> to <code>true</code> in order to show the title. You may also want to switch the title font to bold and increase its size a bit. |
[[file:tachart_background_no_data.png]] [[file:tachart_background_datapoints_editor.png]] | [[file:tachart_background_no_data.png]] [[file:tachart_background_datapoints_editor.png]] | ||
− | A good series type for time-series data is a bar series. At first we add a <code>TBarSeries</code> to the chart: Double-click on the chart to open the series editor, click "Add" and select "Bar series" from the dropdown list. | + | A good series type for time-series data is a bar series. At first we add a <code>TBarSeries</code> to the chart: Double-click on the chart to open the series editor, click "Add" and select "Bar series" from the dropdown list. We do not see the series because it has no data yet. |
− | There are various ways to assign data to the series. Since we have static data which do not change | + | There are various ways to assign data to the series. Since we have static data which do not change during the program it is convenient to use a <code>TListSource</code> which provides 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 <code>DataPoints</code> of the component - this opens the DataPoints editor. Enter the data from the table above into 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 <code>Source</code>. Click on the dropdown arrow and select the ListChartSource from the list. Immediately the bar chart shows up. | Finally, we connect the ListChartSource to the BarSeries. Each series has a property <code>Source</code>. Click on the dropdown arrow and select the ListChartSource from the list. Immediately the bar chart shows up. |
Revision as of 10:06, 3 September 2014
Introduction
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.
Preparation
Data
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 property Visible
to true
. Adapt other properties to your liking: I often prefer to have the title in bold font and larger size (12). And sometimes the grid is annoying, you can turn if off by setting the Visible
property of the axis' Grid
to false
. Repeat 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
in order to show the title. You may also want to switch the title font to bold and increase its size a bit.
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 do not see the series because it has no data yet.
There are various ways to assign data to the series. Since we have static data which do not change during the program it is convenient to use a TListSource
which provides 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 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.