In esProc Charts: Coordinate Axes, we learned the basic usages of different coordinate axes and the setting of their properties. Once a logical axis is properly defined, the logical coordinates on it can be transformed into corresponding physical coordinates, according to which a certain chart element can be plotted.
Besides the logical axis, esProc handles computation of coordinate transformation in plotting a chart using other coordinate axes. An axis itself is a type of chart element. To plot it, we can specify parameters as needed. In the rest part of the article, we’ll illustrate its other properties.
1. Properties of axis line
In esProc Charts: The Basics, examples are cited to illustrate how to set the color, the style and the weight for an axis line. Besides, the appearance properties of an axis element also include the arrow styles for an axis. For example:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE order by NAME”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”axisColor”:-16737895,”axisLineWeight”:2,”axisArrow”:256) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2) |
| 6 | =A1.plot(“Column”,”axis1″:”x”,”data1″:A2.(EVENT+”,”+NAME),”axis2″:”y”,”data2″:A2.(SCORE)) |
| 7 | =A1.plot(“Legend”,”legendText”:A2.id(NAME),”x”:0.81,”y”:0.2,”width”: 0.18) |
| 8 | =A1.draw@p(450,250) |
A2 retrieves data for plotting:
In the plotting algorithm, A4 sets properties for the x-axis, such as the line color, line weight and arrow style:
The plotting result is:
It can be seen that the appearance of x-axis has changed by modifying plotting parameters.
2. Properties of axis title
We can set a title for an axis to render its data during plotting. The setting of title includes setting properties like font and style. Modify A4 in the plotting algorithm in the previous section into =A1.plot(“EnumAxis”,”name”:”x”,”axisColor”:-16737895,”axisLineWeight”:2,”axisArrow”:256,”title”:”Event”,”titleFont”:”Times New Roman”,”titleStyle”:7,”titleColor”:-16776961) that sets properties of the x-axis title as follows:
In the above figure, we set the title as Event, select desired Title font, and modify Title style and Title color. We adjust the distance from title text to tick labels by setting the Title indent property and the size of the title text by setting Font size. We also specify the tilting angle of the title text by setting Rotation angle. Then plot the chart according to the modified setting:
As can be seen from the chart, a title exists as plotted below the x-axis.
3. Properties of labels
It is convenient to read statistical values on an axis by displaying tick marks and tick labels as needed. As the axis title, you can set font and style properties for tick labels. For example, modify again the preceding plotting algorithm by editing A4’s code to change the properties of labels on the x-axis:
By re-setting the font, style and color of the a-axis labels, the plotting result becomes this:
As can be seen, the appearance of tick labels below the x-axis has changed accordingly. The “BalanceBeam”, the third tick label, is omitted by default since it overlaps some parts of the other labels.
Among properties of labels, we can set Indent property to adjust the distance between the title text and tick labels, Rotation angle to change the tilting angle of the title text, Label step to display labels at regular intervals. By checking Allow text overlapping, label text will be plotted even though it might overlap others (By default labels will not overlap each other. A label will not be plotted if it will overlay an existing label, as the third label BalanceBeam in the above chart). Tick labels can be hidden by setting Allow labels as false.
4. Properties of tick marks
Tick marks are tiny lines added to the axis to mark the scale positions. Its properties such as Style and Weight can be modified in the plotting algorithm. Edit A5 in the previous plotting algorithm to modify properties of tick marks on y-axis:
Reposition the tick marks on y-axis to align to the right or to the top and change their weight and length. On the property setting interface, we can set Display step property to adjust the number of minor tick marks in each interval between major tick marks. With the modification, the plotting result is:
It can be seen that the tick mark positions on y-axis have changed. Note that when they are changed, positions of tick labels will change accordingly. Besides, the color of tick marks is the same as the axis color.
5. Properties of grid region
In the coordinate plane, we can plot a region of grid lines according to the major tick marks, so that the chart will look pleasing and become easy to observe. By default white and dark blue are alternate colors for the grid background of the coordinate axis. The colors can be modified in the plotting properties dialog box. Modify the preceding plotting algorithm by editing A5’s code to set the properties for the background grid region of y-axis:
Set Line style as the default solid line, specify values for Line color and Region colors and change value for Regiontransparency from 1.0 to 0.5. A sequence parameter is used to set the color of the grid region. To edit the parameter, click the right-most arrow button on the property setting dialog box and edit it on a popup window of sequence parameter value.
According to the above setting, the plotting result is:
We can see that the color of grid region in horizontal direction has changed. If certain colors have been set for the grid region, the transparency needs to be adjusted too. That way, an overlay effect in grid region of different axes would be created.
We can also hide the grid region by setting the property of Allow regions as false.
6. Polygonal regions in polar coordinates
The Polygonal region property is valid only when plotting charts in polar coordinates. For example, below is the plotting algorithm of a radar chart for gymnastic results:
| A | B | |
| 1 | =canvas() | |
| 2 | =demo.query(“select * from GYMSCORE”) | |
| 3 | =A1.plot(“BackGround”) | =A1.plot(“NumericAxis”,”name”:”x”,”location”:3, “autoCalcValueRange”:false,”maxValue”:16, “minValue”:13, “scaleNum”:3,”polarLength”:0.24) |
| 4 | =A1.plot(“EnumAxis”,”name”:”y”,”location”:4,”gapRatio”:-0.5, “labelOverlapping”:true) |
=A1.plot(“MapAxis”,”name”:”colors”,”logicalData”: A2.id(NAME),”physicalData”:[-65536,-16711936,-16776961]) |
| 5 | for A2.group(NAME) | =A1.plot(“Line”,”endToHead”:true,”closedArea”:true, “transparent”:0,”lineWeight”:2,”lineColor”:A5.NAME: “colors”,”axis1″:”x”,”data1″:A5.(SCORE),”axis2″:”y”, “data2”:A5.(EVENT)) |
| 6 | =A1.plot(“Legend”,”legendText”:A2.id(NAME),”x”:0.81, “width”:0.18,”legendType”:3,”legendLineWeight”:2, “legendLineColor”:A2.id(NAME):”colors”) |
|
| 7 | =A1.draw@p(450,260) |
In which A2 retrieves data for plotting. A3 plots a white background. B3 plots a numeric axis, x, as the polar axis and A4 plots an enumeration axis, y, as the radial axis.
In particular, B4 plots a mapping axis, colors. Its properties are as follows:
Unlike the logical axis discussed in esProc Charts: Coordinate Systems and Coordinate Transformation, the mapping axis will not transform data values to the coordinates for chart plotting. Instead it is used to convert data values to corresponding property values. Here a one-to-one relationship between names of the athletes and the integer values of colors will be created through the mapping axis, colors.
A5 loops through data of each of the athletes, plotting polyline charts for them in B5. Colors of the polylines are set through colors, the mapping axis.
The setting makes colors of polylines for the athletes match the mapping axis setting.
A6 plots the legend using the mapping axis, colors, too:
A7’s plotting result is as follows:
Now let’s study the properties of the polygonal region in polar coordinates. Modify A4’s plotting parameters, setting color for the polygonal region of the radial axis, i.e. the enumeration axis y, checking Polygonal region, and changing Region transparency value to 0.3. The modification is shown below:
Then the plotting result is:
Since polygons have been used in the background region of the radial axis, the polar coordinate planes have presented themselves as polygons. But, at this time, the polygonal region property for the polar axis hasn’t been checked, so its background is still circles. Modify B3’s plotting parameters, setting color for the polygonal region of the polar axis, i.e. the numeric axis x, checking Polygonal region, and changing Region transparency value to 0.3, as shown below:
Plotting result is:
Thus the background for the polar axis has become polygonal rings. As the transparency of the polygonal regions for both the radial axis and the polar axis is set as 0.3, the finished chart has achieved the effect of color overlay.