Regarding the chart element plotting, compared with setting the appearance properties for a chart element like color and line style, it is more important to specify its position. When plotting a chart, statistical values are often used to determine its position. Therefore you will need to create a coordinate system on the canvas according to the chart style, and then transform the statistical values to plotting data based on coordinate system settings.
1. Coordinate systems and coordinate axes
esProc provides two commonly used coordinate systems – Cartesian coordinate system and polar coordinate system.
According to different coordinates, coordinate axes consist of x-axis and y-axis, or polar axis and radial axis. Each type of axis has its own plotting properties with which the corresponding coordinate transformation operation is handled.
1.1 Cartesian coordinate system
Cartesian coordinates have two mutually perpendicular axes, denoted the x- and y-axes. The logical coordinates on the horizontal x-axis determine the horizontal location in the chart area, and those on the vertical y-axis determine the vertical location in the chart area. Actually, in a Cartesian coordinate system the abscissa and ordinate of physical coordinates can be calculated separately based on their corresponding logical axes, without any mutual influences.
In all the examples we have cited, the system of Cartesian coordinates is used to position chart elements. The native physical axes on the canvas also belong to a Cartesian coordinate system, which is used in plotting most of the charts such as column chart, line chart, area chart, scatter chart, bubble chart and stock chart.
1.2 Polar coordinate system
The axes in polar coordinates are polar axis and radial axis. We need to define the pole position on the polar axis as well as the polar axis length. The radial axis defines the start angle and end angle for polar coordinates. Conventionally the angle horizontally from the pole to the right is 0° and the counterclockwise angle from the polar axis is positive. By default the start angle of polar coordinates is 0° and the end angle is 360°.
The system of polar coordinates is used to plot pie chart, doughnut chart, radar chart and some other common charts.
When performing coordinate transformation operation with polar coordinates, a point’s line segment length is calculated from the coordinates on the polar axis and its polar angle is calculated from the coordinates on the radial axis.
2. Physical axes and logical axes
2.1 Physical axes
On a canvas, the prevailing Cartesian coordinate is the physical coordinate whose x-axis and y-axis are physical axes. The physical axes are fixed and don’t need definition. Rather they are generally used to define positions of logical axes.
For physical axes, x-axis runs left to right and y-axis goes up and down. Their coordinate values can be set in proportion or by pixels.
- Set in proportion
In this case the value range of coordinate x is 0<= x <=1. To set the coordinate system’s position in proportion, place the origin at the top left corner of the canvas and make calculation in certain proportion to canvas size. The calculations of abscissas and ordinates will take the canvas’s width or height as the unit size.
- Set by pixels
In this case the value range of coordinate x is x>1 or x<0. When x>1, place origin on the canvas’ top left corner; when x<0, place origin on the canvas’ bottom right corner. To position a chart element by pixels on the canvas, calculations will be performed according to abscissas and ordinates as well as the position of origin.
For example, below plotting algorithm plots a numeric x-axis:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”autoCalcValueRange”:false) |
| 4 | =A1.draw@p(450,350) |
As there are no other chart elements to be plotted, we set the property of the numeric axis’s Autoclc value range as false, indicating that the value range will not be calculated according to the chart element plotted with this coordinate axis. Default setting by pixels will be used to set the position of x-axis:
Among properties of the x-axis, by default X start is 0.1, X end is 0.8 and Y position, the vertical distance from the x-axis to the top of the canvas, is 0.8. They are all proportionally defined coordinates on the physical axes, with origin being in the top left corner. In other words, the x-axis starts from the 20% length of the width and ends at the 80% length, both from the left; it is located at the 80% length of the height from the top. Below is the plotting result:
In the above figure, the horizontal and vertical unit lengths in proportion to the canvas size are respectively 450 pixels and 350 pixels. For example, that X start is 0.1 means that the distance of start point of x-axis from the canvas’s left-most side is 0.1 times of the unit length 450 pixels, i.e. 45 pixels.
Let’s modify some of the numeric axis’s properties:
X end and Y position are changed to values greater than 1. With the two properties being reassigned, we still place the origin in the top left corner but these two positions will be defined by pixels. Below is the plotting result:
X end is 400, which means the distance of the end point of the x-axis from the canvas’s left-most side is 400 pixels. Setting coordinates on physical axes by pixels makes the plotting more precise but is not so convenient when plotting chart elements whose canvas size is not fixed.
Again we will modify properties of the numeric axis, as shown below:
X end and Y position have become negative values. In this case the plotting result would be like this:
When coordinates on the physical axis are negative values, the origin will be placed in the canvas’s bottom right corner. For example, that the coordinate of X end is -50 means the distance of end point of the x-axis from the canvas’s right-most side is 50 pixels. Actually this is exactly the same chart element as the previous one.
2.2 Logical axes
Logical axes are defined by the physical axes. They include numeric axis, enum axis, time axis and others. With logical axes, we can get the plotting positions from statistical values through coordinate transformation.
For the calculated statistical values, they should be transformed to plotting positions according to corresponding logical axes. Coordinates of statistical values are referred to as logical coordinates, while the actual coordinates used in plotting on the canvas are physical coordinates. By defining the logical axes in the plotting algorithm, we can transform the logical coordinates specified in the chart element parameters into physical coordinates when plotting. The physical coordinates under discussing are not the same thing as the coordinates on the physical axes previously mentioned. Physical coordinates are the actual plotting positions of the chart elements on the canvas, whereas the latter refers to coordinates on the native physical axes based on which the logical axes are positioned on the canvas.
For example, in the plotting algorithm below, two numeric axes are defined. “x” is the horizontal axis and “y” is the vertical one:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”name”:”x”,”autoCalcValueRange”:false) |
| 4 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”: false) |
| 5 | |
| 6 | =A1.draw@p(350,200) |
It produces plotting result below:
Write code in A5 for plotting a dot chart:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”name”:”x”,”autoCalcValueRange”:false) |
| 4 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”: false) |
| 5 | =A1.plot(“Dot”,”axis1″:”x”,”data1″:”2″,”axis2″:”y”,”data2″:”6″) |
| 6 | =A1.draw@p(350,200) |
A5’s parameters for plotting a dot chart:
Take the just specified x-axis and y-axis as the logical axes for dot chart plotting. Set data for x-axis as 2 and data for y-axis as 6. Then the plotting result is as follows:
