Discovering dashboards with the Low Code PROIV platform

NGA Human Resources - Confidential.
PROIV Application Dashboard
1
Using PROIV Charts

About PROIV
2
PROIV is the low-code platform that gets you from idea to reality faster than you ever
imagined. From accelerating Digital Transformation in the enterprise to slashing time to
market for Software Developers – PROIV unleashes the potential of your business and
removes the IT development bottleneck.
Applications built with the PROIV low code Platform give the freedom to make best of breed
technology choices, reuse legacy applications and deploy to a wide range of platforms including
Cloud.
As your application grows you get the benefits of hyper-scalability and sophisticated
performance tools to help you achieve amazing levels of performance.
All of this plus the added benefits of a modern low-code development environment.

Creating Your Dashboard With PROIV Charts
3
A chart, also called a graph, is a graphical representation of data in which the data is represented
by symbols such as bars, lines, or slices in a pie chart. The data in a chart is represented
graphically since the human eye are generally able to infer meaning from pictures rather than from
text. Text is used along with charts only to annotate the data.
Data in a chart can appear in any manner of formats and the 3 most common types of charts are
the bar charts, line charts and pie charts.

PROIV Graphical Charts
4
PROIV has come a long way since the
introduction of Open Client. PROIV Open
Client is an application deployment method
which allows your PROIV MFC application to
be rendered in a web browser. With this
capability, it has become possible to perform
tasks that an MFC client cannot do. One of
these task is to be able to render graphical
charts on the web browser purely using
PROIV as the only development tool you will
need.

Developing Charts for Key Performance Indicator
(KPI)
5
By simple definition, KPI is a type of performance measurement to evaluate an organizations’
success. The contents of a KPI may differ per organization based on their needs but all KPIs define
a set of value against which to measure. Example of these could be net revenues, unemployment
rates, demographics just to name a few.

Developing Charts for Key Performance Indicator
(KPI)
6
What we will be presenting in the next sections are KPI measurements in graphical form and how
to create them:
• Average Billable Time
• Year-End Time Analysis
• Monthly Time Analysis
• Invoiced Revenue

Preparing Your Data Inputs
7
KPI is all about performance measurements and relies heavily on data. In order to build a graphical
representation of key data points, one must simplify complex data sets to provide users with at-a-
glance awareness of current performance.
To prepare for our KPI dashboard, the key data inputs we need are the hours recorded by
employees against projects they have worked on in a given month for a given year. The hours are
entered by employees either on a daily or weekly basis. These time entries are then processed to
render the KPI dashboard.

Preparing Your Data Inputs
8
You may want to start building list box screens such as the monthly times recorded by each
employee in a given year where billable, non-billable, vacation and holiday hours and other time
inputs can be used to get the percentage billable.
Another way of presenting data in list boxes would be the times recorded by each employee
cumulatively for a fiscal year and supported by another list box showing the months with all the
cumulative hours for all employees. The amounts on each column for each list box should support
the totals if you add them up.

Your Graphical Dashboards
9
If you will be presenting more than one graph in your dashboard, it is advisable that you create a
tabbed function in order to display a single graph in one screen where you can then switch screens
by tabbing to the next one. This way it does not clutter your screen with all the different graphs you
are trying to present.
As soon as you have your tabbed function start building your graphs.

Chart 1: Average Billable Time
(Bar Chart)
10
Know what type of chart you will be building - a bar, a line, a pie, or a meter. Each type of
charts have multiple variations. For the Average Billable Time, we will be using a simple bar
chart.
Our key qualifier here is the fiscal year. Once you select a year and enter, it should read the source
files and interpret the data it finds into a graphical format.
Your main cycle for this graph should have the following objects defined:
• A mandatory entry editbox field to enter the year
• Optionally, a Listbox object to display the data in tabular form
• The chart type object (in this case a Bar chart)
• You should then have an outer Selection cycle that both the listbox and chart type object would
refer to in order to pull the data from. The selection cycle (GetBillHours) type will be File as we
will be reading the timesheet file. See the next slide for the Dynamic and Event Views of the
function.

Chart 1: Average Billable Time
(Bar Chart)
11

Chart 1: Chart Properties
12
Now let's look at the logics. The image below, which is on entry to your first tab function, PROIV
allows you to make use of pre-defined chart properties by assigning valid values to it.

Chart 1: Chart Properties
13
Alternatively, you can see and set these properties by opening the chart cycle as shown and assign
values. For a list of the chart properties and their definitions, please see 'chart properties' in your
PROIV help file.
The chart properties you find under the
Appearance Tab of the chart object
displays the current value, of which you
can override. In some instances you will
see if this property can be used on an
MFC client if a ‘Y’ appears under the
Window column.

Chart 1: Your Cycles
14
Looking at the Dynamics Tab, we set our employees and percentage billable as the X and Y-axis
respectively on a graph. We intend to show on the graph how much billable an employee was for
the whole year in terms of percentage.
To get our value for #YE_PCT_BILL, we need to call the selection cycle "GetBillHours" and read
the timesheet file for every employee for the given year. The formula for Percentage Billable is
(Billable Time / (Total Time - Holiday + Absences)) x 100.

Chart 1: Your Bar Chart Display
15
We have set our bar chart as the only visible object but during the function development, we did
include a Listbox. Optionally, you can display a listbox to go along with your chart to support the
graph figures. In this case we simply made the listbox 'not visible' and we have arranged for the bar
chart to occupy the whole screen.

Chart 1: Your Bar Chart Display
16
In order to display the listbox to show tabular data, do the following:
• set the Listbox object to 'Visible'
• set different start Columns for both Listbox and the Bar Chart so they do not overlap
The Y-axis values that
display the percentage
billable is auto-generated
by PROIV based on the
maximum retrieved
value. The legend ‘Pct
Billable’ is taken from the
heading which is the
same as what you would
have on the listbox.
The bar chart colors are
set to use default colors
not unless you change
them within the chart
properties.

Chart 2: Year-End Time Analysis
(Stacked Column)
17
Creating this chart will be the same principle as the first chart. The only difference with this
is using a different variation of the bar chart known as the Stacked Column.
The use of the stacked column in a bar chart enhances the total because they visually aggregate
all of the categories in a group. The downside is that it becomes harder to compare the sizes of the
individual categories compared to having them side by side in a regular bar chart.
The objective of the 2nd graph is to get the total time for each of the time categories reported,
regardless of which employee and which month these were incurred within a given year. The
categories are the following:
• Billable Time
• Pre-Sales Time
• Support Time
• Other Time

18
Your main cycle for this chart will be the same as the first chart created, with the only exception that
you will be using 'stackedColumn' as your Chart_barType property.
• The column fields are based on the 4 time categories we are after, where:
• YE_BILL_TIME is the Year End Billable Time
• YE_PRE_TIME is the Year End PreSales Time
• YE_SUPP_TIME is the Year End Support Time
• YE_OTH_TIME is the Year End Other Time
X-axis will be the Year as
selected from the screen and
your Y-axis as the aggregate
time for each of the category
represented.

Chart 2: Your Stacked Column Display
19
If you want to use a regular side-by-
side bar chart and not a stacked
column representation, simply remove
the logic where it assigns the
'stackedColumn' value to your
Chart_barType property.
Stacked Column

Chart 3: Monthly Time Analysis
(Stacked Bar)
20
This chart type may share the same process as how a stacked column is created, although
in PROIV this Chart_barType property would be called a ‘stackedBar’.
Stacked bar is a particularly effective way of presenting data when the different categories have
long titles that would be difficult to display in a vertical bar, or when there is a large number of
different categories and there is insufficient space to fit all the columns required for a vertical bar
chart across the page.
Monthly Time Analysis breaks down what we have aggregated in the second chart. We are to show
the total time spent on a monthly basis for each of the following categories:
• Billable Time
• Pre-Sales Time
• Support Time
• Other Time

21
Your main cycle for this chart will be the same as the second chart created, with the only exception
that you will be using 'stackedBar' as your Chart_barType property.
The column fields are based on the 4 time categories we are after, where:
• MYE_BILL_TIME is the Monthly Billable Time
• MYE_PRE_TIME is the Monthly Pre-Sales Time
• MYE_SUPP_TIME is the Monthly Support Time
• MYE_OTH_TIME is the Monthly Other Time
X-axis in this case will be represented by the time scale and your Y-axis represented by the months
in a year.

22
The selection cycle in this case is an array instead of a file read. We need the array of 12 to
represent each of the month in a year.
Collect your data by reading the timesheet file in a separate cycle read. For each record you read,
your logic should know to which array (month) to add that certain time category. When all records
are read and done, your array fields should hold the total time for each of the 4 categories.

Chart 3: Your Stacked Bar Display
23
Although you have defined your month as your X-axis and the time scales as your Y-axis in
your function, using the stackedBar variation flips the scales in order to orient your graph
horizontally.

Chart 4: Invoiced Revenue (Step Line)
24
This type of chart takes the simplicity down a level from a bar chart. A line chart or line
graph is a type of chart which displays information as a series of data points called
‘markers’ connected by straight line segments.
It is a basic type of chart common in many fields often used to visualize trend in data over intervals
of time – thus the line is often drawn chronologically.
Chart 4 will be an example of a line chart – we will be using a variation of the line chart called the
Step Line. The step line chart is similar to a regular line chart, but it does not use the shortest
distance to connect two data points. Instead this chart type uses vertical and horizontal lines to
connect the data points in a series forming a step-like progression – much like a stair.
The data points for our step line chart will be to show Invoice Revenue amounts on a monthly
basis. We will be plotting this on a graph to see the up and down trends of revenue month-to-
month.

25
As with any other charts we have created so far, our function contents would have the following:
• Main cycle
• To hold the mandatory year entry
• A display field to show the cumulative total
• Optionally, a listbox to show the data in tabular form
• The chart object which in this case will be a step line chart
• Selection cycle defined as an array of 12 for all the months in a year. Since we will be showing
monthly invoiced revenue, our X-axis will have all 12 months and our Y-axis as the revenue
amount (MTD_BILLED).

26
• A local update to read the INVOICE file where the logic should be able to determine to which
array bucket (month) a revenue has to fall in.

Chart 4: Your Step Line Chart Display
27
You will notice the trend of the data points compared month-to-month. Each month's invoiced
revenue can be summed up to a YTD value and displayed on top of the chart.

Chart 4: Line Chart Variations
28
Let's look at some of the line chart variations we can use using the same data points. All we
need to do is change the Chart_lineType value to a different value to represent data points
differently.
Radar Area Chart

29
Vertical Area Chart

30
Basic Line Chart

Running The Graphs
31
Play the 1 minute video below to see the KPI graphs in action

In Conclusion
32
We use charts to tell stories, evaluate alternatives, understand trends or find out if everything is
normal.
You might ask which chart is right for you. Transforming data into an effective visualization (for
any kind of chart or graph) is the first step towards making your data work for you.
With the data you have at hand, analyze what you can get out of it and understand what the
best method is to display your data. Remember that a fancy chart may not be the most effective
and efficient way to visualize and present the data.

Contact Us
33
To know more about PROIV, visit our page at https://proiv.com
Or you can contact us by email or phone at our offices around the world.
United Kingdom
+44(0)844 375 3505
proiv@ngahr.com
United States
+1 949 748 7306
proiv@ngahr.com

Discovering dashboards with the Low Code PROIV platform

Recommended

Recommended

More Related Content

Similar to Discovering dashboards with the Low Code PROIV platform

Similar to Discovering dashboards with the Low Code PROIV platform (20)

Recently uploaded

Recently uploaded (20)

Discovering dashboards with the Low Code PROIV platform