Edit D:\app\Administrator\product\11.2.0\dbhome_1\apex\images\doc\tutorial\bar_chart.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- Run date = February 23, 2005 16:58:38 --> <meta name="Generator" content=" Oracle DARB XHTML converter - Version 4.1.3 Build 116" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title> How to Create a Stacked Bar Chart</title> <link rel="stylesheet" type="text/css" href="blafdoc.css" title="default" /> <link rel="stylesheet" type="text/css" href="darbbook.css" title="default" /> <link rel="prev" href="web_serv.htm" title="Previous" /> <link rel="next" href="up_dn_files.htm" title="Next" /> <link rel="up" href="toc.htm" title="Up" /> <link rel="contents" href="toc.htm" title="Contents" /> <link rel="copyright" href="./support/html/cpyr.htm" title="Copyright" /> <link rel="index" href="index.htm" title="Index" /> </head> <body> <div class="header"> <a id="top" name="top"></a> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top"> <b>Oracle® HTML DB Guide to Building Applications </b> <br /> <b>Release 2.0 </b> </td> <td valign="bottom" align="right"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225"> <tr><td> </td> <td align="center" valign="top"><a href="toc.htm"><img src="./support/gifs/toc.gif" alt="Go To Table Of Contents" border="0" /><br /><span class="icon">Contents</span></a></td> </table> </td> </tr> </table> <hr /> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100"> <tr> <td align="center"> <a href="web_serv.htm"> <img src="./support/gifs/leftnav.gif" alt="Previous" border="0" /><br /><span class="icon">Previous</span></a> </td> <td align="center"> <a href="up_dn_files.htm"> <img src="./support/gifs/rightnav.gif" alt="Next" border="0" /><br /><span class="icon">Next</span></a> </td> <td> </td> </tr> </table> </div><!-- class="header" --> <div class="IND"> <!-- End Header --><a id="CHDECIGH" name="CHDECIGH"></a><a id="sthref145" name="sthref145"></a> <h1><a name="HTMAD007"></a>How to Create a Stacked Bar Chart</h1> <p>A stacked bar chart displays the results of multiple queries stacked on top of one another (either vertically or horizontally). Using a stacked bar chart is an effective way to communicate the absolute values of data points represented by the segments of each bar, as well as the total value represented by data points from each series stacked in a bar. </p> <p>In Oracle HTML DB, stacked bar chart is only available as an SVG chart. To create a stacked bar chart, you can create the chart as a stacked bar chart, or you can create a regular (non-HTML) bar chart and then add queries to it. </p> <p>This tutorial describes how to create a stacked bar chart using existing data within the demonstration application, <span class="italic">Sample Application</span>. </p> <p class="subhead2">Topics:</p> <ul> <li type="disc"> <p><a href="#BEHIBCCJ">Accessing Sample Application</a> </p> </li> <li type="disc"> <p><a href="#CHDHDCIA">Creating a Stacked Bar Chart</a> </p> </li> <li type="disc"> <p><a href="#CHDGDFEJ">Adding Additional Series</a> </p> </li> <li type="disc"> <p><a href="#CHDIIBBH">Changing the Chart Format</a> </p> </li> <li type="disc"> <p><a href="#CHDGHBHA">Viewing the Chart</a> </p> </li> </ul><a id="BEHIBCCJ" name="BEHIBCCJ"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref146" name="sthref146"></a> <h2>Accessing Sample Application </h2> <p>To access Sample Application: </p> <ol type="1" start="1"> <li> <p>Log in to Oracle HTML DB. </p> </li> <li> <p>From the Workspace Administration list, select <span class="bold">Review Demonstration Applications</span>. </p> </li> <li> <p>Locate Sample Application and check the Status column: </p> <ol type="a"> <li> <p>If the Status column displays <span class="bold">Installed</span>, click <span class="bold">Run</span> in the Action column. </p> </li> <li> <p>If the Status column displays <span class="bold">Not Installed</span>, select <span class="bold">Install</span> in the Action column. When the Application Builder home page appears, click the <span class="bold">Run</span> icon. </p> </li> </ol> </li> <li> <p>When prompted, enter the appropriate username and password and click <span class="bold">Login</span> </p> <ul> <li type="disc"> <p>For User Name, enter either <code>demo</code> or <code>admin</code>. </p> </li> <li type="disc"> <p>For Password, enter the name of the current workspace using all lowercase letters. </p> </li> </ul> </li> </ol> </div><!-- class="sect1" --> <a id="CHDHDCIA" name="CHDHDCIA"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref147" name="sthref147"></a> <h2>Creating a Stacked Bar Chart </h2> <p>To create the initial report, you can either add a region to an existing page and define it as a stacked bar chart, or you can create a new page. In this exercise, you create a new page within the Sample Application. </p> <p>The chart will display the sum by product category for sales from within the Sample Application. It will contain sales for the twelve months prior to the current month. In the following exercise, you will create four queries (called series) for each of the product categories (phones, computers, audio, and video). </p> <p>To create a new page: </p> <ol type="1" start="1"> <li> <p>Navigate to the Workspace home page. </p> </li> <li> <p>From the Applications list, select <span class="bold">Sample Application</span>. </p> </li> <li> <p>Click <span class="bold">Create Page</span>. </p> </li> <li> <p>Select <span class="bold">Page with Component</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>On Select Component Type, select <span class="bold">Chart</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>Select <span class="bold">Stacked Bar</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>For Identify Page Attributes: </p> <ol type="a"> <li> <p>For Page, enter <code>750</code>. </p> </li> <li> <p>For Page Name, enter <code>Revenue by Category</code>. </p> </li> <li> <p>For Region Name, enter <code>Revenue by Category</code>. </p> </li> <li> <p>Click <span class="bold">Next</span>. </p> </li> </ol> </li> <li> <p>For Tab Options, accept the default <span class="bold">Do not use Tabs</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>On Series Query: </p> <ol type="a"> <li> <p>For Series Name, enter <code>Phones</code>. </p> </li> <li> <p>In SQL, enter: </p> <pre xml:space="preserve" class="oac_no_warn">SELECT NULL l, sales_month, revenue FROM ( SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month, SUM(oi.quantity * oi.unit_price) revenue, TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order FROM DEMO_PRODUCT_INFO p, DEMO_ORDER_ITEMS oi, DEMO_ORDERS o WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1) AND o.order_timestamp > (trunc(sysdate-365,'MON')) AND o.order_id = oi.order_id AND oi.product_id = p.product_id AND p.category = 'Phones' GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY') ORDER BY sales_month_order ) </pre> <p>The syntax for the select of a chart is <code>SELECT link, label, value</code>. You must have all three and only three items in your select. Because there is no appropriate page to link to, the link is defined as null. </p> <p>You cannot have an order by in the select statement for series in a stacked chart. The information will be displayed in alphabetical order and this does not work for dates (October displays before September). To get the data to display in chronological order, you need to order the data inside a nested select. </p> </li> <li> <p>For When No Data Found Message, enter: </p> <pre xml:space="preserve" class="oac_no_warn">No orders found in the past 12 months. </pre> </li> <li> <p>Click <span class="bold">Next</span>. </p> </li> </ol> </li> <li> <p>Review your selections and click <span class="bold">Finish</span>. </p> </li> </ol> </div><!-- class="sect1" --> <a id="CHDGDFEJ" name="CHDGDFEJ"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref148" name="sthref148"></a> <h2>Adding Additional Series </h2> <p>Once you have created the new page with a region defining the query, you need to add the series. In the following exercise, you will add a series for each of the categories of product in the application (that is, computers, audio, and video). Note you have already created the phones category. </p> <p>To add a series for computers category: </p> <ol type="1" start="1"> <li> <p>On the Success Page, select <span class="bold">Edit Page</span>. </p> <p>The Page Definition for page 750 appears. </p> </li> <li> <p>Under Regions, select <span class="bold">Chart</span> to the left of Revenue by Category. </p> <p>Under Chart Series, notice that only one series appears. </p> </li> <li> <p>Add a chart series for Computer. Under Chart Series, click <span class="bold">Add Series</span>. </p> <ol type="a"> <li> <p>For Series Name, enter <code>Computer</code>. </p> </li> <li> <p>In SQL, enter: </p> <pre xml:space="preserve" class="oac_no_warn">SELECT NULL l, sales_month, revenue FROM ( SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month, SUM(oi.quantity * oi.unit_price) revenue, TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order FROM DEMO_PRODUCT_INFO p, DEMO_ORDER_ITEMS oi, DEMO_ORDERS o WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1) AND o.order_timestamp > (trunc(sysdate-365,'MON')) AND o.order_id = oi.order_id AND oi.product_id = p.product_id AND p.category = 'Computer' GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY') ORDER BY sales_month_order ) </pre> <p>Note that this SQL matches the previous series. The only difference is that the category in the <code>WHERE</code> clause. </p> </li> <li> <p>For When No Data Found Message, enter: </p> <pre xml:space="preserve" class="oac_no_warn">No orders found in the past 12 months. </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </li> <li> <p>Add a chart series for Audio. Under Chart Series, click <span class="bold">Add Series</span>. </p> <ol type="a"> <li> <p>For Series Name, enter <code>Audio</code>. </p> </li> <li> <p>In SQL, enter: </p> <pre xml:space="preserve" class="oac_no_warn">SELECT NULL l, sales_month, revenue FROM ( SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month, SUM(oi.quantity * oi.unit_price) revenue, TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order FROM DEMO_PRODUCT_INFO p, DEMO_ORDER_ITEMS oi, DEMO_ORDERS o WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1) AND o.order_timestamp > (trunc(sysdate-365,'MON')) AND o.order_id = oi.order_id AND oi.product_id = p.product_id AND p.category = 'Audio' GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY') ORDER BY sales_month_order ) </pre> </li> <li> <p>For When No Data Found Message, enter: </p> <pre xml:space="preserve" class="oac_no_warn">No orders found in the past 12 months. </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </li> <li> <p>Add a chart series for Video. Under Chart Series, click <span class="bold">Add Series</span>. </p> <ol type="a"> <li> <p>For Series Name, enter <code>Video</code>. </p> </li> <li> <p>In SQL, enter: </p> <pre xml:space="preserve" class="oac_no_warn">SELECT NULL l, sales_month, revenue FROM ( SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month, SUM(oi.quantity * oi.unit_price) revenue, TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order FROM DEMO_PRODUCT_INFO p, DEMO_ORDER_ITEMS oi, DEMO_ORDERS o WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1) AND o.order_timestamp > (trunc(sysdate-365,'MON')) AND o.order_id = oi.order_id AND oi.product_id = p.product_id AND p.category = 'Video' GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY') ORDER BY sales_month_order ) </pre> </li> <li> <p>For When No Data Found Message, enter: </p> <pre xml:space="preserve" class="oac_no_warn">No orders found in the past 12 months. </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </li> </ol> </div><!-- class="sect1" --> <a id="CHDIIBBH" name="CHDIIBBH"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref149" name="sthref149"></a> <h2>Changing the Chart Format </h2> <p>Next, you will enhance the appearance of the chart with axis titles by adding a region footer. </p> <p>To format the Y axis: </p> <ol type="1" start="1"> <li> <p>Scroll down to Axes Settings. </p> </li> <li> <p>In Y Axis Format, enter: </p> <pre xml:space="preserve" class="oac_no_warn">FML999G999G999G999G990 </pre> <p>This formats the <code>sales_month</code> column as money, but without displaying the cents </p> </li> <li> <p>Select the Region Definition tab. </p> </li> <li> <p>Scroll down to Header and Footer Text. For Region Footer, enter: </p> <pre xml:space="preserve" class="oac_no_warn">Note: This reflects sales for the 12 months prior to the current month. </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </div><!-- class="sect1" --> <a id="CHDGHBHA" name="CHDGHBHA"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref150" name="sthref150"></a> <h2>Viewing the Chart </h2> <p>Now that the chart is complete, you can view it. </p> <p>To run the chart: </p> <ol type="1" start="1"> <li> <p>Click the Run Page icon in the upper right corner of the page. </p> </li> <li> <p>If you have already run Sample Application in this session, you will be taken to page 750. Otherwise, enter the appropriate username and password and click <span class="bold">Login</span> </p> <ul> <li type="disc"> <p>For User Name, enter either <code>demo</code> or <code>admin</code> </p> </li> <li type="disc"> <p>For Password, enter the name of the current workspace using all lowercase letters </p> </li> </ul> </li> <li> <p>Navigate to page 750. </p> <p>As shown in <a href="#BEHGAEEA">Figure 7-1</a>, the Revenue by Category chart appears. </p> <div class="figure"> <a id="BEHGAEEA" name="BEHGAEEA"></a><a id="sthref151" name="sthref151"></a> <p class="titleinfigure">Figure 7-1 Revenue by Category Bar Chart</p> <img src="./img/bar_chart.gif" alt="Description of bar_chart.gif follows" title="Description of bar_chart.gif follows"/> <br /><a id="sthref152" name="sthref152" href="./img_text/bar_chart.htm">Description of the illustration bar_chart.gif</a> <br /><br /> </div><!-- class="figure" --> </li> </ol> <div align="center"> <div class="inftblNoteAlso"> <br /><table class = "NoteAlso oac_no_warn" summary="This is a layout table to format a tip" title="This is a layout table to format a tip" dir="ltr" border="1" width="80%" frame="hsides" rules="groups" cellpadding="3" cellspacing="0"> <tbody> <tr> <td align="left"> <p class="notep1">Tip:</p>One way to navigate to a new page within a running application is to change the second parameter (the page identifier) to 750. For example, you would change: <pre xml:space="preserve" class="oac_no_warn">http://htmldb.oraclecorp.com/pls/htmldb/f?p=2046:<span class="bold">1</span>: ... </pre> <p>to </p> <pre xml:space="preserve" class="oac_no_warn">http://htmldb.oraclecorp.com/pls/htmldb/f?p=2046:<span class="bold">750</span>: ... </pre> </td> </tr> </tbody> </table><br /> </div><!-- class="inftblNoteAlso --> </div> </div><!-- class="sect1" --> </div> <!-- Start Footer --> <div class="footer"> <hr /> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <tr> <td valign="bottom" width="33%"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100"> <tr><td> </td> <td align="center"> <a href="web_serv.htm"> <img src="./support/gifs/leftnav.gif" alt="Previous" border="0" /><br /><span class="icon">Previous</span></a> </td> <td align="center"> <a href="up_dn_files.htm"> <img src="./support/gifs/rightnav.gif" alt="Next" border="0" /><br /><span class="icon">Next</span></a> </td> </tr> </table> </td> <td class="copyrightlogo"> <a href="./support/html/cpyr.htm"> <span class="copyrightlogo"> Copyright © 2005, Oracle. All rights reserved. </span> </a> </td> <td valign="bottom" align="right" width="33%"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225"> <tr><td> </td> <td align="center" valign="top"><a href="toc.htm"><img src="./support/gifs/toc.gif" alt="Go To Table Of Contents" border="0" /><br /><span class="icon">Contents</span></a></td> </table> </td> </tr> </table> </div><!-- class="footer" --> </body> </html>
Ms-Dos/Windows
Unix
Write backup
jsp File Browser version 1.2 by
www.vonloesch.de