Previous Next JavaScript must be enabled to correctly display this content

## 10.3.5 Adding a Chart in Page Designer

Add a chart to a page by creating it manually in Page Designer.

To add a chart to an existing page in Page Designer:

1. View the page to contain the chart in Page Designer.
2. In the Gallery at the bottom of the central pane, click Regions and locate Chart.
   The Gallery lists all controls or components you can add to a page. Passing the cursor over a control or component displays a tooltip that describes it.
3. From the Gallery,
   1. Right-click Chart to view the context menu.
   2. Select Add To and then the desired location.

   Tip:

   You can also click Chart in the Gallery and drag it to the appropriate location in the Layout tab.

4. Page Designer indicates what to do next. 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. Edit the Series:
   1. In the Rendering tab under the chart, expand the Series node and select the new series.
   2. Under Series node, select a series.
   3. Source, Location - Select the location of the database you want to use. Options include:

      - Local Database - Data is sourced from a local database.

      - REST Enabled SQL - Data is sourced from a remote database, where the connection is defined using REST Enabled SQL. To create or maintain REST Enabled SQL references, navigate to Shared Components, REST Enabled SQL Databases.

      - REST Source - Data is sourced from a RESTful web service defined using REST Data Sources. To create or maintain REST Data Sources, navigate to Shared Components, REST Data Sources.

      - Duality View - Data is sourced from a Duality View Source defined using Duality Views within Shared Components.

      - JSON Source - Data is sourced from a JSON Source defined using JSON Sources within Shared Components. JSON Sources include tables with JSON columns or JSON Collection Tables.

      - Sample Data - Data is sourced from a built-in sample data set.

   4. Column Mapping, Label - Select the column name to be used for defining the label(s) of the x-axis on the chart. For a Stock chart, the column should be of data type Date/Timestamp, to represent the stock information on a time axis
   5. Column Mapping, Value - Select the column name to be used for defining the value on this chart. For a Box Plot chart, this column will be used for defining the minimum, quartiles, median, and maximum values of the numerical data set.

   Note:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

6. Expand the Axes node:

   Tip:

   The Axes node only displays for chart types that support axes (such as area, bar, bubble, combination, line, line with area, polar, radar, range, scatter, and stock).

   1. In the Rendering tab under the chart, expand the Axes node.
   2. Under Axes node, select an Axis.
   3. Edit the required axis attributes and define any data formatting to be applied to the axis values.
7. 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.
8. Edit the chart Attributes:
   1. In the Property Editor, select the Attributes tab.
   2. Edit the required chart attributes.
9. Click Save or Save and Run Page.

Parent topic: Creating Charts