9/1/2019 Charts in Oracle Visual Builder - Data Structure and Performance Tips | Oracle Visual Builder Cloud Service

Builder Cloud Service Blog

Oracle Visual Builder Cloud Service Blog

 MENU

Oracle Visual Builder Cloud Service Blog

The Visual Builder Cloud Service Blog

Try Oracle Cloud Platform

For Free

July 15, 2019

Charts in Oracle Visual Builder - Data

Structure and Performance Tips
Shay Shmeltzer
DIRECTOR OF PRODUCT MANAGEMENT - ORACLE

This is a syndicated post, view the original post here

One of the key ways to make your application drive better user results is
to use charts. Chart makes it easier for users to turn raw data into useful
information. As they say "A picture is worth a thousands words". Oracle
Visual Builder's quick starts makes it very simple to create basic charts
leveraging the data visualization components of Oracle JET. But if you
require more complex charts and if you want to improve the performance
of your application, you might want to go beyond the quick-start.

This blog covers two topics:

Reducing network traffic - the "add data" quick-start creates

https://blogs.oracle.com/vbcs/charts-in-oracle-visual-builder-data-structure-and-performance-tips-v2 1/5
9/1/2019 Charts in Oracle Visual Builder - Data Structure and Performance Tips | Oracle Visual Builder Cloud Service Blog

separate variables for each chart, which results in separate DB

queries and separate sets of data. If you are sharing population

between charts - you can extend one of the queries and eliminate

another. In addition, if you need to further manipulate the returned

data to show a third type of chart - switch the ADP instead of SDP.

This way a single fetch can be used by multiple charts even if the
data structure is different.

Creating the needed data structure - different charts require

different structures of data, and your REST calls don't always return

the needed structure. You can use simple JavaScript methods to

massage the data a REST service provides into the format your

chart requires.

Here is what you'll learn in the video (time stamps will help you skip parts
you already know):
https://blogs.oracle.com/vbcs/charts-in-oracle-visual-builder-data-structure-and-performance-tips-v2 2/5
9/1/2019 Charts in Oracle Visual Builder - Data Structure and Performance Tips | Oracle Visual Builder Cloud Service Blog

0:00-1:15 Creating charts with the "add data" quick start

1:15-3:15 Merging two charts to work with a single REST call, and

using calculation on multiple columns in a chart

3:15-4:15 Explaining the data structure for a chart with more than

one series

4:15- 7:15 Switching from ServiceDataProvider (SDP) to an

ArrayDataProvider (ADP) - so the data will be available for further

manipulation

7:15-8:45 Defining a new type and a new ADP with the needed

structure for the new type of chart

8:45-11:00 Use a JavaScript method to transform the data structure.

11:00-End Bind a dual series chart to an ADP

Charts in Oracle Visual Builder - Tips

Resources
An example of the data structure for the second chart is in the Oracle JET
cookbook.
https://blogs.oracle.com/vbcs/charts-in-oracle-visual-builder-data-structure-and-performance-tips-v2 3/5
9/1/2019 Charts in Oracle Visual Builder - Data Structure and Performance Tips | Oracle Visual Builder Cloud Service Blog

Here is the JavaScript used to create this structure from the data
structure returned from the BO REST service. It creates two series
entries for each record returned from the BO - one for salary and the
other for the computed bonus.

PageModule.prototype.transform = function(result) {
1
var newID = 1;
2
if (result && result.length > 0) {
3
var items = [];
4
5
6 for (var i = 0; i < result.length; i++) {
7 items.push({
8 id: newID++,
9 group: result[i].name,
10 series: "Salary",
11 value: result[i].salary
12 });
13 items.push({
14 id: newID++,
15 group: result[i].name,
16 series: "Bonus",
17 value: result[i].bonus * result[i].salary
18 });
19
}
20
return items;
21
}
22
};

Be the first to comment

Comments ( 0 )

Recent Content
https://blogs.oracle.com/vbcs/charts-in-oracle-visual-builder-data-structure-and-performance-tips-v2 4/5
9/1/2019 Charts in Oracle Visual Builder - Data Structure and Performance Tips | Oracle Visual Builder Cloud Service Blog

ORACLE VISUAL BUILDER CLOUD

SERVICE
Importing and Updating Apps
Between Visual Builder Instances Complex Queries in Visual Builder

Often, you have to filter a data set

based on multiple search criteria
like in the above image. In this
case, you want to only create...

Site Map Legal Notices Terms of Use Privacy Cookie Preferences Ad Choices

Oracle Content Marketing Login

https://blogs.oracle.com/vbcs/charts-in-oracle-visual-builder-data-structure-and-performance-tips-v2 5/5