Oracle APEX Chart | Stack Unstack | Horizontal Vertical Orientation - Part 25

Summary

Tech mining's video tutorial introduces a graphical report using Oracle JET bar charts to visualize order amounts by category. The interactive chart features multiple slices for different order types, with tooltips for detailed amounts. It includes drill-down functionality to customer profiles, customizable chart orientation, and options for stacked or unstacked data presentation. The tutorial guides through the creation process, from SQL queries to dynamic actions for orientation and data stacking, ensuring an engaging and informative experience.

Takeaways

• 📊 The video demonstrates creating a graphical report using Oracle JET bar chart to display order amounts by category.
• 🔍 Each bar in the chart has multiple slices representing different orders, with tooltips showing amounts when hovered over.
• 🔄 The chart includes drill-down functionality, allowing users to click a bar and navigate to a detailed customer profile page.
• 🔧 Users can change the chart's orientation between horizontal and vertical.
• 📈 The chart can be presented in both stacked and unstacked formats, offering flexibility in data visualization.
• 📝 The source code for the project is provided in the video description for reference.
• 🗂️ The SQL query used fetches summarized order figures categorized by men, women, and accessories.
• 📊 The 'stack' property in the chart determines whether data items are displayed as stacked bars.
• 🎨 Automatic animation settings are applied for the chart, enhancing the visual experience when data changes.
• 📑 The 'location' and 'source' attributes specify where to extract the data for the chart series from the SQL query.
• 🔑 The 'label' and 'value' attributes define the x-axis labels and the ordered values on the chart, respectively.
• 🔗 Clicking a chart bar drills down to a specific page for customer details, with the link active only for the 'kids' category.
• 🛠️ Additional buttons are added to change the chart's orientation and to render the series data as stacked or unstacked.
• 🌐 The chart's orientation change applies to bar, line, area, combo, and funnel charts, enhancing versatility in presentation.

Q & A

What is the main feature of the graphical report demonstrated in the Tech mining video?

The main feature is an Oracle Jet bar chart that displays the amount of orders by category, with each bar having multiple slices representing different orders. It also includes drill-down functionality and the ability to change the chart's orientation.

How does the tooltip in the bar chart provide additional information?

When you move your mouse over the slices in the bar chart, a tooltip displays the corresponding amount for each order, providing more detail about the data.

What happens when you click on a bar in the bar chart?

Clicking a bar in the bar chart enables drill-down functionality, taking you to page 7 where you can see the profile of the selected customer.

Can the orientation of the bar chart be changed, and if so, how?

Yes, the chart's orientation can be changed between horizontal and vertical by clicking the respective buttons provided in the interface.

What are the two additional options provided for presenting the data in the bar chart?

The two additional options for presenting the data are as a stacked or unstacked bar chart.

What is the purpose of the 'stack' property in the bar chart?

The 'stack' property specifies whether the data items are stacked on top of each other in the bar chart, which is useful for comparing the relative sizes of different categories.

What does the 'automatic animation' setting in the chart do?

The 'automatic animation' setting specifies whether animation is shown when data is changed on the chart, enhancing the user experience with visual transitions.

How does the 'label' attribute in the chart define the x-axis?

The 'label' attribute selects a column name that is used for defining the labels of the x-axis on the chart, categorizing the data accordingly.

What is the significance of the 'value' property in the chart?

The 'value' property is used for defining the ordered value on the chart, representing the quantity or amount of orders for each category.

How can the series data be rendered as stacked or unstacked?

There are buttons provided that, when clicked, trigger dynamic actions to render the series data as stacked or unstacked, offering different visual representations of the data.

What is the role of the 'static ID' in the customer orders region?

The 'static ID', set to 'dual chart', allows the region to be recognized and manipulated by JavaScript code when changing the chart's orientation or other properties.

Outlines

00:00

📊 Interactive Bar Chart Tutorial

This paragraph introduces a tutorial on creating a graphical report using Oracle Jet bar charts. The chart displays the amount of orders by category, with each bar featuring multiple slices for different order types. Users can interact with the chart by hovering over slices to view tooltips with specific amounts. The chart includes drill-down functionality, allowing users to click on a bar and navigate to a detailed customer profile page. The video also covers how to change the chart's orientation and presentation style between stacked and unstacked. The source code for the project is provided in the video description, and the script includes a SQL query to fetch summarized order figures categorized by gender and accessories.

