1. Dashboard Landing Page
  2. Add and Configure the Primary Chart for the First KPI_1 Dashboard Panel

Add and Configure the Primary Chart for the First KPI_1 Dashboard Panel

  1. Add a bar chart to the default slot of the KPI_1 dashboard panel.
    1. In the Components palette, search for chart.
    2. Click Bar Chart and drag it over Panel Title until that text is overlayed with Dashboard Panel, then drop it.
    3. If you see the Dashboard Panel | Slots dialog box, click Default.
      The orders-analysis, Page Designer tab displays with the search term "chart" and Bar Chart outlined in red in the Components section, and the Dashboard Panel|Slots window displaying on the canvas, outlined in red.

      The orders-analysis, Page Designer tab displays with the bar chart displaying on the canvas.
  2. Locate the data to add to the bar chart.
    1. In the Structure view, select Bar Chart if it's not already selected.
    2. In the Properties pane, on the Quick Start tab, click Add Data.
    3. On the Add Data dialog box, filter the data sources by entering rra.
    4. Expand fscmRestcontaining "rra".
    5. Select rraOrders.
    6. Click Next.
      The Add Data window displays, with rra in the search field, and fscmRestcontaining "rra" expanded.
      The Bar Chart Component Fields page appears.
      The Bar Chart Component Fields window displays.
  3. Map the endpoints to the Y and X axes of the bar chart.
    1. On the Map Fields stop, in the Endpoint Structure panel, scroll to find and select TotalAmount.

      It should automatically appear in the Values (Y Axis) field. If it doesn't, drag the endpoint over the field and drop it.

    2. Select OrderDate.

      It should automatically appear in the Categories (X Axis) field. If it doesn't, drag the endpoint over the field and drop it.

    3. Click Next.
      The Bar Chart Component Fields window displays with Endpoint Structure, OrderDate and TotalAmount fields outlined in red, and the Values (Y Axis) and Categories (X Axis) fields of the Bar Chart Component Fields outlined in red.
  4. Define the query so that it returns only 20 order dates at a time.
    1. On the Target panel, expand { } uriParameters.
    2. Click # limit.
    3. In the # uriParameters.limit field at the bottom of the dialog box, enter 20.
    4. Select the Static Content option, if it isn't already selected.
      The Add Data window displays with the # uriParams.limit field and the Static Content option outlined in red.
      Tip: By default, the query returns the first 20 order dates it finds. You can make the query more specific by adding an appropriate expression to the Target orderBy parameter.
    5. Click Finish.
      The bar chart displays in Live view with order dates and total amounts.
      Note: If you are not seeing the Chart in the Live view, or if you are seeing errors related to Total Amount being a String, in the Code view, replace <oj-chart-item value="[[ $current.data.TotalAmount ]]" with <oj-chart-item value="[[ Number.parseFloat($current.data.TotalAmount) ]]".If you are still not seeing the Chart in design time Live View after making these changes, try using the Preview mode.
  5. To provide a clearer layout for the dates, enable the time axis for the bar chart.
    1. Make sure that Bar Chart is selected in the Structure view.
    2. In the Properties pane, on the All tab, scroll to Time Axis Type.
    3. Change the Time Axis Type value from auto to enabled.
      The orders-analysis, Page Designer tab displays, with Bar Chart selected in the Structure view, and the Time Axis Field of the Properties pane outlined in red.
      Note: After this step, you see a series of errors in a notification at the bottom of the page due to string type mismatch. To resolve these errors:
      1. Click the Types tab, expand getallRraOrdersResponse > items > items[i], and click TotalAmount.
      2. In the Properties pane, Type field, replace String with Number.
        The Types tab displays with getallRraOrdersResponse, items, items[i] expanded, and # TotalAmount outlined in red. The Properties pane, Type field is outlined in red.
  6. To address accessibility, add a title to the dashboard panel.
    1. In the Structure view, under Defer @KPI_1_id, select the Dashboard Panel component.
    2. On the Properties pane General tab, in the Panel Title field, enter Total Orders Amount by Order Date.
      The Dashboard Panel component in the Structure view is selected and outlined in red and the Panel Title field on the Properties pane and chart title Total Orders Amount by Order Date on the canvas are outlined in red.