In esProc, it is common to add text to various charts. The text is plotted and positioned with the text element, and has its own style compared with text working with other chart elements (though the latter’s properties can be adjusted in a similar way).
1.Data properties
The text element has a relatively simple function. It defines specified text in a given position. We use physical coordinates, rather than the logical coordinates, to position the text element.
The following plotting algorithm shows how we use the text element:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from FRUITS”) |
| 3 | =A1.plot(“BackGround”) |
| 4 | =A1.plot(“EnumAxis”,”name”:”x”,”xStart”:0.2,”xEnd”:0.9,”xPosition”:0.7) |
| 5 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”yStart”:0.7,”yPosition”:0.2) |
| 6 | =A1.plot(“Column”,”axis1″:”x”,”data1″:A2.(NAME),”axis2″:”y”,”data2″: A2.(UNITPRICE)) |
| 7 | =A1.plot(“Text”,”text”:”Fruits”,”x”:0.5,”y”:-30,”textFont”:”Arial”,”textStyle”:3, “textSize”:16,”textColor”:-16750900) |
| 8 | =A1.plot(“Text”,”text”:”Column chart”,”x”:0.5,”y”:-14,”textFont”:”Arial”, “textColor”:-16711732) |
| 9 | =A1.draw@p(300,200) |
An algorithm for plotting a column chart, it uses text element to add text in A7 and A8 besides defining the background, axes and the column element. Properties of text are as follows:
We define text element data right through setting its properties, as well as use coordinate parameters X and Y to position physical axes for the text element. Here we set X value using physical coordinates calculated pro rata, and set Y value by pixels. Which method should be used to define the coordinate value is determined by the value range.
The properties of the text element include the text font, text style, text size and text color, which are the same for text properties of other chart elements. Here A7 specifies size-3 blue text in bold italic type. A8 only modifies the text color.
Plotting result is:
So we can see that a chart title has been added in the specified position.
We can rotate the text by changing text element’s Rotation angle property. For instance, modify A7 to change this property:
Thus the text Fruits will rotate clockwise around the specified coordinate point.
2. Positioning the text element
We positon the text element using physical coordinates, as with positioning logical coordinates explained in esProc Charts: Coordinate Systems and Coordinate Transformation. If the range of the coordinate value is 0<= x <=1, we set the value in proportion to the size of the canvas; if the range is x>1 or x<0, set it by pixels.
We’ll plot a grid region using the following plotting algorithm to show positions of texts more clearly:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”name”:”x”,”autoCalcValueRange”:false,”scaleNum”:10,”xStart”:0,”xEnd”:1,”xPosition”:1, “regionTransparent”:0.5) |
| 4 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”:false,”scaleNum”:10,”yStart”:1,”yEnd”:0, “yPosition”:0,”regionTransparent”:0.5) |
| 5 | =A1.plot(“Dot”,”axis1″:”x”,”data1″:5,”axis2″:”y”,”data2″:5) |
| 6 | =A1.draw@p(300,200) |
A2 plots the background. A3 and A4 plot axes, of which one is located in the leftmost edge and the other is located at the bottom and which dominate the entire chart area. The Autocalc value range property for both axes is set as false, so that default value range [0,10] can be activated. By setting Region transparency as 0.5, an overlapping effect is created through the grid region. For the convenience of observation, A5 plots a dot at the center of the region.
A6’s plotting result is:
Both axes in horizontal and vertical direction are divided evenly into 10 scales. Since the size of the grid region is 300*200, one scale in horizontal direction is 30 pixels and one in vertical direction is 20 pixels.
Then we plot four text elements in different positions in the grid region:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”name”:”x”,”autoCalcValueRange”:false,”scaleNum”:10,”xStart”:0,”xEnd”:1, “xPosition”:1,”regionTransparent”:0.5) |
| 4 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”:false,”scaleNum”:10,”yStart”:1,”yEnd”:0, “yPosition”:0,”regionTransparent”:0.5) |
| 5 | =A1.plot(“Dot”,”axis1″:”x”,”data1″:5,”axis2″:”y”,”data2″:5) |
| 6 | =A1.plot(“Text”,”text”:”T1″,”x”:0.4,”y”:0.4,”textStyle”:1,”textColor”:-65536) |
| 7 | =A1.plot(“Text”,”text”:”T2″,”x”:0.4,”y”:0.8,”textStyle”:1,”textColor”:-65281) |
| 8 | =A1.plot(“Text”,”text”:”T3″,”x”:60,”y”:60,”textStyle”:1,”textColor”:-16776961) |
| 9 | =A1.plot(“Text”,”text”:”T4″,”x”:-60,”y”:-60,”textStyle”:1) |
| 10 | =A1.draw@p(300,200) |
We set different coordinates and different text color for the four text elements plotted in four positions, all in boldface but without setting the alignment property:
Without setting the alignment property, the specified coordinate point is in the middle position relative to each of the text elements. Below is the plotting result:
From the chart, we can see the position of each text element relative to the physical axes.
3. Alignment property
Beside the specification of coordinate point, we can also adjust the relative position between the coordinate position and the text by setting alignment property, as shown in the following plotting algorithm:
| A | |
| 1 | =canvas() |
| 2 | =A1.plot(“BackGround”) |
| 3 | =A1.plot(“NumericAxis”,”name”:”x”,”autoCalcValueRange”:false,”scaleNum”:10, “xStart”:0,”xEnd”:1,”xPosition”:1,”regionTransparent”:0.5) |
| 4 | =A1.plot(“NumericAxis”,”name”:”y”,”location”:2,”autoCalcValueRange”:false, “scaleNum”:10,”yStart”:1,”yEnd”:0,”yPosition”:0,”regionTransparent”:0.5) |
| 5 | =A1.plot(“Dot”,”axis1″:”x”,”data1″:5,”axis2″:”y”,”data2″:5) |
| 6 | =A1.plot(“Text”,”text”:”T1″,”x”:0.5,”y”:0.5,”textStyle”:1,”textSize”:22, “textColor”:-65536,”hAlign”:0) |
| 7 | =A1.plot(“Text”,”text”:”T2″,”x”:0.5,”y”:0.5,”textStyle”:1,”textSize”:22, “textColor”:-65281,”hAlign”:4,”vAlign”:8) |
| 8 | =A1.plot(“Text”,”text”:”T3″,”x”:0.5,”y”:0.5,”textStyle”:1,”textSize”:22, “textColor”:-16776961,”hAlign”:4,”vAlign”:32) |
| 9 | =A1.plot(“Text”,”text”:”T4″,”x”:0.5,”y”:0.5,”textStyle”:1,”textSize”:22,”vAlign”:8) |
| 10 | =A1.draw@p(300,200) |
We still plot four texts T1, T2, T3 and T4, setting each of the physical coordinates for them as 0.5, i.e. the specified coordinate point is the center of the canvas, where a referential dot is plotted. Moreover, we increase the font size and use boldface type to create a clearer view. And we set different alignment property for them besides using different colors.
Then the plotting result is:
It can be seen how the alignment property works. Though we define the same coordinate point, which is the center of the canvas, for the four text elements, the result is that for T1, the coordinate point is situated on the middle left; for T2, it is on the top right; for T3, it is on the top bottom and for T4, it is on the top middle. These are in consistent with the setting of alignment property for them.