Difference between revisions of "TAChart Tutorial: Stacked BarSeries"

From Lazarus wiki
Jump to navigationJump to search
(Legend)
Line 61: Line 61:
  
 
In the the ChartStyle editor you can select each style and you'll see the style's properties in the object inspector. The TChartStyle item with the index 0 belongs to the bottom-most bar. Index 1 belongs to the next bar, etc. For changing the color of the bars, modify the Brush.Color of the style. The chart immediately updates and displays the corresponding bar in the new color. Repeat this with every Style.  
 
In the the ChartStyle editor you can select each style and you'll see the style's properties in the object inspector. The TChartStyle item with the index 0 belongs to the bottom-most bar. Index 1 belongs to the next bar, etc. For changing the color of the bars, modify the Brush.Color of the style. The chart immediately updates and displays the corresponding bar in the new color. Repeat this with every Style.  
 +
 +
== Showing ChartStyles in the legend ==
 +
Using the <code>ChartStyle</code> property <code>Text</code> you can assign a legend item for each bar level. Set <code>Text</code> to "Hydropower", "Wind energy", "Bio mass", "Photovoltaic", and "Geothermal" for the styles, starting with index 0.
 +
 +
In order to show the legend you know that you have to set the chart's <code>Legend.Visible</code> property to <code>true</code>; it is <code>false</code> by default. The legend, however, displays only a single entry, a red box corresponding to the bar series without usage of <code>ChartStyles</code>. In order to correct that, select the BarSeries, and open the node <code>Legend</code> in the object inspector. The property <code>Legend.Multiplicity</code> is still at <code>lmSingle</code> which produces only a single legend item per series. Change it to <code>lmStyle</code> instead. This is the correct setting when the series uses styles. Now the chart reads the <code>Text</code> values of each style and adds them to the legend.
  
 
[[file:StackedBarSeries_Step3.png]]
 
[[file:StackedBarSeries_Step3.png]]

Revision as of 20:51, 22 March 2014

WORK IN PROGRESS NOT FINISHED

Introduction

In the BarSeries tutorial we had demonstrated how to create a chart with bar series arranged in a side-by-side manner. Stacked bars are another popular variant of bar charts where the grouped data are drawn stacked onto each other. In this way, the individual contributions and their sum can be shown within the same plot. There is also a variant in which the total bar heights are normalized to 100% to emphasize the relative contributions.

We'll apply this technique in the current tutorial to plot the progress in generation of renewable energies in Germany between 1990 and 2012; the data are taken from [1] and cover hydropower, wind energy, energy from bio mass, photovoltaics, and geothermal energy.

As usual, you must have some basic knowledge of Lazarus, Object Pascal, and the key concepts of TAChart to follow the tutorial. If you have never worked with bar charts it is a good idea to look at the related tutorial explaining the side-by-side arrangement of bars.

Designing the chart with random data

Preparations

Create a new project. Add a TAChart component, and align it to alClient to completely fill the form. Maybe you should increase the size of the form a bit, but you can do this later when you see the data.

Before using the "real data" we'll arrange and format the chart to our liking. For this purpose it is convenient to get a quick response to the changes made in the Object Inspector. Therefore, we propose to use a TRandomChartSource linked to the BarSeries. A RandomChartSource just produces random data, but is a great helper to to optimize the appearence of the chart without having to recompile the project again and again. Of course, at the end, we will remove the RandomChartSource and replace it with the data of interest.

So, let's start: Add a TBarSeries and a TRandomChartSource to the form, and link the RandomChartSource to the Source property of the BarSeries. (If you need more details have a look at the other BarSeries tutorial). Select the RandomChartSource, and set XMin to 1990 and XMax to 2012 (which is the range of our original data in our reference). In total, these are 23 years, so you set PointsNumber to 23 in order to get a bar for each year. Finally, set YMax to 1 (or any other numbers that you prefer). Now a bar series pops into the chart:

StackedBarSeries Step1.png

Multiple y values

If you had read the other BarSeries tutorial you may be surprised now: In that tutorial, we had used a single series for each group of bars. In our final renewable energy plot there will be several types of bars, one for each energy kind. So, shouldn't we add some more series?

No. We only need one since we cannot follow the strategy of the side-by-side series here. This is because TAChart cannot stack the bars of different series onto each other. Each bar is drawn from a common "zero level" up (or down) to the data value - no way to shift the next bar up to the end of the previous bar.

What to do?

For stacking of series, TAChart offers the special concept of multiple y values per series data point. If you look into unit TACustomSource you'll find the record

type
  TChartDataItem = packed record
  public
    X, Y: Double;
    Color: TChartColor;
    Text: String;
    YList: TDoubleDynArray;
    ...
  end;

This is the internal structure of the data plotted in a series. Besides the usual x and y coordinates that you know from other plot types and tutorials, there is also a data field YList which reserves storage for additional y values. The chart source provides the property YCount to define the length of the array YList - select the RandomChartSource and have a look at the Object Inspector. But you should know that YCount includes also the standard y value, the length of the YList array for the other y values, therefore, is smaller by 1.

Our final plot will contain five column types ("hydro power", "wind energy", "bio mass", "photo-voltaics", and "geothermal"). Therefore, enter 5 for YCount. This creates stacks of five bars.

StackedBarSeries Step2.png

Using ChartStyles

Unfortunately, all bars are in the same color. How can we modify the color of each bar level?

We need another component to address this: ChartStyles. This is a collection of TChartStyle components which allow to modify the appearance ("style") of each set of bars.

Go to the component palette, find the 9th icon (the one with the brush in front of the colored bars), and add the component to the form.

ChartStyles.png

At first you have to link the BarSeries to the ChartStyles component. The series has a corresponding property Styles for this purpose.

Then, select the component, and go to its Styles property in the Object Inspector. Click on the ellipsis button (...) to open the ChartStyles editor. Here you can add a style for each group of bars by clicking on the + button six times. Alternatively you can right-click on the Styles node in the Object Tree of ChartStyles1 and select "Add item".

ChartStylesEditor.png ChartStylesEditor Properties.png

In the the ChartStyle editor you can select each style and you'll see the style's properties in the object inspector. The TChartStyle item with the index 0 belongs to the bottom-most bar. Index 1 belongs to the next bar, etc. For changing the color of the bars, modify the Brush.Color of the style. The chart immediately updates and displays the corresponding bar in the new color. Repeat this with every Style.

Showing ChartStyles in the legend

Using the ChartStyle property Text you can assign a legend item for each bar level. Set Text to "Hydropower", "Wind energy", "Bio mass", "Photovoltaic", and "Geothermal" for the styles, starting with index 0.

In order to show the legend you know that you have to set the chart's Legend.Visible property to true; it is false by default. The legend, however, displays only a single entry, a red box corresponding to the bar series without usage of ChartStyles. In order to correct that, select the BarSeries, and open the node Legend in the object inspector. The property Legend.Multiplicity is still at lmSingle which produces only a single legend item per series. Change it to lmStyle instead. This is the correct setting when the series uses styles. Now the chart reads the Text values of each style and adds them to the legend.

StackedBarSeries Step3.png