Oracle APEX Chart | Stack Unstack | Horizontal Vertical Orientation - Part 25
Summary
TLDRTech 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
π 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.
π 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.
π οΈ 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.
Mindmap
Keywords
π‘Graphical Report
π‘Oracle JET
π‘Bar Chart
π‘Drill Down Functionality
π‘Tooltip
π‘Chart Orientation
π‘Stacked and Unstacked
π‘SQL Query
π‘Dynamic Action
π‘Static ID
π‘Currency Property
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]
Browse More Related Video
![](https://i.ytimg.com/vi/bU2_YcStezE/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAkuJQB5fACvsDPQf3SqR40tTbJdA)
Line With Area & Bar Charts with Region Display Selector Oracle APEX - Part 27
![](https://i.ytimg.com/vi/dy--PPqPOh0/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDHQqxppAjDT6awL_xzE9SOvKMAxw)
Customize Interactive Report With Actions Menu - Part 11
![](https://i.ytimg.com/vi/QHoyAxsWKsA/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBGPyGx3RVWWJ6dnobWRYJWOrhOqw)
Donut & Range Charts | Minimum & Maximum Quantities | with Legends Oracle APEX - Part 26
![](https://i.ytimg.com/vi/icJCoc8qwAM/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLD6sIhRq8dxEDh8uavcybD9XRtcZw)
Create Gantt Chart | Oracle APEX - Part 30
![](https://i.ytimg.com/vi/wJip7X3ZLuA/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAbObbGm7QQI6p1tRB5l2a5gQU_5A)
Single + Multiple Series Box Plot Charts Oracle APEX - Part 31
![](https://i.ytimg.com/vi/2kL9tnZNows/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2E_kUk95xkqpQJcSo4ThHB3ytcQ)
Customize Interactive Report using Actions Menu (Sort, Control Break, Highlight) - Part 12
5.0 / 5 (0 votes)