Shay Shmeltzer's Oracle Development Tools Tips

Charts in Oracle Visual Builder - Data Structure and Performance Tips

Shay Shmeltzer
Director of Product Management - Oracle

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 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):

  • 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 


An example of the data structure for the second chart is in the Oracle JET cookbook.

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) {
    var newID = 1;
    if (result && result.length > 0) {
      var items = [];

      for (var i = 0; i < result.length; i++) {
          id: newID++,
          group: result[i].name,
          series: "Salary",
          value: result[i].salary
          id: newID++,
          group: result[i].name,
          series: "Bonus",
          value: result[i].bonus * result[i].salary
      return items;

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.