How To Create a Stacked Bar Chart
A stacked bar chart displays the results of multiple queries stacked on top of (vertical) or next to (horizontal) each other. It is a nice way to display data that you want segmented but where you are also interested in the total. The stacked bar chart is only available as an SVG chart. You can initially create a chart as a stacked bar or you can create a regular (non-HTML) bar chart and then add additional queries to it, making it stacked. This How-To will walk you through creating a stacked bar chart based upon the data within the Sample Application that is created when an Oracle HTML DB Workspace is provisioned.
The chart will display the sum, by product category, for sales from within the Sample Application. The sales will be displayed for the twelve months prior to the current month. It excludes sales in the current month because it is just a partial month. There will be 4 queries created, called series, one for each of the categories of products in the Sample Application (Phones, Computer, Audio, Video).Creating the initial Stacked Bar Chart
To create the initial report, you can add a region to an existing page and define it as a stacked bar chart or you can create a new page. You will create a new page within the Sample Application.
If you were to run the page now, you would see a standard bar chart. To Make it into a stacked chart, you will add additional series.Adding Additional Series
Now that you have the new page created with the region defining the first query, you need to add series. You will add a series for each of the categories of products in the application (Phones, Computer, Audio, Video). The one for Phones has already been created. You will also enhance the overall look of the chart with Axis Titles.
The first series you will add will be for Computer:
Your chart is now complete. You can run it by selecting the run page icon ( ) in the upper right. If you have already run the application in this session, you will be taken directly to the page. If you haven't, you will need to login to the application using the directions listed on the login page (use the demo user). Once you have logged in, you will be taken to the first page defined by the application, not your new page. You will need to change your url to navigate to page 700. To do this, just change the second parameter, the page identifier, after the 'f?p=' to 700 (e.g. change from 'f?p=100:1:...' to 'f?p=100:700:...').
Your final chart should look similar to figure 1 below.Figure 1. Revenue by Category Stacked Bar Chart
Discuss this how-to in the OTN Sample Code Discussion Forum.