TAChart Tutorial: BarSeries

From Lazarus wiki
Revision as of 11:16, 28 February 2014 by Wp (talk | contribs)
Jump to navigationJump to search

--- WORK IN PROGRESS ---

--- NOT FINISHED ---

Introduction

So, let's get started.

Preparation

Setting up the chart

Create a new project, save it. Add a TChart component from Lazarus' component palette to Form1, client-align it to fill the entire form.

Adding series

Suppose we want to have three bar series in the chart. Therefore, double-click on the chart to open the series editor. Click "Add" and select "Bar series" from the list. Repeat two time. Now we have three bar series in the chart. We don't see them in the chart since they do not yet contain any data. In the object tree of the object inspector, however, the series appear as children of the TChart entry.

Before adding data rename the first bar series to "RedBarSeries" and set its property SeriesColor to clRed. Similarly, adjust the other series which will be called "BlueBarSeries" and "YellowBarSeries" and have a SeriesColor of clBlue and clYellow, respectively. It is always a good idea to use "speaking" names for the components.

Data for plotting

Before continueing let's think about which data we want to plot. Maybe you could use the balance of your checking and saving account, or the business results of large companies found somewhere in the internet. Let's go a different way this time: why don't we plot random data? Of course, they don't mean anything, but they are simple and a great tool for exercising. And in particular, TAChart contains the TRandomChartSource component which provides random data to be plugged into a series seamlessly at design-time. This means you can follow this tutorial without a need to write a line of code and without a need to compile the demo application.

Since we have three series we need three chart sources as well. To add a RandomChartSource have a look at the "Chart" component palette - it is the third icon in the palette.

ComponentPalette RandomChartSource.png

Add three RandomChartSources to the form. Rename them as "RedChartSource", "BlueChartSource", and "YellowChartSource" and link them to the correspondingly named series. In case of the "RedChartSource"/"RedBarSeries" combination, for example, you select the RedSeries in the object inspector, navigate to its property "Source" and select "RedChartSource" from its dropdown list. Repeat with BlueChartSource/BlueBarSeries and YellowChartSource/YellowBarSeries.

If you'd expect to see the bar series in the chart now, you will be disappointed: the chart still is empty. What's going on?

This is because the RandomChartSource needs some more information to create data.

Look at the properties of a RandomChartSource in the Object Inspector. Ah! PointsNumber is still 0, set it to - say - 5. XMin and XMax are still at 0. Keep XMin at 0, but set XMax to 10. Repeat with YMin and YMax, maybe set YMax to 100. When you are finished the first series comes up in the chart.

RedBarSeries.png

Repeat with the other ChartSources/BarSeries to complete the data selection.

Please note that your chart may look different from the one in the screen shot below. This is because the random generator for creation of the random data it initialized differently each time. If you want to control this modify the RandSeed property of the RandomChartSource. In the screenshot, for example, the data for the red series are created with RandSeed = 934274691, and for the blue and yellow series, I incremented this number by 1 and 2, respectively.

AllBarSeries.png

Axis labels

In the chart, you can now see all three series, the layout is not perfect because the series are overlapping - we'll address this issue below.

For the moment, let us look at the x axis of the chart: It shows values ranging between 0 and 10, but the labels do not match the position of the bars. And quite often, text labels are used, like "Quarter 1", "Quarter 2" etc., instead of the numerical labels shown here.

To fix this we add a TListChartSource to the form. Its sole purpose is to provide the correspond to the bars. but their bars are at the same x position, i.e. directly behind each other. The right-most red bar even hides the other bars of that data point. What we need is a shift of the bars.


Side-by-side bars

In the current version of the chart, you can see all three series, but their bars are at the same x position, i.e. directly behind each other. The right-most red bar even hides the other bars of that data point. What we need is a shift of the bars.

Each bar series offers two properties for this purpose: BarWidthPercent BarOffsetPercent Both numbers are expressed as a percentage of the distance to the next group. In some charts, the bars are not equidistance which leads to variing bar widths. To get a constant bar thickness set the property BarWidthStyle to bwPercentMin in this case.

Let's play with BarWidthPercent first: Set that parameter to 50, 60, and 70 for the red, blue and yellow series, respectively. Here's what you get:

AllBarSeries-WidthVarying.png

Now reset the BarWidthPercents to - say - 50 for all series - the bar width shrink and leave a gap of the same width to the next group. Let's have a look at BarOffsetPercent. In the first test, use a value of 10 for series. The chart does not change much, still the bars are fully overlapping, there is a little change on the axis, though. What is happening is that the offset is applied to all series which shifts all series by the same amount.

Now let's try different offset: the red bar will be offset by 0, the blue bars by 10, and the yellow bars by 20.

Sometimes the bars