05:11

🔄 Chart Customization and Dynamic Actions

The second paragraph focuses on customizing the bar chart with additional features such as currency formatting and dynamic actions for changing the chart's orientation. It details how to add buttons to switch between horizontal and vertical orientations and to toggle between stacked and unstacked series presentations. The paragraph explains the use of dynamic actions in Oracle Apex to trigger JavaScript code that alters the chart's orientation using the OJ chart class. It also discusses setting the static ID property for the region, which allows the chart to be recognized and manipulated by the defined actions.

10:23

🛠️ Testing the Interactive Chart Application

The final paragraph guides the user through testing the interactive chart application. It instructs how to save the work, run the application, and navigate to the specific page to view the chart. The user is encouraged to interact with the chart by moving the cursor over the bars to see tooltips and clicking buttons to change the chart's orientation and series presentation. The paragraph concludes by highlighting the animated effects observed when toggling between stacked and unstacked series.

Keywords

💡Graphical Report

A graphical report is a visual representation of data, often used in business intelligence and data analysis to communicate information effectively. In the video, the graphical report is based on Oracle JET bar chart, which displays the amount of orders by category. This helps viewers understand the volume of orders placed by customers in a visually engaging way.

💡Oracle JET

Oracle JET (JavaScript, HTML5, and SVG) is a framework for building modern web applications. In the context of the video, Oracle JET is used to create interactive and dynamic charts, such as the bar chart that displays order amounts. It provides a robust set of tools for developers to create rich user experiences.

💡Bar Chart

A bar chart is a popular method of displaying data using rectangular bars, where the length of each bar is proportional to the value it represents. In the video, the bar chart is used to represent the amount of different orders by category, making it easy to compare the quantities at a glance.

💡Drill Down Functionality

Drill down functionality refers to the ability to navigate from a higher-level overview to more detailed data. In the video, when a user clicks a bar in the chart, they are taken to a detailed profile of the selected customer, providing a deeper insight into the data.

💡Tooltip

A tooltip is a small, interactive, pop-up box that displays information when the user hovers over an element on a screen. In the video, tooltips are used to display the corresponding amount of orders when the user moves their mouse over the slices of the bar chart.

💡Chart Orientation

Chart orientation refers to the direction in which the data is presented, either horizontally or vertically. The video describes how the chart's orientation can be changed to suit different viewing preferences or data analysis needs, enhancing the user's interaction with the data.

💡Stacked and Unstacked

In data visualization, stacked and unstacked refer to how multiple data series are displayed in a chart. A stacked chart shows the data series layered on top of each other, while an unstacked chart displays them side by side. The video explains how users can toggle between these two views for a different perspective on the data.

💡SQL Query

An SQL (Structured Query Language) query is used to retrieve and manipulate data in a database. In the video, an SQL query is mentioned as being used to fetch summarized order figures by customers for each category, which is essential for populating the bar chart with data.

💡Dynamic Action

Dynamic action is a feature in Oracle Application Express (APEX) that allows developers to create interactive web applications without writing JavaScript code. In the video, dynamic actions are used to change the chart's orientation and to render the series data as stacked or unstacked when buttons are clicked.

💡Static ID

A static ID is a unique identifier assigned to a component in a web application, used for referencing and manipulating the component in code. In the video, the static ID 'dual chart' is set for the customer orders region, allowing the chart to be recognized and controlled through JavaScript.

💡Currency Property

The currency property in data visualization is used to format numerical values as currency, taking into account the correct symbol and decimal places. The video mentions setting the currency property when the format type is set to currency, ensuring that the order amounts are displayed correctly on the chart.

Highlights

Introduction to a graphical report based on Oracle JET bar chart to display orders by category.

Each bar in the chart represents different orders with multiple slices.

Tooltip displays corresponding order amounts when hovering over slices.

Drill-down functionality to view customer profiles on clicking a bar.

Option to change chart orientation between horizontal and vertical.

Capability to present data in stacked or unstacked format.

Source code provided in the video description for reference.

SQL query used to fetch summarized order figures by category.

Stack property to specify whether data items are stacked.

Automatic animation settings for the chart with Oracle JET's default.

Behavior of the chart when clicking a legend item to hide or show series.

Data extraction from SQL query for the customer orders region.

Label attribute for defining x-axis labels on the chart.

