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

Add and Configure the Primary Chart for the KPI_2 Dashboard Panel

  1. Add a bar chart to the default slot of the KPI_2 dashboard panel.
    1. On the canvas, navigate to Live mode (if you already aren't in Live mode), and then click the Total Items in Stock KPI.
    2. Switch to Design mode.
    3. In the Components palette, search for chart.
    4. Click Bar Chart and drag it over until you see the Dashboard Panel tag, then drop it.
    5. If the Dashboard Panel | Slots dialog box appears, 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 Properties pane for the Bar 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 rraProducts.
    5. Click Next.
      The Add Data window displays, with rra in the search field, and fscmRestcontaining "rra" expanded, and rraProducts outlined in red.

      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 #NumOfItems.
    2. Click # NumOfItems.

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

    3. Click CategoryName.

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

    4. Select CategoryName and drag it over the Colors (Series) field, then drop it.
    5. Change the Primary Key value to ProductCategoryId.
    6. Click Next.

      This time you won't set any limits.


      The Bar Chart Component Fields window displays with the Values (Y Axis) and Categories (X Axis) and Colors (Series) fields of the Bar Chart Component Fields outlined in red, and the Primary Key field outlined in red.
  4. On the Define Query stop, click Finish.
    You're in the Design mode with the first KPI selected.
    The orders-analysis, Page Designer tab displays with the Bar Chart displaying query data.

  5. Switch to the Live mode and click the second KPI to see the chart.

  6. Switch to the Design mode.
  7. Make the small quantity of bars more visually appealing.
    1. Ensure that Bar Chart is selected in Structure view.
    2. In the Properties pane, on the General tab, for Stack Values, click On.
      The orders-analysis, Page Designer tab displays with the Bar Chart displaying query data with wider bars.
  8. Test your application in Live mode.

Congratulations, you have completed this tutorial.