The series of articles on esProc charts discussed how to use chart elements in plotting algorithms to make charts. Besides writing plotting algorithms, we can use a number of built-in ready-made graphs to quickly plot common styles of charts.
There are four types of ready-made graphs (Column graph, Line graph, Pie graph, Two-axis graph) available for use in writing plotting algorithms in esProc cells, in addition to various elements like axes, graphs, and so on.
Now we’ll see how to use these graphing short cuts and their plotting effects.
1. Column graph
Column graph is among the most commonly used kind of graphs. Use Column graph in esProc to plot a column chart. Take the following plotting algorithm as an example:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from FRUITS”) |
| 3 | =A1.plot(“GraphColumn”,”categories”:A2.(NAME),”values”:A2.(UNITPRICE)) |
| 4 | =A1.draw@p(400,250) |
We can see that the algorithm becomes much simpler with the ready-made column graph. It is not necessary to plot axes, individual graphs, legend, titles and other elements that are components of a chart one by one. A1 creates a canvas and A2 retrieves the plotting data:
A3 plots a column chart:
We only need to set data properties of Categories and Values to plot the chart. A4’s plotting result is like this:
Using ready-made graphs is convenient by setting fewer parameters. Yet they produce fixed plotting styles. Still we can adjust the plotting effect by modifying plotting parameters. Some of the plotting parameters are shared by all the ready-made graphs, such as title text, axis color, legend properties, etc.
First let’s look at the title text setting. Modify A3 into =A1.plot(“GraphColumn”, “categories”: A2.(NAME),”values”:A2.(UNITPRICE),”xTitle”:”Fruits”,”xTitleFont”:”Vivaldi”, “xTitleSize”:16,”xTitleColor”:-16764007,”yTitle”:”Unit Price”,”yTitleFont”:”Vivaldi”,”yTitleSize”:16, “yTitleColor”:-16737946,”yTitleAngle”:90) to change the properties of column graph:
Titles are added for both the horizontal axis and vertical axis beside data labels. Thus A4’s plotting result is:
Modify properties of x-axis labels of the column graph:
Font and color are changed and A4’s plotting result becomes:
The font properties of labels are similar to properties of titles, only with an extra Interval for displaying labels at certain interval.
The vertical axis of a column graph is a numeric axis, for which we can set font properties of labels as well as change value range, number of marks, and so on. Modify properties of y-axis labels:
By doing so A3 is containing code like this: =A1.plot(“GraphColumn”,”categories”:A2.(NAME), “values”: A2.(UNITPRICE),”xTitle”:”Fruits”,”xTitleFont”:”Vivaldi”,”xTitleSize”:16,”xTitleColor”:-16764007,”yTitle”:”Unit Price”,”yTitleFont”:”Vivaldi”,”yTitleSize”:16,”yTitleColor”:-16737946,”yTitleAngle”:90, “xLabelFont”:”Georgia”,”xLabelColor”:-16764007,”yLabelFont”:”Georgia”,”yLabelColor”:-16737946, “yEndValue”:5,”yMinMarks”:5). And A4’s plotting result is:
On the numeric y-axis, we can plot grid lines and the warn line. Grid lines are reference lines plotted according to tick marks. The warn line is plotted according to a specified warning value. Modify column graph properties as follows:
At this point A4’s plotting result is like this, on which we can see grid lines and the warn line:
Change the axis color by modifying A3’s plotting parameters:
This way the axis color will change accordingly. A4’s plotting result is:
Besides, we can modify Border properties to change the graph outline; or modify Graph title properties to plot a title on the top of the graph. Modify column graph properties through A3:
And we get the following plotting result:
Add data markers on the top of each column by modifying column graph’s Data marker properties:
Choose to display initial data values and data markers will be added to each column. Below is the plotting result:
With a ready-made graph, set Legend properties to plot a legend:
Then the plotting result is:
Modify A3’s plotting parameters to change canvas color, allow text overlapping or not and set other properties:
The modification involves setting Canvas color (of chart area), Back color (of the plane) and Legend border color (of legend outline), as well as changing Allow text overlapping to false, which means not plotting text if it may overlay the existing text, such as the Strawberry label on the horizontal axis in the above chart. At this point A4’s plotting result is:
We can set these plotting properties not only for column graphs, but also for all other ready-made graphs. Here we’ll omit the property setting for them.
Furthermore, we can use the column graph to plot a column chart with both category and series, for example a column chart showing gym scores:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE”) |
| 3 | =A1.plot(“GraphColumn”,”categories”:A2.(NAME+”,”+ EVENT),”values”:A2.(SCORE)) |
| 4 | =A1.draw@p(400,250) |
A2 retrieves plotting data:
A3 sets plotting properties for the column chart:
Like setting properties for an enumeration axis discussed in esProc Charts: Coordinate Axes, setting Categories data for a column chart with both category and series should include both category value and series value. Here we set NAME as the category and EVENT as the series. By default each category will be plotted as a cluster of columns of series. Below is A4’s plotting result:
Set Column type as Stack Column to convert the column chart easily to a two-dimensional stacked column chart:
And the plotting result is:
After converting to a two-dimensional chart, the 3D axes have become normal lines. By changing column type, we can use the column graph to plot a 3D stacked column chart, bar chart and many other charts.
2. Line graph
Using line graph, we can plot various charts like polyline charts, curve charts and radar charts. Below is the potting algorithm for plotting a polyline chart displaying gym scores:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from GYMSCORE”) |
| 3 | =A1.plot(“GraphLine”,”categories”:A2.(NAME+”,”+EVENT), “values”:A2.(SCORE),”yStartValue”:12) |
| 4 | =A1.draw@p(400,250) |
A3 sets properties of the line graph:
Using the category data and series data in the previous section, A4 gets the following plotting result:
We control the line style or the dots on a polyline chart by setting line properties in A3:
Set both Draw dots and Shade as false and increase the Thick value. Now the plotting result is:
In this case dots aren’t plotted and shading effect isn’t displayed. And the polyline becomes thicker.
Change the line graph’s Type to Radar to plot a radar chart in polar coordinates:
Plotting result is:
Changing line graph type enables us to plot a 3D polyline chart or a curve fitting plot.
3. Pie graph
In esProc, pie graph can be used to plot various pie charts. Below is such a plotting algorithm:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from FRUITS”) |
| 3 | =A1.plot(“GraphPie”,”categories”:A2.(NAME),”values”: A2.(UNITPRICE),”legendLocation”:2) |
| 4 | =A1.draw@p(400,250) |
A3 plots a single-series pie chart. For multi-series pie chart plotting, data property setting is like that in a column chart/polyline chart with both category and series. This algorithm plots a legend on the right side. A4’s plotting result is:
Modify A3 to set Pie type as 3D pie for plotting a 3D pie chart. And check Cutted pie to explode the sector corresponding to the last data category:
Then the plotting result is:
4. Two-axis graph
We use two-axis graph to plot two-axis column-and-polyline charts or two-axis polyline charts. Below is the plotting algorithm for a two-axis column-and-polyline chart:
| A | |
| 1 | =canvas() |
| 2 | =demo.query(“select * from STATES where STATEID<6”) |
| 3 | =A2.new(ABBR,”Population”:Type,POPULATION/1000000:Value) |
| 4 | =A2.new(ABBR,”Area”:Type,AREA/1000:Value) |
| 5 | =A3|A4 |
| 6 | =A1.plot(“Graph2Axis”,”categories”:A5(ABBR+”,”+Type),”values”:A5(Value),”drawShade”:false,”lineThick”:2,”yTitle”:”Population(M);Area(K sq. mi)”,”yTitleAngle”:90,”axisRightColor”:-3355444) |
| 7 | =A1.draw@p(500,250) |
A5 concatenates records of population and those of area to generate the plotting data as follows:
Data property setting for a two-axis column-and-polyline chart is similar to that for a column chart with both category and series:
During setting the properties, we add titles for the two vertical axes with units designated. In this case a semicolon is used to separate them:
A6 removes shading effect for the polyline and increases the thick value. Now A7’s plotting result is:
The plotting data in the above algorithm includes only two series of data: population and area of each state. Plot the first data series as columns with the left vertical axis and plot the second data series as a polyline with the right vertical axis. If there are more than two series of data, we could plot them as columns and lines evenly.
Modify Type property of the two-axis graph to 2Axis2Line:
Then a two-axis polyline chart will be plotted, in which the first data series will be plotted as a polyline with the left vertical axis. The plotting result is:
