(Example) Configure the Chart Form Control

This example shows how to configure the Chart form control.

Background and Setup

Result

This example shows how to configure the Chart form control in the Finance Manager Approval form to show a chart of how much a customer spends on the items. The data in this chart is retrieved from a Microsoft Excel file with an Auto-Lookup form control.


Form Opens New Tab

Prerequisites

Good to Know

Step 1: Configure the Chart Form Control with a Lookup

First, configure a chart form control with a lookup in an eForm.

How to Start

  1. Click App Builder.

    Click App Builder
  2. On the App Builder Home screen, click All Apps.

    Click All Apps
  3. On the All Apps screen, on the Sales Invoice app, click Edit Edit icon.

    Click Edit
  4. On the App Details screen, hover over the Finance Manager Approval form, and click Edit Edit icon.

    Click Edit
  5. On the Finance Manager Approval form, in the Tool Box, open the Telerik Controls tab.

    Open Telerik Tab
  6. On the Telerik Controls tab, drag the Chart form control onto your eForm.

    Search Chart

Procedure

  1. On the Finance Manager Approval form, put your cursor over the Chart form control, and the form control toolbar shows.

    Chart Form Control Toolbar
  2. Click Edit Properties Edit Properties icon.

    Edit Properties icon
  3. On the Field Settings - Chart screen, in the Label field, enter Invoice Items.

    Enter Label Name
  4. Click the Configure tab.

    Click Configure tab
  5. On the Configure tab, in the Minimum Value field, enter 500.

    This is an example value. The value you enter in this field should make the chart show the data that is the most relevant for a runtime app user. This depends on the data the Chart form control is likely to show based on your business requirements.


    Enter Minimum Value
  6. In the Maximum Value field, enter 12000.

    This is an example value. The value you enter in this field should make the chart show the data that is the most relevant for a runtime app user. This depends on the data the Chart form control is likely to show based on your business requirements


    Enter Maximum Value
  7. In the Series Defaults field, select Column.

    Select Column
  8. In the List Type field, select Lookup List.

    Select Lookup List
  9. Click Configure Chart DataSource Configure Chart DataSource icon.

    Configure Chart DataSource
  10. On the Configure Data Source screen, in the Lookup Source field, select Sales Invoice Items.

    In this example, the lookup name is Sales Invoice Items. For information about how to create the Sales Invoice Items lookup, refer to (Example) Configure an Auto-Lookup Form Control with Microsoft Excel


    Select Lookup Source
  11. In the Category Column field, select Product.

    Select Category Column
  12. In the Series Column field, select Total Price.

    Select Series Column
  13. Click Ok.

    The Field Settings - Chart screen shows.


    Field Settings Screen
  14. To save the changes, click Close Screen Close Screen icon.
  15. On the Finance Manager Approval form, expand the Chart form control to the width to show on the eForm.

    Expand Chart Form Control

Step 3: (Optional) Run the App

Next, run the app.

For more information, refer to My Apps screen

How to Get the App

This example is based on the Sales Invoice app from the AgilePoint NX App Store. Use this procedure to get the app.

Prerequisites

Good to Know

  • This procedure is optional. It is provided so you can test the example with an out-of-the-box app.
  • This is part of the Background and Setup procedures, but many users preferred this step to appear after the example, not before it.

Procedure

  1. Click App Store.

    App Store
  2. In the CATEGORY section, click Sales.

    App Store screen
  3. Click the Sales Invoice app.

    Sales Invoice screen
  4. On the Sales Invoice screen, click Add.

    Sales Invoice screen
  5. On the Trust App screen, click Trust it.
  6. Click Return to site.