Creating a SVG Chart

Adding a SVG Chart to an Existing Page

To add a SVG chart to an existing page:

1. Navigate to the Page Definition. See "Accessing a Page Definition".

2. Under Regions, click the Create icon.

   The Create Region Wizard appears.

3. Select Chart and click Next.

4. For Region, select SVG Chart.

5. For Region, select a chart type and click Next. See "About SVG Chart Types".

6. For Display Attributes

   1. Specify the following:

      • Title

      • Region Template

      • Display Point

      • Sequence

      • Column

      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 "About Field-Level Help".

   2. Click Next.

7. For Source:

   1. Specify a query by either:

      • Entering a SQL query in the field provided. See "About Creating SQL Queries for Charts".

      • Clicking the Build Query button. When the Build Chart Query Wizard appears, follow the on-screen instructions.

   2. Specify relevant chart attributes. To learn more, click the item label.

8. Click Create Region.

Adding a SVG Chart to a New Page

To create a SVG chart on a new page:

1. On the Workspace home page, click the Application Builder icon.

2. Select an application.

3. Click Create Page.

4. Select Chart and click Next.

5. Select SVG Chart.

6. Select a chart type and click Next. See "About SVG Chart Types".

7. For Page Attributes:

   1. Specify the following:

      • Page Number

      • Page Name

      • Region Template

      • Region Name

      • Chart Color Theme

      • Breadcrumb

      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 "About Field-Level Help".

   2. Click Next.

8. Specify whether or not to include tabs and click Next.

9. For Query:

   1. Specify a query by either:

      • Entering a SQL query in the field provided. See "About Creating SQL Queries for Charts".

      • Clicking the Build Query button. When the Build Chart Query Wizard appears, follow the on-screen instructions.

   2. Specify the remaining attributes. To learn more, click the item label.

   3. Click Next.

10. Click Finish.

About SVG Chart Types

Table: Available SVG Chart Types describes the SVG chart types available in Application Builder.

Understanding SVG Chart Cascading Style Sheet Classes

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

The following sample contains the CSS classes for the dial chart in Sample Application. This example contains all the available CSS classes. Class names appear in boldface.

text{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
tspan{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
text.title{font-weight:bold;font-size:14;fill:#000000;}
text.moredatafound{font-size:12;}
rect.legend{fill:#EEEEEE;stroke:#000000;stroke-width:1;}
text.legend{font-size:10;}
#background{fill:#FFFFFF;stroke:none;}
rect.chartholderbackground{fill:#ffffff;stroke:#000000;stroke-width:1;}
#timestamp{text-anchor:start;font-size:9;}
text.tic{stroke:none;fill:#000000;font-size:12}
line.tic{stroke:#000000;stroke-width:1px;fill:none;}
#dial{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;}
#dial.alert{fill:#FF0000;fill-opacity:.5;}
#dialbackground{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);}
#dialcenter{stroke:none;fill:#111111;filter:url(#MyFilter);}
#dialbackground-border{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url
(#MyFilter);}#low{stroke-width:3;stroke:#336699;}
#high{stroke-width:3;stroke:#FF0000;}
#XAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;}
#YAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;}
.XAxisValue{font-size:8;fill:#000000;}
.YAxisValue{font-size:8;fill:#000000;text-anchor:end;}
.nodatafound{stroke:#000000;stroke-width:1;font-size:12;}
.AxisLine{stroke:#000000;stroke-width:2;fill:#FFFFFF;}
.GridLine{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;}
g.dataholder rect{stroke:#000000;stroke-width:0.5;}
.legenditem rect{stroke:#000000;stroke-width:0.5;}

Table: Available SVG Chart CSS Classes describes all supported CSS classes. Note that certain classes only apply to specific chart types.

rect.legend{fill:#CCCC99;stroke:none;} 

#background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;}

rect.chartholderbackground(display:none;)

"#timestamp{display:none;}" 

Referencing a Custom SVG Chart Cascading Style Sheet

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.

To reference a custom chart CSS:

1. Upload the CSS to Application Builder. See "Uploading Cascading Style Sheets".

2. Create a chart. See "Creating a SVG Chart".

3. Navigate to the Page Definition. See "Accessing a Page Definition".

4. Under Regions, click Chart next to the region name.

   The Chart Attributes page appears.

5. Scroll down to the CSS section.

6. From Use Custom CSS, select Yes.

7. To reference an external CSS exclusively:

   1. In Custom CSS, Link, enter a link to a custom CSS. For example:

      #IMAGE_PREFIX#themes/theme_4/svg.css
      

   2. Specify that the CSS should be used exclusively. In Custom CSS, Inline enter the following:

      /**/
      

8. To reference a custom CSS and override specific styles:

   1. In Custom CSS, Link, enter a link to a custom style sheet. For example:

      #IMAGE_PREFIX#themes/theme_4/svg.css
      

   2. In Custom CSS, Inline, enter the custom CSS styles you want to override.

Specifying Custom CSS Styles Inline for SVG Charts

You can override specific styles within the default CSS, using the Custom CSS, Inline attribute on the Chart Attributes page.

To override specific styles within the default CSS:

1. Create a chart. See "Creating a SVG Chart".

2. Navigate to the Page Definition. See "Accessing a Page Definition".

3. Under Regions, click Chart next to the region name.

   The Chart Attributes page appears.

4. Scroll down to CSS.

5. From Use Custom CSS, select Yes.

6. In Custom CSS, Inline, enter the custom CSS styles you want to override.