Creating a SVG Chart

Oracle Application Express supports a number of different SVG charts. To see a complete listing, see "About SVG Chart Types".

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.

Topics:

Adding a SVG Chart to an Existing Page
Adding a SVG Chart to a New Page
About SVG Chart Types
Understanding SVG Chart Cascading Style Sheet Classes
Referencing a Custom SVG Chart Cascading Style Sheet
Specifying Custom CSS Styles Inline for SVG Charts

Adding a SVG Chart to an Existing Page

To add a SVG chart to an existing page:

Navigate to the Page Definition. See "Accessing a Page Definition".
Under Regions, click the Create icon.

The Create Region Wizard appears.
Select Chart and click Next.
For Region, select SVG Chart.
For Region, select a chart type and click Next. See "About SVG Chart Types".
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.
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.
Click Create Region.

Adding a SVG Chart to a New Page

To create a SVG chart on a new page:

On the Workspace home page, click the Application Builder icon.
Select an application.
Click Create Page.
Select Chart and click Next.
Select SVG Chart.
Select a chart type and click Next. See "About SVG Chart Types".
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.
Specify whether to include tabs and click Next.
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.
Click Finish.

About SVG Chart Types

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

Available SVG Chart Types

Chart Type	Description
Bar, Horizontal	Single series-based bar chart oriented horizontally with each data point in the series represented by a bar. SVG-based. Requires an SVG plug-in.
Bar, Vertical	Single series-based bar chart oriented vertically with each data point in series represented by a bar. SVG-based. Requires an SVG plug-in.
Cluster Bar, Horizontal	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, Department sales total clustered by month of year). SVG-based. Requires an SVG plug-in.
Cluster Bar, Vertical	Multiple series-based bar chart oriented vertically clustered by a common variable with each data point in series represented by a bar (for example, Department sales total clustered by month of year). SVG-based. Requires an SVG plug-in.
Dial - Sweep	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. SVG-based. Requires an SVG plug-in.
Dial	Also known as angular gauge; this chart shows either percentage of maximum value or absolute value compared to maximum value represented as a line. SVG-based. Requires an SVG plug-in.
Line	Multiple series-based line chart oriented with each line representing all data points in the series. SVG-based. Requires an SVG plug-in.
Pie	Single series-based pie chart with each slice representing a data point in the series. SVG-based. Requires an SVG plug-in.
Stacked Bar, Horizontal	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. SVG-based. Requires an SVG plug-in.
Stacked Bar, Vertical	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. SVG-based. Requires an SVG plug-in.
Stacked Percentage Bar, Horizontal	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. SVG-based. Requires an SVG plug-in.
Stacked Percentage Bar, Vertical	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 SVG-based. Requires an SVG plug-in.

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.

Available SVG Chart CSS Classes

Class	Description
`text`	Defines the appearance of text that displays in a chart.
`tspan`	Defines the appearance of text that displays in a chart. `tspan` should match the definition of `text`.
`text.title`	Overrides the default chart text. Use this class for title text.
`text.moredatafound`	Defines the appearance of more datafound text.
`rect.legend`	Creates the rectangular box that holds the chart legend. To remove the legend border, change `rect.legend` to the following: rect.legend{fill:#CCCC99;stroke:none;}
`text.legend`	Defines the text that appears in the chart legend.
`#background`	Creates the entire background for the SVG plug-in. For a solid white background with no border, change `#background` to the following: #background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;}
`rect.chartholderbackground`	Not applicable to pie and dial charts. Creates the background of the rectangle that holds the chart data. For a clear background, change `rect.chartholderbackground` to the following: rect.chartholderbackground(display:none;)
`#timestamp`	Only applicable if the Asynchronous Update chart attribute is set to Yes. Controls the appearance of the update timestamp test. To disable the display of the timestamp, use defines `#timestamp` as follows in the Custom CSS, Inline attribute. "#timestamp{display:none;}" See Also: "Enabling Asynchronous Updates"
`text.tic`	Dial charts only. Defines the numbers on a dial chart.
`line.tic`	Dial charts only. Defines the graduation mark that displays directly beneath the number on a dial chart.
`#dial`	Dial charts only. Defines the value that displays on the dial chart.
`#dial.alert`	Dial charts only. Defines a value (called an alert value) that renders in a dial chart using a different display.
`#dialbackground`	Dial charts only. Creates the background of a dial chart.
`#dialcenter`	Dial charts only. Creates the center of the dial on a dial chart.
`#dialbackground-border`	Dial charts only. Works with `#dialbackground` to create specific graphic effect.
`#low`	Dial charts only. Defines the historical low watermark of the data being displayed on a chart.
`#high`	Dial charts only. Defines the historical high watermark of the data being displayed on a chart.
`#XAxisTitle`	Defines the title that appears on the x-axis
`#YAxisTitle`	Defines the title that appears on the y-axis.
`.XAxisValue`	Defines the value that appears on the x-axis.
`.YAxisValue`	Defines the value that appears on the y-axis.
`.AxisLabel`	Similar to the axis value.
`.nodatafound`	Defines the text element that displays if no information is available.
`.AxisLine`	Indicates zero on charts that have negative values.
.`GridLine`	Creates the horizontal and vertical lines on the chart.
`g.dataholder rect`	Applies a blanket style to all data that displays in the chart.
`.legenditem rect`	Applies a blanket style to all rectangular items in the legend.

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:

Upload the CSS to Application Builder. See "Uploading Cascading Style Sheets".
Create a chart. See "Creating a SVG Chart".
Navigate to the Page Definition. See "Accessing a Page Definition".
Under Regions, click Chart next to the region name.

The Chart Attributes page appears.
Scroll down to the CSS section.
From Use Custom CSS, select Yes.
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:
```
/**/
```
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:

Create a chart. See "Creating a SVG Chart".
Navigate to the Page Definition. See "Accessing a Page Definition".
Under Regions, click Chart next to the region name.

The Chart Attributes page appears.
Scroll down to CSS.
From Use Custom CSS, select Yes.
In Custom CSS, Inline, enter the custom CSS styles you want to override.