Adlib - Axiell



Creating Adlib output formats with statistical data and graphs

[pic]

[pic]

Axiell ALM Netherlands B.V.

Copyright © 2016 Axiell ALM Netherlands B.V.® All rights reserved. Adlib® is a product of Axiell ALM Netherlands B.V.®

The information in this document is subject to change without notice and should not be construed as a commitment by Axiell ALM Netherlands B.V. Axiell assumes no responsibility for any errors that may appear in this document. The software described in this document is furnished under a licence and may be used or copied only in accordance with the terms of such a licence. While making every effort to ensure the accuracy of this document, products are continually being improved.

As a result of continuous improvements, later versions of the products may vary from those described here. Under no circumstances may this document be regarded as a part of any contractual obligation to supply software, or as a definitive product description.

Contents

1. Introduction 5

2. Programming the adapl 7

3. Building the XSLT stylesheet 9

4. Recommended colours for pie charts 16

5. Setting up the output format 18

1 Introduction

As of yet, Adlib has no standard output formats providing overviews in the shape of numerical tables or graphs, because typically such data and its presentation is very specific to a customer’s needs. However, you can create such overviews yourself using ADAPL and XSLT, further requiring some knowledge of HTML.

Basically, it comes down to the following:

• Program an adapl as an output format which retrieves record data and calculates any desired numerical totals, but do not include any print statements. Instead, store all data which needs to be output in (occurrences of) temporary tags (two-letter variables which you do not declare in the adapl): this data may just pertain to numerical data or may also include label texts for your tables or graphs. You can store anything in temporary tags. Together with the other record data of the currently processed record, these temporary tags will end up in the Adlib XML being fed into the XSLT stylesheet.

• Build an XSLT stylesheet which converts the Adlib XML to HTML. The temporary tags can be addressed by their tag name whilst the other fields must be addressed by their English field name. Construct the HTML so that it builds the desired tables and graphs. Whereas tables can be produced by HTML alone, graphs are typically generated by JavaScript embedded in the HTML. Luckily you don’t have to write that JavaScript yourself: there are free web services or paid JavaScript libraries for your own web server available, which offer easy to include code and setup possiblities.

• Define a single output job for the appropriate database, which includes both the adapl and the XSLT stylesheet.

When you print selected records to your combined output format, you cannot only send it to the printer, but you can also store it as an HTML file, allowing you to open it in your favorite browser and (depending on the JavaScript code) probably enjoy some dynamic mouse-over effects in your charts. The print preview in Adlib also displays such effects.

2 Programming the adapl

1 Use FACS to collect data from other records

An output format, in this case the combination of an adapl and XSLT stylesheet, is executed per marked record in your selection so the only data directly available to you in the form of Adlib tags is the data from the currently processed record. However, you can still use FACS to read a bunch of other records to collect data. For example, you could instruct the user to select a single location record before applying your output format which then collects data from all underlying locations, using FACS: to find the total number of stored packages perhaps, maybe even split up by package type; or maybe it calculates the currently occupied and free storage space if your package data contains such dimensions.

2 How to use temporary tags

At first you can use normal, declared variables to store the data that you collect, leaving the copying of the contents from these variables to temporary tags to the end of the ADAPL code. But you can also use the temporary tags themselves as generic variables in which you can store anything.

Temporary tags must not be declared in the adapl. Typically you would use tags which do not already occur in your database, so that all record data is available in the adapl. Temporary tags consist of two letters (of which the second can also be a digit), so y1, Za and WW for example, would all be valid tags. You can even use occurrences, so you can assign any value to y1[1] or Za[4], for example. Using occurrences is a good idea if you want to export a lot of data via the temporary tags: after all, the number of unused two-letter combinations which you can use as temporary tags, is limited.

One other thing to take into account when you retrieve numerical or integer data from tags (either the temporary tags or the tags from the currently processed record) is that the extracted data is always formatted as text, not as a number, even if you put a number into it! So when you start calculating sums and totals of numericals and integers from tags, you must first convert each number to the required integer or numerical. You can do this with the ADAPL functions VAL and INT. So val(y1[3]) converts any value from tag y1 occurrence 3 into a numerical, while int(val(y1[3])) converts that same value to a numerical first and then to an integer. When adding up such converted values to store them in a temporary tag again, also be sure to put brackets around the sum to instruct ADAPL to calculate the sum before storing the result as text in the temporary tag again. For example: y1[3] = (val(y1[1]) + val(y1[2])).

3 Calculating graph-ready numerical data

Some JavaScript code for pie charts, like that from Google Charts, allows you to feed sub-totals into the chart settings without providing the total or the percentages they represent, but other JavaScript code, like that from the Kendo UI by Telerik, requires you to provide the percentages themselves. To calculate percentages you can make good use of the ADAPL ROUND function, allowing you to round off the result of a division to a specific number of decimals. For example:

y1[7] = round(((capacity - occupied)/capacity)*100,0)

This equation calculates a certain remaining capacity as a percentage of the total capacity, with zero decimals behind the comma, and stores the result (as text) in temporary tag y1[7]. In this example, capacity and occupied are two declared numerical variables.

3 Building the XSLT stylesheet

Chapter 2 in Programming XSLT stylesheets for Adlib.doc describes the basics of creating HTML via an XSLT stylesheet. There are only two extra factors to take into account here: the temporary tags and the JavaScript to include.

• The temporary tags can be addressed by their two-letter tag name while fields from the processed record are available through their English field name.

• From the free Google Charts it’s easy to obtain the code you need to implement your own graph, a pie chart for example. The site also provides ample documentation about how to create an HTML page with the included JavaScript and which settings can be altered to adjust the graph to your liking. The code requires internet access during printing to reach the Google Charts web service.

