esProc Charts: The Column Element

The column element is frequently used in plotting various charts. We’ve made some studies about it in esProc Charts: Coordinate Axes through examples. Here we’ll illustrate the setting of its properties and their roles.

1. Data properties

The plotting algorithm below for plotting a clustered column chart of gym results will lead you to the preliminary knowledge about how to plot a column chart:

A2 retrieves plotting data from the database:

A3 plots a white background. A4 sets an enumeration axis as the horizontal axis x, with data analyzed automatically. A5 sets a numeric axis as the vertical axis y. The plotting algorithm does not plot any legends. A6 plots the column chart. Plotting properties of the column element will be discussed later.

The plotting result of A7 is:

By default the fill colors of columns will be automatically generated by esProc’s default pallette.

The column element needs only one pair of coordinates at minimum to be positioned. According to its numeric axis height, a column will be plotted starting from a position on axis x to the data point. Two logical axes are required to define coordinate data. The logical coordinates on them will be defined separately.

Besides using categories to represent different events, this chart also uses series to represent athletes, so the logical coordinates on the enumeration axis should contain data of both the categories and series. Values of the two types of data will be separated by a comma, such as “Vault,Becky Downie”. As with the dot element, multiple pairs of coordinates are for plotting multiple columns.

2. Width of columns

The width of columns in a column chart has a default value. No columns will be plotted wider than this value, which is determined by the number of columns and the Gap ratio property of the enumeration axis. The gap ratio is the ratio of space width between columns in different categories to the default column width. The default ratio is 1.5, which means the former is 1.5 times wider than the latter.

Note: This property of enumeration axis will affect the plotting result of the column element that uses this axis. We can modify the property by editing the plotting parameters in A4 to adjust the width of columns. For example, modify this enumeration axis property in the clustered column chart as follows:

Set Gap ratio as 1 to make the space smaller and equal to the column width. The plotting result would be this after the modification of setting:

It can be seen that the space between columns within each group has become smaller, making the column width comparatively bigger. Actually the default width of columns is collectively decided by the gap ratio on the enumeration axis as well as the number of columns under plotting and their categories.

Besides the default width, the width of columns is affected by appearance properties of the column element as well, such as Column width. The value of Column width indicates the proportion of column width to the default width. When the value is 1, column width is equal to the default width. The default value is 0.9, meaning the ratio between the column width and the default width is 0.9. Seen from the above plotting result, columns within the same group in this case still have space between each other. If the plotting properties are modified as follows:

Since the Column width value becomes smaller, the width of columns becomes smaller, with following plotting result produced:

3. Appearance properties

Like the appearance properties discussed in esProc Charts: The Dot Element, we can set the border style and fill color for the column element too. For example, modify A6’s plotting parameters to change the column element’s properties:

Restore column width to its default value; set border style of the column element as blue dashes and the border weight as 1. Use a sequence to set fill colors for the columns. Gradient color is checked as the 3^rd fill color, but both color 1 and color 2 properties have the same setting. Then the plotting result is:

We can see that the columns’ border styles and fill colors have thus changed. The fill colors set via a sequence will be used cyclically. When the setting of gradient color for Color1 and Color2 is the same, a lighting effect will be generated automatically.

In addition to the border style and fill color and the column width talked about in the preceding section, the appearance properties of the column element also include Column shape. Besides the common bars, shapes of columns also include 3D columns and cylinders, which are usually used in a 3D coordinate system.

If the 3D property of one of the axes used by the chart element is checked, the plotting will take on the 3D effect. Modify plotting properties for the enumeration axis by editing A4:

By setting the x-axis as a 3D axis, the entire coordinate system for plotting will assume the 3D effect. But, if the column shape remains the column, a two-dimensional column chart will be plotted, which is not in harmony with the 3D coordinate system. To fix this issue, we’ll modify the column shape into 3D column in A6 and restore default value for border style and fill color, as shown below:

This way, a 3D column chart will be plotted, as shown below:

In the chart, both the horizontal and vertical axes are three-dimensional. To adjust the thickness of the 3D chart, modify 3D thick ratio under the 3D property. Note that the thick ratio is set according to the default width mentioned in the previous section.

Now look at the plotting result and feel the change of the 3D thickness:

Or we can set a cylinder shape:

And the plotting result is:

In particular, when plotting a 3D chart, if we don’t set the line style for a certain axis, then this axis will be plotted as a platform. For example, modify A4’s parameters of line color and line style for the x-axis in the plotting algorithm:

Then the plotting result is:

4. Stacked column chart

Stacked column charts with multiple series stack columns of data of the same category, instead of placing all columns in parallel. Below is the plotting algorithm of such a chart:

We can also make a stacked line chart by plotting line elements, whose properties are similar to those of the column element. This plotting algorithm plots both a column chart and a polyline chart. Different from preceding examples, when setting data properties for the column element and line element, it sets Data1 as A2.(NAME+”,”+EVENT), making NAME the category values on the enumeration axis and EVENT the series values. The Stack type property is set in both A6 plotting the column element and A7 plotting the line element to change the default No stack to Stacked by value, as shown below:

With this setting, the plotting result is as follows:

As can be seen, the columns for displaying the event results of each athlete are stacked. Thus we can see the total result of each athlete on the finished chart.

Another type of stacked chart is the one stacked by percent, which can be plotted by setting the following properties:

And the plotting result is:

For the chart in which the columns and lines are stacked by percent, data proportions of all series in each category are plotted and the total percent of data in each series is 100%. That way data is compared by percent and the total data value in each category loses its significance.

5. Other properties

The column element also has special properties: Convex edge and Data3.

Default value of Convex edge property is false; if it is set as true, then the column chart will be plotted with convex edges. Usually this property is used for columns with pure fill colors. Below is a sample plotting algorithm:

Set fill color property for the column chart in A6:

Note: We don’t use gradient color here. This is unlike the setting when discussing the appearance properties of the column element. First let’s look at the case without setting the convex edge, as A7’s plotting result shows:

Then modify the plotting properties of the column element by editing A6’s parameters:

And get the following plotting result:

It can be seen that the columns have got the convex edges. The Convex edge property applies in the 3D column chart as well, while it is invalid for a cylinder chart.

As mentioned in the first section, we just need to define one pair of coordinates to position a column and to plot the whole column chart automatically according to the height of the numeric axis. Columns will be plotted starting from the x-axis to the positions specified by coordinates. If we want to plot columns from a non-default point, set Data3 to change the start position.

Go on to modify the column element properties by editing A6’s code:

One point to note when setting Data3: The logical axis on which the data depends is the data property Axis 2. Its setting requires a sequence with the same length as with the setting of other data properties. Because the value of Data3 in the above is set as 10 for each column, columns will be plotted from the position whose numeric value on y-axis is 10, rather than from the x-axis. Thus the plotting result of A7 is:

By setting Data3, we can plot charts with special requirements. For example, suppose we want to display the opening prices and closing prices of stocks in a stock chart.