We learned how to plot a dot chart element using logical coordinates in esProc Charts: The Dot Element. Here we’ll learn about plotting the line element. The line element is another one of the most basic chart elements, which is positioned by at least two pairs of logical coordinates. If there are more logical coordinates, we can plot several or more lines according to them.
1. Data properties
The following plotting algorithm plots a polyline chart for Ana Silva’s results of gym events:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select EVENT,SCORE from GYMSCORE where NAME=’Ana Silva'”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”allowRegions”:false) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”:false,”maxValue”:15, “minValue”:14,”allowRegions”:false) |
| 6 | =A1.plot(“Line”,”axis1″:”x”,”data1″:A2.(EVENT),”axis2″:”y”,”data2″:A2.(SCORE)) |
| 7 | =A1.draw@p(450,250) |
A1 creates a canvas. A2 retrieves plotting data as follows:
A3 plots the background. A4 plots an enumeration axis as the horizontal axis x. A5 plots a numeric axis as the vertical axis y and sets the maximum and minimum values on it. The Allow regions property for both the horizontal and vertical axes is set as false, which means the grid lines region on the background will not be plotted and enables a clear view for observing the plotting process.
The following part of the article will revolve around the line element plotted in A6. First let’s look at A7’s plotting result:
The line element needs at least two pairs of coordinates to be positioned. To define a pair of coordinates needs two logical axes, on which the logical coordinate values will be separately defined.
In this example where the logical coordinate values A2.(EVENT) and A2(SCORE) are both set as sequences, each containing more than two members, multiple lines will be plotted. We cannot plot a line element with only one pair of logical coordinates.
2. Appearance properties
As can be seen from the above chart, the end points and all other data points on the line are dots with automatically generated fill colors. A polyline chart under plotting can be regarded as the element of dots connected with lines. In this sense, appearance properties of the line element are the same as those of the dot element, mentioned in esProc Charts: The Dot Element. Note that in a polyline chart plotting, the line and the boundary line of the dots share properties such as line color, line weight and line style. Suppose modify the plotting parameters in A6 to set appearance properties for the lines and dots.
We’ll set the line style as dark blue dotted line with 2 pixels’ line weight, the marker style as triangle with 6 pixels’ marker weight and the fill color as light blue. With the modification, the plotting result is：
We can see that the appearance of the line has been changed accordingly.
3. The shaded area
Using line element, we can also make a polyline chart with a shaded area with certain color or certain shape. To do this, we’ll modify the plotting properties through A6.
By checking Closed area property and setting Area color property, the plotting result is:
With Closed area property checked, we’ll fill an area between the polyline and the Axis 1 set in the data properties interface.
If we check both the Closed area and Connect head and tail property, which means A6’s code will be modified to change the plotting properties as follows:
Then we would get the following plotting result:
In this case, the shaded area would be a closed area formed by connecting the two end points of the polyline.
In particular, if we need to plot a line chart only with end points connected and without fill color, we can set the fill color transparency as 0 besides checking Closed area and Connect head and tail:
Thus the plotting result would be:
Notice that in this case the data points are transparent too.
4. Other properties
In esProc, we can plot a chart element in different coordinate systems according to the given data properties. For example, we’ll plot a function graph using lines in a polar coordinate system:
| A | B | C | |
| 1 | =canvas() | 20 | >rads=[],angs=[] |
| 2 | for B1 | =360*(A2-1)/B1 | =1+cos(B2*pi()/180) |
| 3 | >angs=angs|B2 | >rads=rads|C2 | |
| 4 | =A1.plot(“BackGround”) | ||
| 5 | =A1.plot(“NumericAxis”,”name”:”r”,”location”:3, “scaleNum”:2,”regionLineStyle”:0,”regionTransparent”:0.6) | ||
| 6 | =A1.plot(“NumericAxis”,”name”:”a”,”location”:4, “autoCalcValueRange”:false,”maxValue”:360,”scaleNum”:6, “regionLineStyle”:0,”regionTransparent”:0.6) |
||
| 7 | =A1.plot(“Line”,”endToHead”:true,”closedArea”:true, “transparent”:0,”markerStyle”:0,”axis1″:”r”,”data1″:rads, “axis2″:”a”,”data2″:angs) |
||
| 8 | =A1.draw@p(350,250) |
The above plotting algorithm plots a cardioid using lines. B2 sets the sample size. The code in the second and third line calculates by loop the coordinate values of the points representing the samples and records their radial and angular coordinates in parameters rads and angs. A5 sets a numeric axis r as the polar axis without grid lines and with the background region transparency being 0.6. A6 sets numeric axis a as the radial axis, setting the maximum angle as 360 degrees and the same background region properties as the polar axis.
A7 plots the line elements by setting data properties, checking Connect head and tail and Closed area property, and specifying the fill color transparency as 0 and that no data points will be plotted:
Below is the plotting result:
Now let’s learn about the line element’s other properties by modifying the plotting algorithm.
If we set Star Line property as true, we will not plot a polyline chart. Instead, we’ll connect each end point with the original point to produce a sun ray plot. That would be the result by modifying A7’s plotting parameters:
Below is the plotting result in A8:
This sun ray plot cannot form a closed area, so the checked properties like Connect head and tail, Closed area and Area color are invalid.
Proceed to modify the plotting parameters by checking the Step line property:
We’ll get plotting result like this:
By checking Step Line, neighboring points on the line will be connected by a vertical straight line and a horizontal straight line, instead of a single straight line. Thus a ladder-like line chart will be plotted. This property is useful in plotting charts like a pulse sequence diagram. With Step Line checked, Star Line is invalid.
In addition, we can set Stack type property to plot a stacked area chart with multiple series and categories. Detailed discussion about this property is available in the section of Stacked column chart in esProc Charts: The Column Element.