Difference between revisions of "TAChart Tutorial: Background design"

From Free Pascal wiki
m (Data)
(Setting up the chart)
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 Title in bold font and size 12. And sometimes the grid is annoying, you can turn if off by setting the <code>Visible</code> of the axis' <code>Grid</code> to <code>false</code>. The same with the vertical axis, the title should be named "Downloads per year".
+
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 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 <code>DataPoints</code> 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.
+
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

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.

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.

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. 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.

tachart background first version.png

Showing the background image

Showing a background gradient