Previous
Previous
 
Next
Next

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

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 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.

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:

  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.