Creating Charts

About SVG Plug-in Support

The Adobe SVG plug-in can handle data encoded in UTF-8, UTF-16, ISO-8859-1, and US-ASCII. Encoding of an SVG chart is determined by the database access descriptor (DAD) database character set. If the DAD character set is not UTF8, AL32UTF8, AL16UTF16, WE8ISO8859P1, or US7ASCII, SVG charts may not render properly in the Adobe SVG plug-in.

About Creating Charts

You define a chart in Oracle HTML DB using a wizard. For most chart wizards, you select a chart type and provide a SQL query using the following syntax:

SELECT link, label, value
FROM   ...

Where:

• link is a URL.

• label is the text that displays in the bar.

• value is the numeric column that defines the bar size.

For example:

SELECT null, ename, sal
FROM   scott.emp
WHERE  deptno = :P101_DEPTNO

To create a dial chart, select a dial chart type and provide a SQL query using the following syntax:

SELECT value , maximum_value [ ,low_value [ ,high_value] ]
FROM   ...

Where:

• value is the starting point on the dial.

• maximum_value is the possible highest point on the dial.

• low_value and high_value are the historical low and high values.

For example:

SELECT dbms_random.value(500, 1200), 1300, dbms_random.value(100, 200)
FROM DUAL

Table 6-5 describes the chart types available in Oracle HTML DB.

Creating a New Chart

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.

Editing Chart Attributes

Once you have created a chart, you can alter its display by editing chart attributes on the Chart Attributes page.

To access the Chart Attributes page:

1. Navigate to the Page Definition:

   1. Navigate to the Workspace home page.

   2. Click the Application Builder icon.

   3. Select an application.

   4. Select a page.

      The Page Definition appears.

2. Under Regions, click Chart next to the name of the chart region you want to edit.

   The Chart Attributes page appears.

   Note that removing the chart title (that is, the Chart Title attribute) may negatively impact the location and display of the chart legend.

Understanding Chart Cascading Style Sheet Classes

When you create a new chart, Oracle HTML DB 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 6-6 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 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 Oracle HTML DB. See "Uploading Cascading Style Sheets".

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

3. Navigate to the Page Definition:

   1. Navigate to the Workspace home page.

   2. Click the Application Builder icon.

   3. Select an application.

   4. Select a page.

      The Page Definition appears.

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

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 New Chart".

2. Navigate to the Page Definition:

   1. Navigate to the Workspace home page.

   2. Click the Application Builder icon.

   3. Select an application.

   4. Select a page.

      The Page Definition appears.

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.

Enabling Asynchronous Updates

You can create charts that monitor information by enabling the Asynchronous Update attribute on the Chart attributes page. Enabling this attribute updates the chart to reflect changes in the underlying data within a specified time interval.

To enable asynchronous updates:

1. Create a chart. See Creating a New Chart.

2. Navigate to the Page Definition:

   1. Navigate to the Workspace home page.

   2. Click the Application Builder icon.

   3. Select an application.

   4. Select a page.

      The Page Definition appears.

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

   The Chart Attributes page appears.

4. Scroll down to Refresh.

5. From Asynchronous Update, select Yes.

6. In Update Interval (Seconds), enter the interval in seconds between chart updates. For optimal performance, select an interval that is greater than 2 seconds.

When Asynchronous Update is enabled, a timestamp displays on the chart indicating that last update.

To disable the Asynchronous Update timestamp:

1. Navigate to the Chart Attributes page.

2. Locate the CSS section.

3. From Use Custom CSS, select Yes.

4. In Custom CSS, Inline edit #timestamp as follows:

   #timestamp{display:none;}
   

Displaying Charts in Other Languages

To display a chart in another language, you edit the text and tspan classes to reflect the correct language.

To display a chart in another language:

1. Navigate to the Chart Attributes page. See "Editing Chart Attributes".

2. Scroll down to CSS.

3. From Use Custom CSS, select Yes.

4. In Custom CSS, Inline, edit the text and tspan classes to reflect the correct language. The following example demonstrates how to change a chart to Korean:

   text{font-family:Batang;fill:#000000;}
   tspan{font-family:Batang;fill:#000000;}