Skip to Content

How to create a secondary axis chart in Jitterbit App Builder

This article will step you through how to create a Chart that has a Secondary Axis in App Builder. Using Secondary Axis you can present a Chart with two vertical axis showing different types of data, for example Quantity and Order Totals. By default, App Builder assigns multiple Value Columns to the same vertical axis, which is likely not what you are attempting to do. Here is an example of a Chart with a secondary axis defined:

Customerorderchart

To create a Chart instead with two separate Vertical Axis, follow this guide.

The first step to creating any Chart in App Builder is to have a Business Rule that contains the data you want to display. For the purpose of this scenario we will assume we have a Business Object or Chart Rule already created for OrderDetails (Total by Employee). This Business Object joins the Order and Order Detail tables, and contains Columns for OrderDetail.Quantity, Orders.Employee_ID, and an expression that derives an Order Total dollar amount (Alias as OrderTotal).

To create a secondary axis chart

  1. From the App Workbench click + Page
  2. Provide a Name for the Page and click Create. For example: Customer Orders
  3. Click Next
  4. Select a Menu to link the page from and click Next. For example: Reports
  5. Select the Full Page layout and click Next
  6. Review proposed updates and click Finish
  7. Click the Proceed button
  8. Click the Chart option and click Next
  9. Locate the Business Rule created for this chart, click Select, and click Next
  10. Review proposed updates and click Finish
  11. Go to the Action Drawer > Design this page and select the chart
  12. Confirm the Chart Type is set correctly. For example: Column
  13. Verify the Panel Name is what you'd like to display. For example: Order Details
  14. Click the + Control button in the Controls panel
  15. Select the Column that contains data you wish to display along the first vertical axis. For example: Quantity
  16. Set the Control Type as Value
  17. Click the + Control button
  18. Select the Column that contains data you wish to display along the second vertical axis. For example: Order Total
  19. Set the Control Type as Value, and set the Chart Axis (in Additional Attributes) to Secondary
  20. Click the + Control button
  21. Select the Column that contains data you wish to display along the horizontal axis. For example: Customer_ID
  22. Set the Control Type to Category
  23. Navigate back to the app view and refresh the screen. You should now see your Chart display with the Secondary Axis information presented.