1. App Builder User's Guide
  2. Managing Database Application Components
  3. Creating Charts
  4. Editing Charts

10.3.8 Editing Charts

You can alter how a chart displays by editing chart attributes in Page Designer.

See Also:

"Viewing a Page in Page Designer"

Parent topic: Creating Charts

10.3.8.1 Editing Chart Attributes

Charts have three types of attributes: Region attributes, chart Attributes, and Series attributes. When you select a chart in the Rendering tab, the Property Editor displays two tabs: Region (which contains Region attributes) and Attributes (which contains chart Attributes). Series attributes display in the Rendering tab under the chart.

To edit chart attributes:

  1. View the page containing the calendar in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.

    Page Designer appears.

    The Property Editor in the right pane displays displays two tabs: Region and Attributes. Attributes are organized in groups. To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  2. To edit the Region attributes.
    1. In the left pane (or Rendering tab), select the chart.
      The Property Editor, Region tab displays the region attributes
    2. Review and edit the region attributes in the Property Editor.
  3. To edit the chart Attributes.
    1. In the left pane (or Rendering tab), select the chart.
    2. In the Property Editor, select the Attributes tab.
    3. Review and edit the chart Attributes in the Property Editor.
  4. To edit the Series:
    1. In the Rendering tab under the chart, select the Series.
    2. Review and edit the Series attributes in the Property Editor.
  5. Click Save.

Parent topic: Editing Charts

10.3.8.2 Switching Chart Type

Once you create a chart, you can switch its chart type by editing chart attributes.

To switch a chart type:

  1. View the page containing the chart in Page Designer.
  2. In the left pane (or Rendering tab), select the chart.
    The Property Editor (right pane) displays two tabs.
  3. Edit the chart Attributes and select a new chart type:
    1. In the Property Editor, select the Attributes tab.
      The Property Editor displays chart Attributes. Attributes are organized in groups. To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.
    2. Chart, Type - Select the chart type you want to switch to. For example, Combination.
  4. Edit the Series:
    1. In the Rendering tab under the chart, select the Series.
      The Series tab appears in the Property Editor.
    2. Column Mapping - Ensure all required Column Mapping columns have been defined.

      Note:

      Column mappings may differ for different chart types, so you must ensure all required column mappings are defined for the selected chart type.

    3. Type - Select the chart series type. For example, Bar Range.
      Only certain chart types support combining different types of series on the same data plot. The Series Type attribute only displays for chart types Combination, Polar, Radar, and Range.
  5. Click Save or Save and Run Page.

Parent topic: Editing Charts

10.3.8.3 Enabling Automatic Refresh

Charts can monitor information by enabling the Automatic Refresh, Interval attribute, or by using a dynamic action with the Refresh action.

Parent topic: Editing Charts

10.3.8.3.1 Enabling the Automatic Refresh Attribute

Enabling the Automatic Refresh attribute updates the chart to reflect changes in the underlying data within a specified time interval.

To enable automatic refresh updates:

  1. View the page containing the chart in Page Designer.
  2. In the left pane (or Rendering tab), select the chart.
  3. In the Property Editor, select the Attributes tab.
  4. Find Automatic Refresh.
  5. In Automatic Refresh, Interval - Enter the interval in seconds between chart updates.
    Very small updates intervals, such as 2 seconds, are discouraged since they may cause serious database performance issues.
  6. Click Save.

Parent topic: Enabling Automatic Refresh

10.3.8.3.2 Creating a Refresh Dynamic Action

To create a Refresh dynamic action:

  1. View the page containing the chart in Page Designer.
  2. Click the Dynamic Actions tab in the left pane.
  3. Under Dynamic Actions, right-click Events and select Create Dynamic Action.
  4. Page Designer indicates what to do next. If there is an error, the Show Messages icon displays in the Page Developer toolbar.
    1. Click the Show Messages icon on the Page Designer toolbar.
      The Messages dialog displays errors that must be addressed.
    2. Select an error to highlight the associated attribute in the Property Editor.
  5. In the Property Editor, edit the following Dynamic Action attributes:
    1. Identification, Name - Enter a name of the dynamic action.
    2. Execution Options, Sequence - Specify the sequence for this component. The sequence determines the order of evaluation.
    3. When, Event - Specify the event that causes the dynamic action to fire.
    4. When, Selection Type - Select the type of page element or construct to be used to trigger the event. For examples, select the attribute in the Property Editor and click the Help tab in the center pane.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.

  6. In the Rendering tab, select the first action under True:
    1. Identification, Action - Select Refresh.
    2. Affected Elements, Selection Type - Select Region.
    3. Affected Elements, Region - Select the region containing the chart.
  7. Click Save.

See Also:

"Managing Dynamic Actions"

Parent topic: Enabling Automatic Refresh

10.3.8.4 Using Custom JavaScript with Charts

Control the look and feel of a chart by adding custom JavaScript.

Control the look and feel of a chart by adding custom JavaScript.

To use custom JavaScript:

  1. View the page in Page Designer:
    Page Designer appears.
  2. In the left pane (or Rendering tab), select the chart.
  3. In the Property Editor, select the Attributes tab.
  4. Find Advanced.
  5. In Advanced, JavaScript Initialization Code, enter the code to customize your chart.
    For example:
    function( options ){
    // Setup a callback function which gets called 
   // when data is retrieved, it allows to manipulate the series
    options.dataFilter = function( data ) {

        // e.g Set the first series of chart to the colour red
        data.series[ 0 ].color = "red";
    };
    // Set chart initialization options
    // e.g. Set chart type to Line
    options.type = "line";
    return options;
}
  6. Click Save.

    Tip:

    For more information on supported chart options, see "ojChart" in JSDoc pages for the Oracle JavaScript Extension Toolkit (JET).

Note:

The Sample Charts sample app contains a number of examples of using custom JavaScript with chart.To view sample apps, go to Sample Apps .

Parent topic: Editing Charts