We talked about different types of coordinate axis used in esProc in esProc Charts: Coordinate Axes and learned that a chart element can be plotted on the coordinate plane after defining a pair of axes. From this article, we’ll discuss how to plot a chart according to specified position starting from the simplest dot element.
1. Dots and their data properties
The dot is one of the most basic chart elements. A dot needs merely one pair of logical coordinates to be positioned. When using sequences to set coordinate values, we can plot multiple dots.
Below is the plotting algorithm for a scatter chart showing population in some cities:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select NAME,POPULATION from STATES where STATEID<6”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”allowRegions”:false) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”:false,”maxValue”:5.0E7,”format”: “#,###.##”,”transform”:1,”scale”:1000.0) |
| 6 | =A1.plot(“Dot”,”axis1″:”x”,”data1″:A2.(NAME),”axis2″:”y”,”data2″: A2.(POPULATION)) |
| 7 | =A1.draw@p(450,250) |
A1 creates a canvas. A2 retrieves data for plotting the chart:
A3 plots a white background. A4 plots an enumeration axis, x, as the horizontal axis and A5 designs a numeric axis, y, as the vertical axis.
A6 designs the dot element, which is the focus in this article.
A7 draws the chart as follows:
As can be seen, the colors of dots are by default automatically generated. Next, using this plotting algorithm, we’ll learn about plotting properties of the dots and get preliminary understanding about the common properties of the frequently used chart elements.
A chart element’s data properties are for plotting its physical coordinates. A dot element can be positioned by only one pair of coordinates. Generally two logical axes are needed to define logical coordinates for a chart element. Values or expressions for logical coordinates of the two axes will be set respectively. Nor particular order is required for the two logical axes, but they should be a fixed pair, an x-axis and a y-axis, or a polar axis and a radial axis, for instance.
Here the data of logical coordinates on both axes – A2.(NAME) and A2.(POPULATION) – are sequences, which means there are multiple pairs of coordinates for plotting multiple points.
2. Appearance properties
To plot a scatter chart, we can set the marker style and fill color, properties of the boundary lines and other properties for the dots. For example, modify A6’s plotting parameters to set appearance properties of the dots:
Set Marker style as the shape of diamond, change Line color to light blue, increase Marker weight to 6 pixels and change Fill color to pink gradient. With the modification, the plotting result is:
As can be seen from the chart, the appearance of the dots has changed according to the setting. The Marker weight property is for plotting the pixels of the dot’s radius. To make the size of the dots match their logical coordinates, set Radius 1 and Radius 2 property which respectively correspond to the logical axes – Axis1 and Axis 2 – in the data property setting. The width and height of the dots will be calculated from the specified logical coordinate values.
To have each dot has a distinct appearance, use a sequence of plotting parameters. Among A6’s plotting parameters, modify fill colors of the dots:
Then A7’s plotting result is:
When using a sequence to set the properties, the sequence will be used repeatedly if its length is short.
3. Labels
Sometimes we need to add label beside each dot in a scatter chart. To do this, we can edit text properties in the property setting interface. Modify the chart in the preceding section, for example, by setting the text properties as follows:
Set Text as the number of population, and specify the desired Text font, Text size and Text color. Thus the plotting result is as follows:
The labels are displayed above dots according to their set properties.
4. Common properties of chart elements
There are some common properties for the most used chart elements, like the visibility and transparency, about which we have had some basic understanding through scatter chart plotting. Edit A6’s plotting parameters to modify the plotting algorithm for the scatter chart:
Change the Transparency value for the chart element to 0.5 and check Shadow. The plotting result is this:
We can see that the modification of Transparency has faded the dot’s colors and made them more transparent. Checking Shadow creates slight shadows to the lower right of the dot. Besides, setting Visible as false will hide the chart elements. The Allow text overlapping property is similar to that of the axis labels mentioned in esProc Charts: The Axis Element. During the plotting of a set of chart elements, if this property is set as false, an element that overlaps some part of an existing one not be plotted.