Edit D:\app\Administrator\product\11.2.0\dbhome_1\apex\images\doc\bldapp_chrt_svg.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> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Creating a SVG Chart</title> <meta name="generator" content="Oracle DARB XHTML Converter (Mode = ohj/ohw) - Version 5.1" /> <meta name="date" content="2009-04-14T16:11:29Z" /> <meta name="robots" content="noarchive" /> <meta name="doctitle" content="Creating a SVG Chart" /> <meta name="relnum" content="Release 3.2" /> <meta name="partnum" content="E11947-01" /> <link rel="copyright" href="dcommon/html/cpyr.htm" title="Copyright" type="text/html" /> <link rel="stylesheet" href="dcommon/css/blafdoc.css" title="Oracle BLAFDoc" type="text/css" /> <link rel="contents" href="toc.htm" title="Contents" type="text/html" /> <link rel="up" href="preface.htm" title="Home" type="text/html" /> <link rel="up" href="app_comp.htm" title="Adding Application Components" type="text/html" /> <link rel="up" href="bldapp_chrt.htm" title="Creating Charts" type="text/html" /> <link rel="up" href="bldapp_chrt_svg.htm" title="Creating a SVG Chart" type="text/html" /> <link rel="prev" href="bldapp_chrt_html.htm" title="Previous" type="text/html" /> <link rel="next" href="bldapp_chrt_flash.htm" title="Next" type="text/html" /> </head> <body> <p id="BREADCRUMBING"><a href="preface.htm" title="Home">Home</a> > <a href="app_comp.htm" title="Adding Application Components">Adding Application Components</a> > <a href="bldapp_chrt.htm" title="Creating Charts">Creating Charts</a> > Creating a SVG Chart</p> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <col width="86%" /> <col width="*" /> <tr valign="bottom"> <td align="left"></td> <td align="center"><a href="bldapp_chrt_html.htm"><img src="dcommon/gifs/leftnav.gif" alt="Previous" /><br /> <span class="icon">Previous</span></a> </td> <td align="center"><a href="bldapp_chrt_flash.htm"><img src="dcommon/gifs/rightnav.gif" alt="Next" /><br /> <span class="icon">Next</span></a></td> </tr> </table> <p><a id="BABHAHCH" name="BABHAHCH"></a></p> <div class="sect2"><!-- infolevel="all" infotype="General" --> <h1><a name="HTMDB25419" id="HTMDB25419"></a>Creating a <a id="sthref1148" name="sthref1148"></a>SVG Chart</h1> <p>Oracle Application Express supports a number of different SVG charts. To see a complete listing, see <a href="#BABBCGCD">"About SVG Chart Types"</a>.</p> <p>How you create a chart depends upon whether you are adding the chart to an existing page, or adding a chart on a new page. This chart type creates a bar chart showing one data series with each data point represented by a bar.</p> <a id="sthref1149" name="sthref1149"></a> <p class="subhead2">Topics:</p> <ul> <li> <p><a href="#BABFBDFJ">Adding a SVG Chart to an Existing Page</a></p> </li> <li> <p><a href="#BABCIDDE">Adding a SVG Chart to a New Page</a></p> </li> <li> <p><a href="#BABBCGCD">About SVG Chart Types</a></p> </li> <li> <p><a href="#CEGEHFHI">Understanding SVG Chart Cascading Style Sheet Classes</a></p> </li> <li> <p><a href="#CEGEBEGB">Referencing a Custom SVG Chart Cascading Style Sheet</a></p> </li> <li> <p><a href="#CEGGBEFE">Specifying Custom CSS Styles Inline for SVG Charts</a></p> </li> </ul> <div align="center"> <div class="inftblnotealso"><br /> <table class="NoteAlso oac_no_warn" summary="" cellpadding="3" cellspacing="0"> <tbody> <tr> <td align="left"> <p class="notep1">See Also:</p> <a href="bldapp_chrt_type.htm#CEGEGEEA">"About SVG Plug-in Support"</a> and <a href="bldapp_chrt_flash.htm#BABGFIBB">"About Migrating SVG Charts to Flash"</a></td> </tr> </tbody> </table> <br /></div> <!-- class="inftblnotealso" --></div> <a id="BABFBDFJ" name="BABFBDFJ"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25420" id="HTMDB25420"></a>Adding a SVG Chart<a id="sthref1150" name="sthref1150"></a> to an Existing Page</h2> <p>To add a SVG chart to an existing page:</p> <ol> <li> <p>Navigate to the Page Definition. See <a href="bldr_goto_pgdef.htm#CJGHCACC">"Accessing a Page Definition"</a>.</p> </li> <li> <p>Under Regions, click the <span class="bold">Create</span> icon.</p> <p>The Create Region Wizard appears.</p> </li> <li> <p>Select <span class="bold">Chart</span> and click <span class="bold">Next</span>.</p> </li> <li> <p>For Region, select <span class="bold">SVG Chart</span>.</p> </li> <li> <p>For Region, select a chart type and click <span class="bold">Next</span>. See <a href="#BABBCGCD">"About SVG Chart Types"</a>.</p> </li> <li> <p>For Display Attributes</p> <ol> <li> <p>Specify the following:</p> <ul> <li> <p>Title</p> </li> <li> <p>Region Template</p> </li> <li> <p>Display Point</p> </li> <li> <p>Sequence</p> </li> <li> <p>Column</p> </li> </ul> <p>To learn more, click the item label. When Help is available, the item label changes to red when you pass your cursor over it and the cursor changes to an arrow and question mark. See <a href="start_hlp.htm#BABDGBDB">"About Field-Level Help"</a>.</p> </li> <li> <p>Click <span class="bold">Next</span>.</p> </li> </ol> </li> <li> <p>For Source:</p> <ol> <li> <p>Specify a query by either:</p> <ul> <li> <p>Entering a SQL query in the field provided. See <a href="bldapp_chrt_about.htm#BCEIJJID">"About Creating SQL Queries for Charts"</a>.</p> </li> <li> <p>Clicking the <span class="bold">Build Query</span> button. When the Build Chart Query Wizard appears, follow the on-screen instructions.</p> </li> </ul> </li> <li> <p>Specify relevant chart attributes. To learn more, click the item label.</p> </li> </ol> </li> <li> <p>Click <span class="bold">Create Region</span>.</p> </li> </ol> </div> <!-- class="sect3" --> <a id="BABCIDDE" name="BABCIDDE"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25421" id="HTMDB25421"></a>Adding a SVG Chart<a id="sthref1151" name="sthref1151"></a> to a New Page</h2> <p>To create a SVG chart on a new page:</p> <ol> <li> <p>On the Workspace home page, click the <span class="bold">Application Builder</span> icon.</p> </li> <li> <p>Select an application.</p> </li> <li> <p>Click <span class="bold">Create Page</span>.</p> </li> <li> <p>Select <span class="bold">Chart</span> and click <span class="bold">Next</span>.</p> </li> <li> <p>Select <span class="bold">SVG Chart</span>.</p> </li> <li> <p>Select a chart type and click <span class="bold">Next</span>. See <a href="#BABBCGCD">"About SVG Chart Types"</a>.</p> </li> <li> <p>For Page Attributes:</p> <ol> <li> <p>Specify the following:</p> <ul> <li> <p>Page Number</p> </li> <li> <p>Page Name</p> </li> <li> <p>Region Template</p> </li> <li> <p>Region Name</p> </li> <li> <p>Chart Color Theme</p> </li> <li> <p>Breadcrumb</p> </li> </ul> <p>To learn more, click the item label. When Help is available, the item label changes to red when you pass your cursor over it and the cursor changes to an arrow and question mark. See <a href="start_hlp.htm#BABDGBDB">"About Field-Level Help"</a>.</p> </li> <li> <p>Click <span class="bold">Next</span>.</p> </li> </ol> </li> <li> <p>Specify whether to include tabs and click <span class="bold">Next</span>.</p> </li> <li> <p>For Query:</p> <ol> <li> <p>Specify a query by either:</p> <ul> <li> <p>Entering a SQL query in the field provided. See <a href="bldapp_chrt_about.htm#BCEIJJID">"About Creating SQL Queries for Charts"</a>.</p> </li> <li> <p>Clicking the <span class="bold">Build Query</span> button. When the Build Chart Query Wizard appears, follow the on-screen instructions.</p> </li> </ul> </li> <li> <p>Specify the remaining attributes. To learn more, click the item label.</p> </li> <li> <p>Click <span class="bold">Next</span>.</p> </li> </ol> </li> <li> <p>Click <span class="bold">Finish</span>.</p> </li> </ol> </div> <!-- class="sect3" --> <a id="BABBCGCD" name="BABBCGCD"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25422" id="HTMDB25422"></a>About SVG Chart <a id="sthref1152" name="sthref1152"></a>Types</h2> <p><a href="#CEGGEEAA">Table: Available SVG Chart Types</a> describes the SVG chart types available in Application Builder.</p> <div class="tblformal"><a id="sthref1153" name="sthref1153"></a><a id="CEGGEEAA" name="CEGGEEAA"></a> <p class="titleintable">Available SVG Chart Types</p> <table class="Formal" title="Available SVG Chart Types" summary="This table describes available SVG chart types." dir="ltr" border="1" width="100%" frame="hsides" rules="groups" cellpadding="3" cellspacing="0"> <col width="31%" /> <col width="*" /> <thead> <tr align="left" valign="top"> <th align="left" valign="bottom" id="r1c1-t43">Chart Type</th> <th align="left" valign="bottom" id="r1c2-t43">Description</th> </tr> </thead> <tbody> <tr align="left" valign="top"> <td align="left" id="r2c1-t43" headers="r1c1-t43"> <p>Bar, Horizontal</p> </td> <td align="left" headers="r2c1-t43 r1c2-t43"> <p>Single series-based bar chart oriented horizontally with each data point in the series represented by a bar.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r3c1-t43" headers="r1c1-t43"> <p>Bar, Vertical</p> </td> <td align="left" headers="r3c1-t43 r1c2-t43"> <p>Single series-based bar chart oriented vertically with each data point in series represented by a bar.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r4c1-t43" headers="r1c1-t43"> <p>Cluster Bar, Horizontal</p> </td> <td align="left" headers="r4c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented horizontally and clustered by a common variable with each data point in the series represented by a bar (for example, <span class="italic">Department sales total clustered by month of year</span>).</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r5c1-t43" headers="r1c1-t43"> <p>Cluster Bar, Vertical</p> </td> <td align="left" headers="r5c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented vertically clustered by a common variable with each data point in series represented by a bar (for example, <span class="italic">Department sales total clustered by month of year</span>).</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r6c1-t43" headers="r1c1-t43"> <p>Dial - Sweep</p> </td> <td align="left" headers="r6c1-t43 r1c2-t43"> <p>Also known as an angular gauge; this chart shows either percentage of maximum value or absolute value compared to a maximum value represented as a solid area.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r7c1-t43" headers="r1c1-t43"> <p>Dial</p> </td> <td align="left" headers="r7c1-t43 r1c2-t43"> <p>Also known as angular gauge; this chart shows either percentage of maximum value or absolute value compared to maximum value represented as a line.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r8c1-t43" headers="r1c1-t43"> <p>Line</p> </td> <td align="left" headers="r8c1-t43 r1c2-t43"> <p>Multiple series-based line chart oriented with each line representing all data points in the series.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r9c1-t43" headers="r1c1-t43"> <p>Pie</p> </td> <td align="left" headers="r9c1-t43 r1c2-t43"> <p>Single series-based pie chart with each slice representing a data point in the series.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r10c1-t43" headers="r1c1-t43"> <p>Stacked Bar, Horizontal</p> </td> <td align="left" headers="r10c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented horizontally with each data point being an absolute value in the series representing a segment of a single bar.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r11c1-t43" headers="r1c1-t43"> <p>Stacked Bar, Vertical</p> </td> <td align="left" headers="r11c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented vertically with each data point being an absolute value in the series representing a segment of a single bar.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r12c1-t43" headers="r1c1-t43"> <p>Stacked Percentage Bar, Horizontal</p> </td> <td align="left" headers="r12c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented horizontally with each data point being a percentage of 100% of the series represented by a segment of a single bar.</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r13c1-t43" headers="r1c1-t43"> <p>Stacked Percentage Bar, Vertical</p> </td> <td align="left" headers="r13c1-t43 r1c2-t43"> <p>Multiple series-based bar chart oriented vertically with each data point being a percentage of 100% of the series represented by a segment of a single bar</p> <p>SVG-based. Requires an SVG plug-in.</p> </td> </tr> </tbody> </table> <br /></div> <!-- class="tblformal" --></div> <!-- class="sect3" --> <a id="CEGEHFHI" name="CEGEHFHI"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25423" id="HTMDB25423"></a>Understanding <a id="sthref1154" name="sthref1154"></a><a id="sthref1155" name="sthref1155"></a>SVG Chart Cascading Style Sheet Classes</h2> <p>When you create a new chart, Oracle Application Express renders it based on cascading style sheet (CSS) classes associated with the current theme. You can change the appearance of a chart by referencing another CSS or by overriding individual classes in the CSS section of the Edit Attributes page</p> <p>The following sample contains the CSS classes for the dial chart in <span class="italic">Sample Application</span>. This example contains all the available CSS classes. Class names appear in boldface.</p> <pre xml:space="preserve" class="oac_no_warn"> <span class="bold">text</span>{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;} <span class="bold">tspan</span>{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;} <span class="bold">text.title</span>{font-weight:bold;font-size:14;fill:#000000;} <span class="bold">text.moredatafound</span>{font-size:12;} <span class="bold">rect.legend</span>{fill:#EEEEEE;stroke:#000000;stroke-width:1;} <span class="bold">text.legend</span>{font-size:10;} <span class="bold">#background</span>{fill:#FFFFFF;stroke:none;} <span class="bold">rect.chartholderbackground</span>{fill:#ffffff;stroke:#000000;stroke-width:1;} <span class="bold">#timestamp</span>{text-anchor:start;font-size:9;} <span class="bold">text.tic</span>{stroke:none;fill:#000000;font-size:12} <span class="bold">line.tic</span>{stroke:#000000;stroke-width:1px;fill:none;} <span class="bold">#dial</span>{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;} <span class="bold">#dial.alert</span>{fill:#FF0000;fill-opacity:.5;} <span class="bold">#dialbackground</span>{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);} <span class="bold">#dialcenter</span>{stroke:none;fill:#111111;filter:url(#MyFilter);} <span class="bold">#dialbackground-border</span>{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url (#MyFilter);}#low{stroke-width:3;stroke:#336699;} <span class="bold">#high</span>{stroke-width:3;stroke:#FF0000;} <span class="bold">#XAxisTitle</span>{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;} <span class="bold">#YAxisTitle</span>{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;} <span class="bold">.XAxisValue</span>{font-size:8;fill:#000000;} <span class="bold">.YAxisValue</span>{font-size:8;fill:#000000;text-anchor:end;} <span class="bold">.nodatafound</span>{stroke:#000000;stroke-width:1;font-size:12;} <span class="bold">.AxisLine</span>{stroke:#000000;stroke-width:2;fill:#FFFFFF;} .<span class="bold">GridLine</span>{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;} <span class="bold">g.dataholder rect</span>{stroke:#000000;stroke-width:0.5;} <span class="bold">.legenditem rect</span>{stroke:#000000;stroke-width:0.5;} </pre> <p><a href="#CEGEJJGF">Table: Available SVG Chart CSS Classes</a> describes all supported CSS classes. Note that certain classes only apply to specific chart types.</p> <div class="tblformal"><a id="sthref1156" name="sthref1156"></a><a id="CEGEJJGF" name="CEGEJJGF"></a> <p class="titleintable">Available SVG Chart CSS Classes</p> <table class="Formal" title="Available SVG Chart CSS Classes" summary="The table describes all supported CSS class." dir="ltr" border="1" width="100%" frame="hsides" rules="groups" cellpadding="3" cellspacing="0"> <col width="38%" /> <col width="*" /> <thead> <tr align="left" valign="top"> <th align="left" valign="bottom" id="r1c1-t44">Class</th> <th align="left" valign="bottom" id="r1c2-t44">Description</th> </tr> </thead> <tbody> <tr align="left" valign="top"> <td align="left" id="r2c1-t44" headers="r1c1-t44"> <p><code>text</code></p> </td> <td align="left" headers="r2c1-t44 r1c2-t44"> <p>Defines the appearance of text that displays in a chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r3c1-t44" headers="r1c1-t44"> <p><code>tspan</code></p> </td> <td align="left" headers="r3c1-t44 r1c2-t44"> <p>Defines the appearance of text that displays in a chart. <code>tspan</code> should match the definition of <code>text</code>.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r4c1-t44" headers="r1c1-t44"> <p><code>text.title</code></p> </td> <td align="left" headers="r4c1-t44 r1c2-t44"> <p>Overrides the default chart text. Use this class for title text.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r5c1-t44" headers="r1c1-t44"> <p><code>text.moredatafound</code></p> </td> <td align="left" headers="r5c1-t44 r1c2-t44"> <p>Defines the appearance of more datafound text.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r6c1-t44" headers="r1c1-t44"> <p><code>rect.legend</code></p> </td> <td align="left" headers="r6c1-t44 r1c2-t44"> <p>Creates the rectangular box that holds the chart legend.</p> <p>To remove the legend border, change <code>rect.legend</code> to the following:</p> <pre xml:space="preserve" class="oac_no_warn"> rect.legend{fill:#CCCC99;stroke:none;} </pre></td> </tr> <tr align="left" valign="top"> <td align="left" id="r7c1-t44" headers="r1c1-t44"> <p><code>text.legend</code></p> </td> <td align="left" headers="r7c1-t44 r1c2-t44"> <p>Defines the text that appears in the chart legend.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r8c1-t44" headers="r1c1-t44"> <p><code>#background</code></p> </td> <td align="left" headers="r8c1-t44 r1c2-t44"> <p>Creates the entire background for the SVG plug-in.</p> <p>For a solid white background with no border, change <code>#background</code> to the following:</p> <pre xml:space="preserve" class="oac_no_warn"> #background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;} </pre></td> </tr> <tr align="left" valign="top"> <td align="left" id="r9c1-t44" headers="r1c1-t44"> <p><code>rect.chartholderbackground</code></p> </td> <td align="left" headers="r9c1-t44 r1c2-t44"> <p>Not applicable to pie and dial charts. Creates the background of the rectangle that holds the chart data.</p> <p>For a clear background, change <code>rect.chartholderbackground</code> to the following:</p> <pre xml:space="preserve" class="oac_no_warn"> rect.chartholderbackground(display:none;) </pre></td> </tr> <tr align="left" valign="top"> <td align="left" id="r10c1-t44" headers="r1c1-t44"> <p><code>#timestamp</code></p> </td> <td align="left" headers="r10c1-t44 r1c2-t44"> <p>Only applicable if the Asynchronous Update chart attribute is set to Yes. Controls the appearance of the update timestamp test.</p> <p>To disable the display of the timestamp, use defines <code>#timestamp</code> as follows in the Custom CSS, Inline attribute.</p> <pre xml:space="preserve" class="oac_no_warn"> "#timestamp{display:none;}" </pre> <p><span class="bold">See Also:</span> <a href="bldapp_chrt_async.htm#CEGDDABC">"Enabling Asynchronous Updates"</a></p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r11c1-t44" headers="r1c1-t44"> <p><code>text.tic</code></p> </td> <td align="left" headers="r11c1-t44 r1c2-t44"> <p>Dial charts only. Defines the numbers on a dial chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r12c1-t44" headers="r1c1-t44"> <p><code>line.tic</code></p> </td> <td align="left" headers="r12c1-t44 r1c2-t44"> <p>Dial charts only. Defines the graduation mark that displays directly beneath the number on a dial chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r13c1-t44" headers="r1c1-t44"> <p><code>#dial</code></p> </td> <td align="left" headers="r13c1-t44 r1c2-t44"> <p>Dial charts only. Defines the value that displays on the dial chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r14c1-t44" headers="r1c1-t44"> <p><code>#dial.alert</code></p> </td> <td align="left" headers="r14c1-t44 r1c2-t44"> <p>Dial charts only. Defines a value (called an alert value) that renders in a dial chart using a different display.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r15c1-t44" headers="r1c1-t44"> <p><code>#dialbackground</code></p> </td> <td align="left" headers="r15c1-t44 r1c2-t44"> <p>Dial charts only. Creates the background of a dial chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r16c1-t44" headers="r1c1-t44"> <p><code>#dialcenter</code></p> </td> <td align="left" headers="r16c1-t44 r1c2-t44"> <p>Dial charts only. Creates the center of the dial on a dial chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r17c1-t44" headers="r1c1-t44"> <p><code>#dialbackground-border</code></p> </td> <td align="left" headers="r17c1-t44 r1c2-t44"> <p>Dial charts only. Works with <code>#dialbackground</code> to create specific graphic effect.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r18c1-t44" headers="r1c1-t44"> <p><code>#low</code></p> </td> <td align="left" headers="r18c1-t44 r1c2-t44"> <p>Dial charts only. Defines the historical low watermark of the data being displayed on a chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r19c1-t44" headers="r1c1-t44"> <p><code>#high</code></p> </td> <td align="left" headers="r19c1-t44 r1c2-t44"> <p>Dial charts only. Defines the historical high watermark of the data being displayed on a chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r20c1-t44" headers="r1c1-t44"> <p><code>#XAxisTitle</code></p> </td> <td align="left" headers="r20c1-t44 r1c2-t44"> <p>Defines the title that appears on the x-axis</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r21c1-t44" headers="r1c1-t44"> <p><code>#YAxisTitle</code></p> </td> <td align="left" headers="r21c1-t44 r1c2-t44"> <p>Defines the title that appears on the y-axis.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r22c1-t44" headers="r1c1-t44"> <p><code>.XAxisValue</code></p> </td> <td align="left" headers="r22c1-t44 r1c2-t44"> <p>Defines the value that appears on the x-axis.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r23c1-t44" headers="r1c1-t44"> <p><code>.YAxisValue</code></p> </td> <td align="left" headers="r23c1-t44 r1c2-t44"> <p>Defines the value that appears on the y-axis.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r24c1-t44" headers="r1c1-t44"> <p><code>.AxisLabel</code></p> </td> <td align="left" headers="r24c1-t44 r1c2-t44"> <p>Similar to the axis value.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r25c1-t44" headers="r1c1-t44"> <p><code>.nodatafound</code></p> </td> <td align="left" headers="r25c1-t44 r1c2-t44"> <p>Defines the text element that displays if no information is available.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r26c1-t44" headers="r1c1-t44"> <p><code>.AxisLine</code></p> </td> <td align="left" headers="r26c1-t44 r1c2-t44"> <p>Indicates zero on charts that have negative values.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r27c1-t44" headers="r1c1-t44"> <p>.<code>GridLine</code></p> </td> <td align="left" headers="r27c1-t44 r1c2-t44"> <p>Creates the horizontal and vertical lines on the chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r28c1-t44" headers="r1c1-t44"> <p><code>g.dataholder rect</code></p> </td> <td align="left" headers="r28c1-t44 r1c2-t44"> <p>Applies a blanket style to all data that displays in the chart.</p> </td> </tr> <tr align="left" valign="top"> <td align="left" id="r29c1-t44" headers="r1c1-t44"> <p><code>.legenditem rect</code></p> </td> <td align="left" headers="r29c1-t44 r1c2-t44"> <p>Applies a blanket style to all rectangular items in the legend.</p> </td> </tr> </tbody> </table> <br /></div> <!-- class="tblformal" --></div> <!-- class="sect3" --> <a id="CEGEBEGB" name="CEGEBEGB"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25424" id="HTMDB25424"></a>Referencing a Custom SVG Chart <a id="sthref1157" name="sthref1157"></a><a id="sthref1158" name="sthref1158"></a>Cascading Style Sheet</h2> <p>You can reference a custom cascading style sheet for a chart using the CSS section of the Chart Attributes page. When you reference an external CSS, you can reference it entirely or simply override specific styles.</p> <p>To reference a custom chart CSS:</p> <ol> <li> <p>Upload the CSS to Application Builder. See <a href="ui_custom_css_upload.htm#BABCJGEI">"Uploading Cascading Style Sheets"</a>.</p> </li> <li> <p>Create a chart. See <a href="#BABHAHCH">"Creating a SVG Chart"</a>.</p> </li> <li> <p>Navigate to the Page Definition. See <a href="bldr_goto_pgdef.htm#CJGHCACC">"Accessing a Page Definition"</a>.</p> </li> <li> <p>Under Regions, click <span class="bold">Chart</span> next to the region name.</p> <p>The Chart Attributes page appears.</p> </li> <li> <p>Scroll down to the CSS section.</p> </li> <li> <p>From Use Custom CSS, select <span class="bold">Yes</span>.</p> </li> <li> <p>To reference an external CSS exclusively:</p> <ol> <li> <p>In Custom CSS, Link, enter a link to a custom CSS. For example:</p> <pre xml:space="preserve" class="oac_no_warn"> #IMAGE_PREFIX#themes/theme_4/svg.css </pre></li> <li> <p>Specify that the CSS should be used exclusively. In Custom CSS, Inline enter the following:</p> <pre xml:space="preserve" class="oac_no_warn"> /**/ </pre></li> </ol> </li> <li> <p>To reference a custom CSS and override specific styles:</p> <ol> <li> <p>In Custom CSS, Link, enter a link to a custom style sheet. For example:</p> <pre xml:space="preserve" class="oac_no_warn"> #IMAGE_PREFIX#themes/theme_4/svg.css </pre></li> <li> <p>In Custom CSS, Inline, enter the custom CSS styles you want to override.</p> </li> </ol> </li> </ol> </div> <!-- class="sect3" --> <a id="CEGGBEFE" name="CEGGBEFE"></a> <div class="sect3"><!-- infolevel="all" infotype="General" --> <h2><a name="HTMDB25425" id="HTMDB25425"></a>Specifying Custom <a id="sthref1159" name="sthref1159"></a><a id="sthref1160" name="sthref1160"></a>CSS Styles Inline for SVG Charts</h2> <p>You can override specific styles within the default CSS, using the Custom CSS, Inline attribute on the Chart Attributes page.</p> <p>To override specific styles within the default CSS:</p> <ol> <li> <p>Create a chart. See <a href="#BABHAHCH">"Creating a SVG Chart"</a>.</p> </li> <li> <p>Navigate to the Page Definition. See <a href="bldr_goto_pgdef.htm#CJGHCACC">"Accessing a Page Definition"</a>.</p> </li> <li> <p>Under Regions, click <span class="bold">Chart</span> next to the region name.</p> <p>The Chart Attributes page appears.</p> </li> <li> <p>Scroll down to CSS.</p> </li> <li> <p>From Use Custom CSS, select <span class="bold">Yes</span>.</p> </li> <li> <p>In Custom CSS, Inline, enter the custom CSS styles you want to override.</p> </li> </ol> </div> <!-- class="sect3" --></div> <!-- class="sect2" --> <!-- Start Footer --> <div class="footer"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <col width="86%" /> <col width="*" /> <tr> <td align="left"><span class="copyrightlogo">Copyright © 2003, 2009, Oracle and/or its affiliates. All rights reserved.</span><br /> <a href="dcommon/html/cpyr.htm"><span class="copyrightlogo">Legal Notices</span></a></td> <td align="center"><a href="bldapp_chrt_html.htm"><img src="dcommon/gifs/leftnav.gif" alt="Previous" /><br /> <span class="icon">Previous</span></a> </td> <td align="center"><a href="bldapp_chrt_flash.htm"><img src="dcommon/gifs/rightnav.gif" alt="Next" /><br /> <span class="icon">Next</span></a></td> </tr> </table> </div> <!-- class="footer" --> </body> </html>
Ms-Dos/Windows
Unix
Write backup
jsp File Browser version 1.2 by
www.vonloesch.de