With Kendo UI on the other hand you need licensed JavaScript libraries and css files which you can put on a web server of your own, so that output formats can always access that code base regardless of their point of execution.

The first XSLT code example below shows how to integrate the HTML and the Google JavaScript in an XSLT stylesheet designated as an Adlib output format. The Kendo UI implementation on the other hand, differs from the Google implementation in that the head section in the HTML must only contain the URLs to the css and js files, while the script code is contained in a div element with a unique id (see the second example).

We can observe a couple of things:

• The HTML and JavaScript can just be inserted in between xsl tags and in turn, xsl tags can be inserted in between JavaScript or HTML. This can be seen in the JavaScript data variable declaration for example. The Description/Value list contains the list of label texts and numerical values (not percentages in this case) of which the pie chart must be composed. Here we chose to use fixed label texts while the numerical values will be provided by temporary Adlib tags which are retrieved with a simple value-of xsl statement. Note that we also could have chosen to retrieve the label texts from temporary tags.

var data = google.visualization.arrayToDataTable([

['Description', 'Value'],

['Occupied', ],

['Remaining', ]

]);

• This example includes two different definitions for a pie chart. Each has its own id (piechart1 and piechart2 in this case) and the second definition starts right after the first chart.draw(data, options);. Note that in the second definition, the data, options and chart variables are now initialized without the declarative var in front of it. This way you can specify multiple graphs.

• In the body of the HTML, the pie charts are actually instantiated by the and calls.

• The XSLT record template also contains a simple table which elaborates on the data summarized in the first pie chart.

Example 1 (Google Charts compliant):

Statistics

.text

{

font-family: Verdana;

font-size: x-small;

}

.boldtext

{

font-family: Verdana;

font-size: x-small;

font-weight: bold;

}

.header

{

font-family: Verdana;

font-size: large;

}

.table

{

border: solid 1px black;

border-collapse: collapse;

}

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Description', 'Value'],

['Occupied', ],

['Remaining', ]

]);

var options = {

title: 'Site occupation',

fontSize: 12,

fontName: '"Verdana"',

is3D: true

};

var chart = new google.visualization.PieChart(document.getElementById('piechart1'));

chart.draw(data, options);

data = google.visualization.arrayToDataTable([

['Description', 'Value'],

['BOXES', 8169],

['CANS', 7860],

['TUBES', 1040],

['IMAGEBOXES', 57]

]);

options = {

title: 'Site occupation per package type',

fontSize: 12,

fontName: '"Verdana"',

is3D: true

};

chart = new google.visualization.PieChart(document.getElementById('piechart2'));

chart.draw(data, options);

}

Statistics about , compiled on

Surface

Number of rooms

Total capacity

Occupied space

Remaining space

Example 2 (Kendo UI compliant):

Statistiques

.text

{

font-family: Verdana;

font-size: x-small;

}

.boldtext

{

font-family: Verdana;

font-size: x-small;

font-weight: bold;

}

.header

{

font-family: Verdana;

font-size: large;

}

.table

{

border: solid 1px black;

border-collapse: collapse;

}

Statistics about

, compiled on date

function createChart() {

$("#chart").kendoChart({

title: {

position: "top",

text: "Site occupation"

},

legend: {

visible: false

},

chartArea: {

background: ""

},

seriesDefaults: {

labels: {

visible: true,

background: "transparent",

template: "#= category #: \n #= value#%"

}

},

series: [{

type: "pie",

startAngle: 90,

data: [{

category: "Occupied space",

value: ,

color: "#CC6F4A"

},{

category: "Remaining space",

value: ,

color: "#8FC051"

}]

}],

tooltip: {

visible: false,

format: "{0}%"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

Resulting in:

[pic]

4 Recommended colours for pie charts

Once you start creating graphs, you may find that choosing the right colours for the different pie slices or bars actually isn’t very easy. Some tips (based in part on Practical Rules for Using Color in Charts, by Stephen Few) might help you in this regard:

• If you know in advance how many slices your pie chart will contain and also what the meaning of the different slices is, then consider choosing a colour which symbolizes that meaning somehow.

• If you don’t know in advance what the meaning of the different slices will be, then preferrably use contrasting colours next to each other, as in the rows below for example, displayed from left to right. The paler the contrasting colours are, the more pleasant they become to the eye, but for emphasis you might sometimes choose more saturated colours. Below sets of colours might be a good starting point.

[pic]

Hex colour values:

|1st row |2nd row |3rd row |

|Black: #000000 |Grey: #737373 |Light grey: #D4D4D4 |

|Red: #E8312A |Light red: #EE5952 |Pale grey: #F5F5F5 |

|Green: #3F8936 |Light green: #8FC051 |White: #FFFFFF |

|Blue: #385894 |Light blue: #7197B8 | |

|Orange: #F27B18 |Light orange: #FCA345 | |

|Purple: #682F7F |Light purple: #A06595 | |

|Brown: #9D211F |Light brown: #CC6F4A | |

|Lavender: #B03A81 |Light lavender: #D87D9B | |

• Realize that colours can be used to emphasize things and make them look bigger than they really are. The more saturated or brighter a colour is, like bright red, the more attention it draws. This can be used for good or bad. The second and third row of colours are therefore better suited for pie charts in which all slices represent cases which have similar weight or importance, even though their percentages may vary greatly.

• If possible, arrange the slices clockwise (starting at twelve o’clock) from large to small. This will give the viewer the quickest impression of which elements are the most important, in declining order.

5 Setting up the output format

Set up your output format for the relevant database, like you would with any other output format, with the exception that you specify both the adapl and the XSLT stylesheet for the single output format.

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download