The Basics

esProc provides flexible charting functionalities, allowing users to set chart parameters and specify chart-specific settingswith the graphics editor and to draw various styles of charts using drawing functions.

12.1.1 General charting procedure

Let’s fist look at the general charting procedure in esProc through the following code for drawing a column chart of vault competition results.

	A
1	=canvas()
2	=demo.query("select * from GYMSCORE where EVENT = 'Vault'")
3	=A1.plot("NumericAxis","name":"y","location":2,"labelFont":"Calibri", "labelOverlapping":true)
4	=A1.plot("EnumAxis","name":"x","categories":A2.(NAME), "labelFont":"Arial")
5	=A1.plot("Column","axis1":"x","data1":A2.(NAME),"axis2":"y", "data2":A2.(SCORE),"text":A2.(SCORE))
6	=A1.draw@p(450,350)

To create an esProc chart, the first thing is defining a canvas, like A1’s code =canvas(). With esProc, we define chart-specific data and chart parameters as well as draw the chart on a specified canvas. Usually one canvas object is used to draw one chart.

A2 retrieves the table sequence containing the required data:

The various styles of charts drawn on the canvas are all made up of the simplest geometric units, called as chart elements. A chart element is used to draw graphs with common features, and can make the charting simpler. You can draw common styles of charts through plotting chart elements with specified parameters. In A3, A4 and A5, =A1.plot(…) is the function for plotting a chart element on A1’s canvas. The vertical axis element plotted by A3 is a numeric axis; the horizontal axis element that A4 plots is an enumeration axis; and A5 plots the Column chart element. Together they construct a column chart. Different chart elements are plotted with different parameters.

After the chart elements are defined, we can start charting. A drawing function is used in A6’s code =A1.draw@p(450,350), in which the chart’s height and width, and the image file format, are specified. It sets the height to 450 pixel and the width to 350 pixel and uses @p option to return the chart in png format. When using G.draw() function, without any options, to plot a chart on canvas G, the chart is by default outputted as an svg vector image. Besides @p option, you can use @j to output jpg images and @g to output gif images. 

A set of code for drawing a chart is referred to as the plotting algorithm, the execution of which by esProc will produce the chart through a painter.

Let’s look at the result of using the above plotting algorithm. After the computation is completed, choose cell A6 where chart plotting code is held and click on Browse graphics icon at the right corner in the value viewing area to start drawing:

Alternatively, right-click on cell A6 and choose Browse graphics from the menu to execute chart plotting (or select A6 and click Edit>Browse graphics on the menu bar):

The chart plotted with this plotting algorithm will be displayed on the Chart preview window that pops up when plotting is completed. The chart area can be resized by dragging. The following is the finished chart:

There are Save as and Copy butttons on the Chart preview window for saving the chart as a local image file, and copying and pasting it for use in other tools (such as Word and Graphics tool). 

So three steps are needed to draw a chart with esProc:

1.  Create a canvas object using canvas() function.

2.  Plot the chart elements step by step using G.plot() function.

3.  Draw the chart using G.draw() function.

12.1.2 Editing chart elements visually

esProc provides a variety of chart elements. Each is defined by many parameters and with a distinct way. So it is complicated to plot chart elements using G.plot() function. To streamline settings and modification of the parameters in plotting a chart element, esProc offers a visual editing environment.

Right-click on the cell for plotting a chart element and choose Graphics editor from the menu to edit a plotting algorithm (or click Edit>Graphics editor on the menu bar to do this):

Do the editing on the pop-up visual editor interface:

At the top left of the window, select a canvas from the drop-down list. And select the desired chart element from the drop-down list at the top right. Then in the lower section, configure the properties of the selected chart element:

The properties of the numeric axis element can be set on this list. Detailed information about these properties and their configuration will be covered in The Axis Element. The other chart elements will be discussed through a series of sections including The Line Element, The Text Element. 

After properties of the desired chart element are configured, a plotting string expression, =G.plot(…), will be automatically generated. The properties can be modified later through Graphics editor, yet the selected canvas and the chart style can’t be changed. If they really need to be changed, modify the expression, or delete it and replot the chart element. 

12.1.3 Basic properties of chart elements

All chart elements have some common properties, such as font color, fill color, line style and font. To highlight the chart area, in the followng examples the jpg image with white background, instead of the png image with transparent background, will be used.