Value property for defining the ordered value on the chart.

Drill-down link activation specific to the 'kids' category.

Creation of new series for different customer categories.

Title attribute display at the bottom of the chart.

Currency property specification for format type 'currency'.

Adding buttons to change chart orientation dynamically.

Dynamic actions associated with buttons for chart orientation change.

JavaScript code execution for controlling chart orientation.

Static ID property for recognizing the region in Oracle Apex.

Buttons for rendering series data as stacked or unstacked.

Dynamic actions for buttons to change data presentation.

Testing the graphical report with interactive features.

Interactive tooltips, orientation changes, and data presentation options.

Transcripts

a very warm welcome to Tech mining

this video demonstrates graphical report

which is based on Oracle jet bar chart

to display amount of orders by category

placed by customers each bar in the

chart has multiple slices representing

amounts of different orders when you

move your mouse over these slices a

tooltip displays the corresponding

amount this chart will be created with

drill down functionality that is when

you click a bar you will be taken to

page 7 where you will see profile of the

selected customer

you will also make provision to change

the chart's orientation horizontally and

vertically

[Music]

and will also provide options to present

at either a stacked or unstacked

[Music]

so let's start our work

we'll go through same approach as we did

in previous video to create reports list

page

[Music]

thank you

[Music]

foreign

source code is provided in description

of this video by opening part 8 folder

you will get the file used this query

fetches summarized order figures by

customers for each category men women

and accessories

[Music]

stack property specifies whether the

data items are stacked

foreign

[Music]

automatic animation setting for the

chart which applies the Oracle Jet's

default animation settings it specifies

whether animation is shown when data is

changed on the chart

this hide and show behavior is performed

when you click a legend item risk ale

value rescales the chart as you select

or deselect a legend this is useful for

series with largely varying values

[Music]

in this new node location region source

specifies that the data of this series

is to be extracted from the SQL query

defined for the customer orders region

in the label attribute you select a

column name that is used for defining

the labels of the x-axis on the chart

while this accessories column selected

for the value property is used for

defining the ordered value on this chart

when you click a chart bar you are

drilled down to page 7 to browse

customer details

foreign

foreign

[Music]

this above link will be active for the

kids category only

that's why create a new series for men

as well

[Music]

thank you

[Music]

thank you

create one more series for women also

[Music]

foreign

[Music]

this title attribute will appear at the

bottom of the chart at runtime

thank you

foreign

[Music]

if the format type is set to currency it

is required that the currency property

also be specified which will be used

when formatting the value on the chart

in this step we are adding two buttons

to the customer orders region when these

buttons are clicked they will change the

chart's orientation to horizontal and

vertical

foreign

[Music]

tributes says that this button is

associated with a dynamic action which

fires when the button is clicked

[Music]

now add two Dynamic actions for these

two buttons

this Dynamic action is named horizontal

orientation you are free to give it any

other name you feel suitable

these next three properties specify that

this Dynamic action should trigger when

only the horizontal button is clicked

[Music]

when the horizontal button is clicked

this JavaScript code is fired in this

code dual chart is a static ID which we

will set in next step for the customer

orders region charts orientation is

controlled through the OJ chart class

which has two options horizontal and

vertical where vertical is the default

option

create one more Dynamic action to add

vertical orientation

in these steps we are informing the

Oracle Apex engine to display the chart

horizontally and vertically when their

specific button is clicked

note that the chart orientation only

applies to Bar line area combo and

funnel charts

[Music]

foreign

switch back to the rendering tab in the

advanced section for the static ID

property enter dual chart as the value

now this region can be recognized by

this static ID

add two more buttons under the previous

two buttons these buttons will be used

to render the series data as stacked or

unstacked

[Music]

foreign

[Music]

thank you

[Music]

more Dynamic actions for these two

buttons also

[Music]

foreign

[Music]

foreign

[Music]

thank you

[Music]

click the save button to save your work

now everything is set

Let's test our work

click this run application button

in the navigation menu click this

reports option

click the first customer orders card to

access page 17.

you will see a chart as shown earlier in

this video

move your cursor over the chart bars and

different portions within a particular

bar you will see a tooltip showing order

amount of the corresponding customer

click the vertical and horizontal

buttons to change the chart's

orientation

[Music]

similarly click the stack and unstack

buttons to see respective animated

effects

foreign

[Music]