Previous Next JavaScript must be enabled to correctly display this content

## 10.3.7 Editing Charts

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

- Editing Chart Attributes
  Learn about editing chart Region attributes, chart Attributes, and Series attributes.
- Switching Chart Type
  Change the chart type by editing chart Attributes.
- Enabling Automatic Refresh
  Monitor chart information by enabling the Automatic Refresh, Interval attribute, or by using a dynamic action with the Refresh action.
- Using Custom JavaScript with Charts
  Control the look and feel of a chart by adding custom JavaScript.

See Also:

Viewing a Page in Page Designer

Parent topic: Creating Charts

### 10.3.7.1 Editing Chart Attributes

Learn about editing chart Region attributes, chart Attributes, and Series 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.7.2 Switching Chart Type

Change the 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.7.3 Enabling Automatic Refresh

Monitor chart information by enabling the Automatic Refresh, Interval attribute, or by using a dynamic action with the Refresh action.

- 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.
- Creating a Refresh Dynamic Action
  Learn about creating a Refresh dynamic action.

Parent topic: Editing Charts

#### 10.3.7.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.7.3.2 Creating a Refresh Dynamic Action

Learn about 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, Sequence - Specify the sequence for this component. The sequence determines the order of evaluation.
   3. Execution, Event Scope - Review the scope of the event. Scope determines when the event is evaluated a second or successive time.
   4. Execution, Type - Choose the type of execution method for the Dynamic Action. Options include Immediate (default), Debounce, and Throttle.
   5. When, Event - Specify the event that causes the dynamic action to fire.
   6. When, Selection Type - Select the type of page element or construct to be used to trigger the event. What displays next, depends upon selected element or construct.

   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 and edit the attributes:
   1. Identification, Name - Enter the name of the action to identify what the action does (for example, select Refresh Chart).
   2. Identification, Action - Specify which action you want to perform (for example, select Refresh).
   3. Affected Elements, Selection Type - Select the type of page components to be affected when this action executes (for example, select Region).
   4. Affected Elements, Region - Select the region containing the chart.
   5. Execution, Sequence - Review the sequence for this component. The sequence determines the order of execution.
   6. Execution, Event - Review the selected dynamic action event (for example, Refresh Chart).
   7. Execution, Fire When Event Result Is - Specifies the selected dynamic action event (for example, Refresh Chart).
   8. Execution, Fire on Initialization - Enable this option. For a refresh dynamic action, this option causes the dynamic action to fire when the page loads.
7. Click Save.

See Also:

Managing Dynamic Actions

Parent topic: Enabling Automatic Refresh

### 10.3.7.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";
               return data;
           };
           // 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 learn more, see Sample Apps and Installing Apps from the Gallery.

Parent topic: Editing Charts