Properties of lines

Lines are an important component of a chart. They constitute, for example, the axes, chart element outline and polylines. In the chart element properties editor, you can set line color, line style, line weight and other properties.

To set line color, click the color square on the Value column and the palette pops up:

Select the desired color from the palette, or choose a color through Color Swatches:

 

Or set an integer value for the desired color with an expression on Exp. column.

esProc offers a variety of color schemes that stored in config\chartcolor.properties. Users can choose the desired one or modify the default scheme. This applies to all color property settings within esProc. The property value retrieval method is detailed in f.property() in Function Reference.

To set line style, click on Line style on Value column and select the desired style from the drop-down list:

esProc offers common line styles including straight line, dash line, dotted line, dash-dot line and double-dot-dash line and none. All of them can be configured using line styling code in Exp. column.

The line weight is defined directly with pixel value.

For example, you can modify the above column chart plotting algorithm to change the vertical axis line properties, as shown below:

Set the axis line color as blue, change the line style into dash line and increase line weight to 2 pixels. As the result, the plotting algorithm is this:

	A
1	=canvas()
2	=demo.query("select * from GYMSCORE where EVENT = 'Vault'")
3	=A1.plot("BackGround")
4	=A1.plot("NumericAxis","name":"y","location":2,"axisColor":-16776961, "axisLineStyle":2,"axisLineWeight":2,"labelFont":"Calibri", "labelOverlapping":true)
5	=A1.plot("EnumAxis","name":"x","categories":A2.(NAME), "labelFont":"Arial")
6	=A1.plot("Column","axis1":"x","data1":A2.(NAME),"axis2":"y", "data2":A2.(SCORE),"text":A2.(SCORE))
7	=A1.draw@p(450,350)

A3 is added to plot a white background. As some of the vertical axis line properties have changed, A4’s code changes accordingly. With these modifications, the plotting result is:

It can be seen that the vertical axis is different.

Properties of fill color

The fill color is the mostly used property for all chart elements. You can flavor the chart and make the data comparison more vivid and intuitive by setting the fill color.

Click on color square on the Value column and the Set color panel will pop up for setting fill color. Modify the fill color for background chart element in A3, as shown below:

Here the background fill color is adjusted into light blue and Gradient color setting is removed. A3’s code thus changes too. Here’s the plotting result:

As can be seen, the whole background turns light blue. You can also use gradient color for the fill. Check Gradient color and set Color2 and Angle (as shown below), and preview the effect Preview section in the bottom left of the Set color panel.

Here’s the plotting result:

Properties of text

Text is also an indispensable part of a chart. For texts in different positions, the font, font type, font color and other properties can be set individually.

To edit font property, select one of the available fonts from the drop-down list:

Select font size from the drop-down list, or set it in pixels with an expression on Exp. column:

Edit text style property in the Set font style window:

The font color editing is similar to the line color editing as described in Properties of lines.

For example, go on adjusting the column chart of vault competition results by changing the font, font size, font style and font color of the horizontal axis labels:

The chart then becomes this:

Obviously, the appearance of label texts on the horizontal axis has changed.

Black-and-white fill pattern

Though in moste cases we prefer colorful chart elements by choosing a desired fill color or selecting a gradient color fill type, there are the cases when we are not able to use colors. One example is when we use the monochrome printer that cannot display color effects. If we still use the color fill pattern, the print will display different shades of gray color which makes viewing difficult. In this case we need to switch to the black-and-white fill pattern.

To modify the Fill Color property in A6 to replot the above column chart, for example:

Select the vertical line (as shown above) under Fill style. Below is the plotting effect in A7:

Each column has becom filled by black-and-white vertical lines. The default fill type is black-and-white, which fills a chart element with while, black and gray lines or swatches. But such a configuration will have same effect on each column, which is unable to distinguish players. So we can configure the fill type property through sequence parameters:

Use sequences to represent different Fill Color properties:

Now, A7’s plotting result is as follows:

In this way, we can distinguish players even with a monochrome printer.

Actually, we can also choose different colors for different fill types, instead of using the default black-and-white type:

Now, the plotting effect is like this:

By configuring different fill types, we can create richer visualization for the chart element. Note that we need to configure the fill type for each chart.