1. Dashboard Landing Page
  2. Add and Configure the Third Panel and Chart for the KPI_1 Dashboard Grid

Add and Configure the Third Panel and Chart for the KPI_1 Dashboard Grid

  1. Add another dashboard panel and pie chart to the KPI_1 dashboard grid.
    1. In the Components palette, search for panel.
    2. Click Dashboard Panel and in the Structure view, drag it over Dashboard Grid, then drop it.
    3. If the Slot dialog box appears, click Default.
      The orders-analysis, Page Designer tab displays with the search term "panel" and Dashboard Panel outlined in red in the Components section, and the Dashboard Grid|Slots window displaying on the canvas, outlined in red.
    4. In the Components palette, search for chart.
    5. Click Pie Chart and drag it over the upper-left corner of the Dashboard Panel region, then drop it.
    6. In the Dashboard Panel | Slots dialog box, click Default.
      The orders-analysis, Page Designer tab displays with the search term "chart" and Pie Chart outlined in red in the Components section, and the Dashboard Grid|Slots window displaying on the canvas, outlined in red.

      The orders-analysis, Page Designer tab displays with the second Pie Chart displaying on the canvas.
      Tip: If you don't see any chart, check the Structure view to see if the chart is a peer of the panel instead of a child. If it is, to make it a child, click Pie Chart and drag it over Dashboard Panel, then drop it. In the Dashboard Panel | Slots dialog box, click Default.
  2. Locate the data to add to the pie chart.
    1. In the Properties pane for the Pie Chart, on the Quick Start tab, click Add Data.
    2. In the Add Data dialog box, filter the data sources by entering rra.
    3. Expand fscmRestContaining"rra".
    4. Select rraOrders.
    5. Click Next.
      The Add Data window displays, with rra in the search field, and fscmRestcontaining "rra" expanded, and rraOrders outlined in red.

      The Pie Chart Component Fields window displays.
  3. Map the endpoints to the slice values and colors of the pie chart.
    1. On the Map Fields stop, in the Endpoint Structure panel, scroll to TotalAmount.
    2. Click # TotalAmount.

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

    3. Click CustomerLastName.

      It should automatically appear in the Slice Colors field. If it doesn't, drag the endpoint over the field and drop it.

    4. Click Next.
      The Pie Chart Component Fields window displays with the Slice Values and Slice Colors fields of the Pie Chart Component Fields outlined in red.
  4. Define the query so that it returns only 10 customers 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 10.
    4. Select the Static Content option, if it isn't already selected.
      The Add Data window displays with the #limit field of the Traget panel selected and the input number 10 displaying in the # uriParams.limit field, outlined in red, and the Static Content option outlined in red.
  5. Click Finish.
    The orders-analysis, Page Designer tab displays with the second Pie Chart displaying query data.
    Tip: If you're not seeing the Pie Chart, or if you are seeing errors related to Total Amount being a String, in the Code view of the editor, add Number.parseFloat in front of the variable for the Total Amount in the Chart, as follows: <oj-chart-item value="[[ Number.parseFloat($current.data.TotalAmount) ]]" series-id="[[ $current.data.CustomerLastName ]]" group-id="[[['Undefined']]]"></oj-chart-item>. If you are still not seeing the Chart in design time Live View after making these changes, try using Preview mode.
    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 getallRraOrdersResponse3 > items > item[i], and click TotalAmount.
    2. In the Properties pane, Type field, replace String with Number.
      The Types tab displays with getallRraOrdersResponse3, 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 third dashboard panel.
    1. In the Structure tab, under Defer @KPI_1_id, select the third Dashboard Panel component.
    2. On the Properties pane General tab, in the Panel Title field, enter Top 10 Customers by Order Amount.
      The Dashboard Panel component in the Structure view is selected and the Panel Title field on the Properties pane is outlined in red, and pointing to the title of the second Pie Chart panel on the canvas, Top 10 customers by Order Amount.