The Dot Element

Coordinate Axes illustrated different types of coordinate axes esProc offers. A chart element can be plotted on the coordinate plane after defining a pair of axes. Here let’s explore how to plot a chart element in specified position. We’ll start from the simplest dot element.

12.5.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. By specifying a sequence of multiple pairs of logical coordinates, you 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 enumeraed axis, x, as the horizontal axis, and A5 designs a numeric axis, y, as the vertical axis.

A6 designs the dot element, which is our focus.

A7 draws the chart as follows:

As can be seen, the colors of dots are by default automatically generated. Next, using this plotting algorithm, let’s learn about the chart properties of the dot element 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 the logical coordinates for a chart element. Values or expressions for logical coordinates of the two axes will be set individually. Though no particular order is required for the two logical axes, 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.

12.5.2 Appearance properties

When plotting a scatter chart, you can set the marker style and fill color, properties of the boundary lines and other properties. For example, modify A6’s chart parameters to set the appearance properties for the dot chart:

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 modifications, the plotting result is:

As can be seen, the appearance of the dots has changed according to the settings. The Marker weight property sets the pixels of the dot’s radius. To make the sizes of the dots match their logical coordinates, set Radius 1 and Radius 2 properties 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 for a certain chart parameter. Among A6’s plotting parameters, modify the 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.

12.5.3 Labels

Sometimes labels need to be added to the dots in a scatter chart. In that case you can edit the 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 the settings.

12.5.4 Common properties of chart elements

There are some common properties for the most used chart elements, like the visibility and transparency, about which you’ve 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:

You 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 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 will not be plotted.