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

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

  1. Add a dashboard panel and pie chart to the KPI_1 dashboard grid.
    1. If not already there, switch to the Design mode.
    2. In the Components pane, search for panel.
    3. Click Dashboard Panel and in the Structure view, drag it over Dashboard Grid, then drop it.
    4. If the Slot dialog box appears, click Default.
      Note: The dashboard panel might appear below the first graph (as seen in this screenshot) or next to it depending on your screen size.

      The Dashboard Panel component in the Structure view is selected and outlined in red and the dragged and dropped dashboard panel component displays below the graph, the area is outlined in red.
    5. In the Components palette, search for chart.
    6. Click Pie Chart and drag it over the upper-left corner of the Dashboard Panel region, then drop it.
    7. If the Dashboard Panel | Slots dialog box appears, 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 Panel|Slots window displaying on the canvas, outlined in red.

      The orders-analysis, Page Designer tab displays with the Pie Chart displaying on the canvas.
      Tip: If the chart appears in the wrong region, check the Structure view. The chart should be a child of Dashboard Panel and not a peer. If you see it's a peer, as shown in this screenshot, click Pie Chart and drag it over Dashboard Panel, then drop it to make it a child. In the Dashboard Panel | Slots dialog box, click Default.
      The orders-analysis, Page Designer tab displays with the Pie Chart component a peer of Dashboard Panel in the Structure view, the components are outlined in red, and the pie chart on the canvas located in the wrong region is outlined in red.
  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. On 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.
      You're in the Map Fields stop.
      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 OrderStatus.

      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.

      This time you won't set any limits.


      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. On the Define Query stop, click Finish.
    The orders-analysis, Page Designer tab displays with the Pie Chart on the canvas displaying as 100%.
    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.OrderStatus ]]" 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 getallRraOrdersResponse2 > items > item[i], and click TotalAmount.
    2. In the Properties pane, Type field, replace String with Number.
      The Types tab displays with getallRraOrdersResponse2, items, items[i] expanded, and # TotalAmount outlined in red. The Properties pane, Type field is outlined in red.
  5. To address accessibility, add a title to the second dashboard panel.
    1. If not already there, switch to the Design mode.
    2. In the Structure tab, under Defer @KPI_1_id, select the second Dashboard Panel component.
    3. On the Properties pane General tab, in the Panel Title field, enter Order Status Distribution.
      The Dashboard Panel component in the Structure view is selected and outlined in red and the Panel Title field on the Properties pane is outlined in red, and pointing to the title of the Pie Chart panel on the canvas, Order Status Distribution.