Graphing How To's

From Pengower
Jump to: navigation, search

Pengower Graphing Module Introduction

The Pengower graphing module allows the developer to create a number of charts to be used for reporting, statistics, etc. This module is called from the Pengower script and the output will vary depending on the parameters passed into the module. Let's have a look at the several charting examples that can be deployed within this module.

How to create a Line Chart

A line chart consists in two axis, X and Y, that represents the two variables whereby the series of points are displayed. The graph can have as many series as needed, in the following example a simple line chart will be displayed:


// Set graph title 
Set title = "Revenue by year and sector"
// Set graph data for two different series of values: Construction and Services
Set dataStr = "type,date,answer#Services,2006,70#Services,2008,72#Services,2010,100#Services,2012,85#Construction,2006,20#Construction,2008,40#Construction,2010,60#Construction,2012,80"
// Build axis XY
Set xAxisStr = "2006,2008,2010,2012"
Set yIncrement = 1
Set yLoops = 100
Set yAxisStr = "0"
For i = 1 To yLoops
   Set thisYVal = i * yIncrement
   Set yAxisStr = yAxisStr + "," + thisYVal
Next
// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "line"
// Set file name and path
Set linkGuid = "Sector Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add xAxisStr To args
Add yAxisStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add linkGuid To args
Add dirName To args

// Call the module
Set url = Do Run Module Params Name = "Graph_Charting_3D", Args = args
Set outPath = urlPath + url + ".png"
Set html = "<img src=" + DBLQTE + outPath + DBLQTE + "/>"
Output = html
Return_Ok

Let's define, briefly, the set of parameters used to build this chart:
"title": This is the title of the chart and will appear on top of it.
"dataStr": A string containing the set of data to be displayed. In this example the format used is: series, xValue, yValue.
"xAxisStr": The set of values to be displayed on the X-axis.
"yAxisStr": The set of values to be displayed on the Y-axis.
"graphWidth": The width of the chart.
"graphHeight": The height of the chart.
"graphType": The type of graph we want to build. Its value in this case is "line".
"linkGuid": The name of the generated file.
"dirName": The directory where the generated file will be stored. Please note that the chart will be generated on a PNG file. The module will NOT create a new directory, you must ensure the directory exists or the module will fail

The call to the module will be common to any kind of charts generated. Its output will be the name of the file generated, if everything ran ok. The following image shows the chart generated with the above script:

Line Chart


How to create a 3D Line Chart

The procedure to create a 3D line chart can be as follows:


// Set graph title
Set title = "Revenue by year and sector"
// Set graph data for two different series of values: Construction and Services
Set dataStr = "type,date,answer#Services,2006,70#Services,2008,72#Services,2010,100#Services,2012,85#Construction,2006,20#Construction,2008,40#Construction,2010,60#Construction,2012,80"
// Build axis XY
Set xAxisStr = "2006,2008,2010,2012"
Set yIncrement = 1
Set yLoops = 100
Set yAxisStr = "0"
For i = 1 To yLoops
   Set thisYVal = i * yIncrement
   Set yAxisStr = yAxisStr + "," + thisYVal
Next
// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "line3D"
// Set file name and path
Set linkGuid = "Sector Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add xAxisStr To args
Add yAxisStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add linkGuid To args
Add dirName To args

Please refer to the Line Chart script for more information about the final module call as well as its output. This chart, however have a couple more of interesting parameters:
"graphRotation": Sets the rotation of the chart. "0" means no rotation, "90" means that the chart will rotate in a right angle fashion. The value can also be "180" and "270", of course "360" will have the same effect as "0".
"perspective": A string containing a numerical value that will set the chart perspective.
The following chart shows the output obtained after executing the above script and calling the module:

3D Line Chart


How to create a Pie Chart

Within the Pengower graphing module, the creation of pie charts is also possible. Please note that this type of chart does not allow neither XY-axis nor custom colours (for more information regarding the use of custom colours please read the paragraph related to 3D Bars). The following script will build a pie chart depicting the area percentage of the biggest countries in the world:


// Set graph title
Set title = "Area percentage by country"
// Set graph data for two different series of values: Construction and Services
Set dataStr = "xvalue,yvalue#Russia,12#Canada,7#USA,7#China,7#Brazil,6#Australia,5#India,2#Others,55"

// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "pie"
// Set file name and path
Set linkGuid = "Country Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add linkGuid To args
Add dirName To args

The following chart is the result of the previous script:

Pie Chart


How to create a Bar Chart

The bar chart is one of the most common types of chart and can be also done on the Pengower script, the example script:


// Set graph title
Set title = "Revenue by sector"
// Set graph data for two different series of values: Construction and Services
Set dataStr = "xvalue,yvalue#Services,50#Construction,65#Factories,90"
// Build axis XY
Set xAxisStr = "Services,Construction,Factories"
Set yIncrement = 1
Set yLoops = 100
Set yAxisStr = "0"
For i = 1 To yLoops
   Set thisYVal = i * yIncrement
   Set yAxisStr = yAxisStr + "," + thisYVal
Next
// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "bar"
// Set file name and path
Set linkGuid = "Sector Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add xAxisStr To args
Add yAxisStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add linkGuid To args
Add dirName To args


In this type of chart the data string is defined according to the X and Y values, which defines the values for the X and Y axis respectively. After the module call, the result of the previous script will look like the following image:

Bar Chart

How to create a 3D Bar Chart

The previous bar chart can also be depicted as a 3D bar chart. In this case, we are also going to introduce the "colours" parameter, which is a string that represents the set of colours, in RGB format, that will be used for every series. The first colour in the string will be used for the first series, the second colour in the string will be used for the second series, and so on. Let's illustrate this with an example (please note that this attribute is not available on "pie" and "line" charts):


// Set graph title
Set title = "Revenue by sector"
// Set graph data for two different series of values: Construction and Services
Set dataStr = "xvalue,yvalue#Services,50#Construction,65#Factories,90"
// Build axis XY
Set xAxisStr = "Services,Construction,Factories"
Set yIncrement = 1
Set yLoops = 100
Set yAxisStr = "0"
For i = 1 To yLoops
   Set thisYVal = i * yIncrement
   Set yAxisStr = yAxisStr + "," + thisYVal
Next
// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "bar3D"
// Define the set of colours
Set colours = "0x01A9DB,0xDF0174,0x0404B4,0x8904B1"
// Set file name and path
Set linkGuid = "Sector Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add xAxisStr To args
Add yAxisStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add colours To args
Add linkGuid To args
Add dirName To args

The following chart is the resulting chart after the execution of the previous script:

3D Bar Chart

How to create a Gantt Chart

Gantt charts are also possible within the Pengower script. This type of chart is used to depict a set of tasks than run along a timeline, so that a general idea of when the tasks are started and finished can be gained. In order to achieve so, the data string needs to contain a four variable structure: name of the series, name of the task, start date and also end date.
"deadline": The parameter "deadline" is used to draw a temporal line, representing a date whereby the tasks should be finished. The following script is self-explained on how the Gantt diagram can be drawn and it also uses this "deadline" parameter:


// Set graph title
Set title = "Project planning"
// Set graph data for our different tasks
Set dataStr = "series,task,startdate,enddate#Estimated,Specification,16-08-2012,31-08-2012#Estimated,Requirements,31-08-2012,15-09-2012#Estimated,Implementation,15-09-2012,30-09- 2012#Estimated,Testing,30-09-2012,15-10-2012#"
Set dataStr = dataStr + "Actual,Specification,16-08-2012,05-09-2012#Actual,Requirements,05-09-2012,22-09-2012#Actual,Implementation,22-09-2012,10-10-2012#Actual,Testing,10-10-2012,23-10-2012"
// Set graph dimension
Set graphWidth = "1100"
Set graphHeight = "800"
// Set the type of graph
Set graphType = "gantt"
// Set project deadline
Set deadline = "15-10-2012"
// Define set of colours
Set colours = "0x900000,0x006666"
// Set file name and path
Set linkGuid = "Project Graph Report"
Set dirName = "D:\Uploads\MyAttachments\graphs\"

// Build arguments array
Set args = {}
Add title To args
Add dataStr To args
Add graphWidth To args
Add graphHeight To args
Add graphType To args
Add deadline To args
Add colours To args
Add linkGuid To args
Add dirName To args

Please note that the date format follows the following fashion: [day]-[month]-[year] Being all numerical values. The following chart shows the Gantt diagram drawn by the previous script: