Fun with Zones - Visualizations

This blog is for giving an overview of the visualizations features of OUAF zones. Visualizations help in providing a visual representation of any numeric data with minimal configurations. The framework provides a lot of good features for the same.

For visualization some numeric data is needed that can be plotted. So the data on y axis should be numeric and data on x axis is the categorization of the data.

To show a simple example, I have written a query that fetches the balance on all service agreements for an account, with the service agreement type description. So my x axis is the SA Type Description and my Y axis is the SA balance amount.

Below is the zone configuration for your reference.

Visualizations are enabled only for Info zones (‘Info Data Explorer - Multiple SQLs’ and ‘Info Data Explorer – Single SQL’). They are not present for query zones.

Zone configuration

Have used ‘Info Data Explorer – Single SQL’ (F1-DE-SINGLE) in the example below 

Create a new zone of either ‘F1-DE-SINGLE’ or ‘F1-DE’ type.

Zone - SQL configuration

Below is the sql configuration used for the zone for your reference.

Have defined three output columns.

SQL Statement
select sa_id,  (select descr from ci_sa_type_l where sa_type_cd || cis_division =  (select sa_type_cd || cis_division from ci_sa where sa_id = a.sa_id) and rownum = 1) sa_type,  sum(tot_amt) from ci_ft a  where sa_id in (select sa_id from ci_sa where acct_id = :F1)  group by sa_id
Description	Parameter Value
Column 1	source=SQLCOL sqlcol=1
Column 2	source=SQLCOL sqlcol=2 label=SA_TYPE_CD
Column 3	source=SQLCOL sqlcol=3 label=BALANCE_LBL

Zone – Filter Configuration

Have defined one filter that picks the account Id from the global context.

Description	Parameter Value
Filter 1	label=ACCT_ID name=ACCT_ID datasource=G

Zone – Visualization Configuration

Next in General Parameters, have configured the visualizations. This is just an overview. Have covered each visualization configuration in more detail below.

As seen below the visualization options are configured. One of the Visualization Option has to be mapped to optiontype=GRID.

Description	Parameter Value
Visualization Option 1	optiontype=CHART oraChart="type:pie;" oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"
Visualization Option 2	optiontype=CHART oraChart="type:bar; showLegend:false;" oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"
Visualization Option 3	optiontype=GRID
Initial Display Columns	C1 C2 C3

Attached the zone to a portal for viewing it.

Next to run the zone. First navigate to an account. In this case I have opened the account ‘2821180623’ first on the screen.

As seen in the context on the dashboard, the account is loaded.

Next open the portal where the zone is attached.

I have opened the zone in grid view first, to show how the output data looks like. As seen it shows the balance if each SA of the account with the SA type description.

Visualization 1 – Pie Chart

Now trying the first visualization for displaying a pie chart using above data.

Description	Parameter Value
Visualization Option 1	optiontype=CHART oraChart="type:pie;" oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"

As seen below I have clicked on the pie symbol on the top right of the zone. As seen below the data gets displayed in pie chart format. The framework assigns colors automatically. But there are options available to configure the color also.

When you hover your mouse on the pie chart, you can see the hover text getting visible. For this chart I have not configured any hovertext, it is the default hover text.

Below are the details of each parameter in the configuration for your reference. This is just an overview to understand the basic configuration. Refer the application help for all configuration options.

Parameter	Example	Description
optiontype	optiontype=CHART	This is the type of visualization GRID or CHART. MAP is also an option and is used with UI map.
oraChart	oraChart="type:pie;"	This is set to pie for Pie Graph
xaxis	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"	This specifies which column on output is the x axis. We have used C2 (SA Type Description)
xaxisFormat	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"	Format of x axis display
labelPath	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"	The label to use for x Axis. As seen above we have used the SA type description
amount	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3;"	This is used to specify the Y axis. The column specified should have a numeric quantity. As seen this field is set to C3 (SA Balance)

Visualization 2 – Bar Chart

Now moving to the the second visualization for bar chart. Below is the configuration that was done.

Description	Parameter Value
Visualization Option 2	optiontype=CHART oraChart="type:bar; showLegend:false;" oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"

Have clicked on the bar chart symbol on top right on zone, to load the zone using second visualization. Have hovered the mouse on the second bar. As seen the hover text is visible. This hovertext is a custom one and is configured. Have covered the configuration details below.

Parameter	Example	Description
optiontype	optiontype=CHART	This is the type of visualization GRID or CHART
oraChart	oraChart="type:bar;"	This is set to bar for Bar Graph
xaxis	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"	This specifies which column on output is the x axis. We have used C2 (SA Type Description)
xaxisFormat	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"	Format of x axis display
labelPath	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"	The label to use for x Axis. As seen above we have used the SA type description
amount	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"	This is used to specify the Y axis. The column specified should have a numeric quantity. As seen this field is set to C3 (SA Balance)
hoverText	oraChartSeries1="xaxis:C2; xaxisFormat:string; labelPath:C2; amount:C3; hoverText:$axis$newline$amount;"	This is used to control the hover text that is displayed when you hover the mouse over the chart. As seen the hover text configured is composed of three fields: $axis – Name of x axis field $newline – Next Line $amount – Value of Y axis e.g. Gas Residential 260.59

This covers both the visualizations. Thus as seen, you can use visualizations to quickly present any numeric data in a visual format, without doing any complex coding. Try it out yourself also. Try out the different visualization configuration options documented on the application help reference to get a better understanding of the options available with the framework.

Planning to cover some more advanced techniques to use zones in upcoming blogs.