esProc Charts: The Basics

esProc provides flexible charting functionality. It allows users to define parameters and data used for charting with the graphics editor, and to draw various styles of charts as needed using drawing functions.

1. General charting procedure

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

The first thing to create an esProc chart is to define the canvas, like A1’s code =canvas(). With esProc, you define data and parameters for charting and draw the chart on a specified canvas. Usually one canvas object is used to draw one chart. 

A2 retrieves the table sequence containing the data for charting: 

The various styles of charts drawn on the canvas are all made up of the simplest geometric units, generally called as the chart elements. A chart element can be used to draw figures with the same features, and can make the charting simpler. You can draw common styles of charts through chart elements plotting 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 called NumericAxis; the horizontal axis element that A4 plots is EnumAxis; and A5 plots a chart element called Column. Together they construct a column chart. And you can see that different chart elements are plotted with different parameters.

After the chart elements are defined, you 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 chart format, are specified. It sets the height to 450 pixel and the width to 350 pixel and uses @p option to set the chart format as png. When using G.draw() function, without any options, to plot a chart on the canvas G, the chart is by default outputted as svg vector image format. Besides @p option, you can use @j to output jpg images and @g to output gif images.

esProc provides a set of code to draw the whole chart. The code is referred to as the plotting algorithm, the execution of which will produce the chart through a painter.

Let’s see the effect of using this plotting algorithm. After the above computation is completed, click in cell A8 where chart plotting code is held the Draw graphics button at the right corner in the value view section to start drawing:

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

With this plotting algorithm, the chart will be displayed on the Chart preview window that pops up when drawing is completed. You can resize it by dragging. The following is the finished chart:

There are Save as and Copy function in the above Chart preview window. You can save the chart as a local image file, or copy and paste it for use in other tools (such as Word, Graphics).

Thus you’ve learned from the above that three steps are needed for drawing an esProc chart:

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.

2. Editing chart elements visually

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

Right-click on the cell where you want to plot the chart element and choose Graphics editor from the menu to edit the chart plotting code (or you can click Edit>Graphics editor on the menu bar):

You can do the editing on the pop-up visual editor interface:

At the window’s top left, 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, you can configure the properties of the selected chart element:

You can set properties of the Numeric Axis on this list. The properties and usages of Numeric Axis will be detailed in esProc Charts: The Axis Element. The other chart elements will be discussed by a series of articles like esPoc Charts: The Line Element and esProc Charts: The Text Element.

After the properties of the desired chart element are configured, a string expression for plotting, =G.plot(…), will be automatically generated. You can modify the properties later through Graphics editor in the cell, yet you cannot change the selected canvas and the chart style. If you do need to change the canvas or the chart style, you can modify the expression, or delete it and replot the chart element.

3. Basic properties of the chart elements

All chart elements have some common properties, such as font color, fill color, line style and font. Let’s get ourselves familiar with them. To highlight the chart area, in the examples followed, the jpg image with white background, instead of the png image with transparent background, will be used.

3.1 Properties of lines

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

To set the line color, click on the color square on the Value column. The following Swatches will pop up:

You can select the desired color from the Swatches, or set the color using HSB or RGB model on HSB or RGB tab. Besides, you can set an integer value for the desired color with an expression on Exp. column.

To set the 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. Also they can be configured using line styling code in Exp. column.

The line weight is defined directly with pixel value.

For example, the plotting algorithm of the above column chart can be modified 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:

A3 is added to plot the white background. As some of the vertical axis line properties have changed, A4’s code is modified accordingly. With these modifications, the drawing effect is as follows:

You can see that the vertical axis becomes different.

3.2 Properties of fill color

The fill color is the most 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 background color chart element for the above A3, as shown below:

In the above figure, the background is adjusted into light blue and Gradient color setting is removed. A3’s code is thus changed too. The drawing effect is as follows:

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

The drawing result is as follows:

3.3 Properties of text

The text is also an indispensable part of a chart. For text of different positions, the font, font type, font color and other properties can be set separately.

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:

You can edit the text style property in the Set font style window:

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

For example, you may 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:

The chart then becomes this:

You can clearly see that the style of label text on the horizontal axis has changed.