Chapter 2. Using Ad-hoc Dashboard

Table of Contents

Dashboard Walkthrough - Creating Your Dashboard
Part 1 - Accessing the Adhoc Dashboard application
Part 2 - Setting up the Grid Selection
Part 3 - Viewing the Data
Part 4 - Drilling Down Into the Data
Saving Your Dashboard
Previewing Your Dashboard
Publishing Your Dashboard
Deleting Your Dashboard

Dashboard Walkthrough - Creating Your Dashboard

This section walks you through creating an example dashboard step-by-step. The example uses two cards, two grids, a bar chart component, a table component and two button components.

The dashboard displays the number of cars traded in for each year for the selected US States.

The first card contains the grids, the bar chart and a button to navigate to the second card.

The second card contains the table and a button to navigate to the first card.

The first grid contains the four Regions in the US. Click a Region from the first grid to display the States in that Region on the second grid.

Click a State from the second grid to display the number of used cars that were traded in for new ones, each year, for the selected States as a bar chart.

Click a row from the the bar chart and click Submit. The second card is displayed with a table containing the details of the selected row. Click Submit from the second card, to navigate back to the first card.

The final dashboard looks as shown in Figure 2.23, “Final Dashboard” and Figure 2.26, “Table Output”

Workspace refers to the card on which you drag and drop components to create your views.

To create your dashboard, perform the actions in the following sections:

Part 1 - Accessing the Adhoc Dashboard application

To login and create a new dashboard:

  1. Login to the Adhoc Dashboard application.

  2. Click Create - Ad-hoc Dashboard and then click Cars , to use the Cars universe for your dashboard, as shown in Figure 2.1, “Create Ad-hoc Dashboard”:

    Figure 2.1. Create Ad-hoc Dashboard

    Create Ad-hoc Dashboard
  3. Select a location in the repository from the drop-down list, as shown in Figure 2.2, “Select Repository Location”. Enter the file name and click Create.

    Figure 2.2. Select Repository Location

    Select Repository Location
  4. The system creates a blank dashboard and opens it in Run mode, in a new browser tab as shown in Figure 2.3, “System Creates a Blank Dashboard”.

    Figure 2.3. System Creates a Blank Dashboard

    System Creates a Blank Dashboard
  5. To edit the dashboard, click Edit. The dashboard changes to Edit mode as shown in Figure 2.4, “System Dashboard in Edit Mode”.

    Figure 2.4. System Dashboard in Edit Mode

    System Dashboard in Edit Mode

Part 2 - Setting up the Grid Selection

  1. Click the Components tab. Drag and drop the Grid component to the workspace.

    Grid view shows unique values from a particular column in the universe. A grid is a selection mechanism to narrow down the range of values, and is used to view a summary of the data.

    For more information on the Grid component, see the section called “Grid”.

  2. Right-click the Grid component in the workspace and select Properties.
  3. Navigate to the data tab and set the Universe table to US Region as shown in Figure 2.5, “Set the Data Properties of the First Grid”.

    This populates the grid with the four US regions.

    Figure 2.5. Set the Data Properties of the First Grid

    Set the Data Properties of the First Grid
  4. Navigate to the type tab and set the Column to Region as shown in Figure 2.6, “Set the Type of the First Grid”.

    The Count and Direction properties define the layout of the grid.

    The Count value indicates that the grid is to have one row of data. The grid is set as a single selection grid - only one value from the grid can be selected at a time.

    Figure 2.6. Set the Type of the First Grid

    Set the Type of the First Grid
  5. Navigate to the selection tab and set the Type to first as shown in Figure 2.7, “Set the Selection of the First Grid”.

    This indicates that the first value on the grid is selected by default.

    Figure 2.7. Set the Selection of the First Grid

    Set the Selection of the First Grid
  6. Click Apply to apply the changes.
  7. Drag and drop another Grid component to the workspace, and align it below the first grid.
  8. Right-click the second Grid component in the workspace and select Properties.
  9. Navigate to the data tab and set the Universe table to US State as shown in Figure 2.8, “Set the Data Properties of the Second Grid”

    This specifies that the US States should be displayed on the grid.

    Figure 2.8. Set the Data Properties of the Second Grid

    Set the Data Properties of the Second Grid
  10. Navigate to the type tab and set the Column to State as shown in Figure 2.9, “Set the Type of the Second Grid”.

    The Count and Direction properties define the layout of the grid.

    Here, you also set the Count as 2 - indicating that the grid is to have two rows of data, and the direction as Down, which specifies that the rows are to be one below the other.

    In addition, the grid is set as Multiple Select. This allows multiple selection of values from the grid.

    Figure 2.9. Set the Type of the Second Grid

    Set the Type of the Second Grid
  11. Navigate to the selection tab and set the Type to first and Count to 1 as shown in Figure 2.10, “Set the Selection of the Second Grid”.

    This indicates that the first value is selected and highlighted by default.

    Figure 2.10. Set the Selection of the Second Grid

    Set the Selection of the Second Grid
  12. Navigate to the filters tab and set the properties as follows:

    Figure 2.11. Set the Region Filter

    Set the Region Filter

    Here, you select to filter values based on RegionID, that is present in the first grid (the Region grid), that is named as View-1 on your dashboard.

    The values are then filtered, and only the States that correspond to the Region selected in the first grid, are displayed in this second grid.

    The filter after selection, is shown in Figure 2.12, “The Selected Region Filter”

    Figure 2.12. The Selected Region Filter

    The Selected Region Filter
  13. Click Apply to apply the changes.
  14. Save your dashboard as mentioned in the section called “Saving Your Dashboard”.
  15. Click Run to navigate to the Run mode and check that your grid selection works. Select the Regions from the first grid and watch the second grid automatically display only those states that correspond to the selected region from the first grid.

Here are some screen shots that show you how the grid selection works:

Midwest:

Figure 2.13. Midwest-Region

Midwest-Region

Northeast:

Figure 2.14. Northeast-Region

Northeast-Region

South:

Figure 2.15. South-Region

South-Region

West:

Figure 2.16. West-Region

West-Region

Part 3 - Viewing the Data

In Part 1, you have set up the grid selection and ensured that the States corresponding to the selected Region are displayed.

In this section, you set up the bar chart to view the data for the selected States.

  1. Drag the Bar Chart component on to the workspace and position it below the second grid - i.e. the States grid.
  2. Right-click the Bar Chart component in the workspace and select Properties.
  3. Navigate to the Data tab and set the Universe as Cars, to use the data from the Cars universe. This is shown in Figure 2.17, “Set the Data Properties of the Bar Chart”

    Figure 2.17. Set the Data Properties of the Bar Chart

    Set the Data Properties of the Bar Chart
  4. Navigate to the ElxBar tab and set the Key to trade_in_year. The years are plotted on the Y-axis.

    In the Values table, set the Column to invoice_id and the Operation to Count.

    The total number of traded-in invoices for each year is plotted on the X-axis. This denotes the number of cars traded-in for the year.

    This is shown in Figure 2.18, “Set the ElxBar Properties of the Bar Chart”

    Figure 2.18. Set the ElxBar Properties of the Bar Chart

    Set the ElxBar Properties of the Bar Chart
  5. From the ElxBar tab, set the Background fill colour and the border color as shown in Figure 2.19, “Set the Background Color of the Bar Chart”

    Figure 2.19. Set the Background Color of the Bar Chart

    Set the Background Color of the Bar Chart
  6. From the ElxBar tab, set the Chart Title, the Y-Axis Title (Subtitle West), and the position of the Legend to West as shown in Figure 2.20, “Set the Title of the Bar Chart”

    Figure 2.20. Set the Title of the Bar Chart

    Set the Title of the Bar Chart
  7. Navigate to the Filters tab and set the properties as follows:

    Figure 2.21. Set the State Filter

    Set the State Filter

    Here, you select to filter values based on State, that is present in the second grid (the State grid), that is named as View-2 on your dashboard.

    The values are then filtered, and only the data for the States selected in the second grid, are displayed in this bar chart.

    This filter after selection is shown in Figure 2.22, “Set the Filter Properties of the Bar Chart”

    Figure 2.22. Set the Filter Properties of the Bar Chart

    Set the Filter Properties of the Bar Chart
  8. Click Apply to apply the changes.
  9. Save your dashboard as mentioned in the section called “Saving Your Dashboard”.
  10. Click Run to change the dashboard mode to Run.
  11. Click Reset to rest the dashboard to the default state.
  12. Select a region and state and view the data as shown in Figure 2.23, “Final Dashboard”,

    Figure 2.23. Final Dashboard

    Final Dashboard

The chart shows the number of old cars that were traded in for new cars each year.

Part 4 - Drilling Down Into the Data

  1. Click the Add Cards icon from the cards explorer, to add a new card. A new card named card2 is added.

  2. Navigate to the second card and drag and drop a Table component on to the workspace.

  3. Right click the Table component and select Properties.

  4. Navigate to the data tab and set the Universe as Cars.

  5. Navigate to the type tab and select the columns to be displayed in the table. Also, set the Page Size as desired.

    Page Size indicates the number of rows to display in one page of the table.

    Figure 2.24. Secting the Columns to be Displayed in the Table

    Secting the Columns to be Displayed in the Table

    For more information on Table, see the section called “Table”.

  6. Navigate to the filters tab and set the properties as follows:

    Figure 2.25. Set the Invoice ID Filter

    Set the Invoice ID Filter

    Here, you select to filter values based on invoice_id, that is present in the Bar Chart, that is named as View-3 on your dashboard.

  7. Click Apply to apply the changes. The final table is similar to the following:

    Figure 2.26. Table Output

    Table Output
  8. Drag and drop a Button component on to the workspace of Card2.

  9. Right-click the Button component in the workspace and select Add Action.
  10. Select the Event as Any, the Action as Show Card and the Card as Card1
  11. Ensure that the Enabled checkbox is selected.

    Figure 2.27. Button to Show Card 1

    Button to Show Card 1
  12. Click OK to save the action. The completed Card 2 with the Submit button is as follows:

    Figure 2.28. Completed Card 2

    Completed Card 2

    Clicking this button (either a single click or a double click) will navigate back to the first card.

  13. Navigate to Card 1 using the card explorer.
  14. Drag and drop a Button component on to Card1.

  15. Right-click the Button component in the workspace and select Add Action.
  16. Select the Event as Any, the Action as Show Card and the Card as Card2
  17. Ensure that the Enabled checkbox is selected.

    Figure 2.29. Button to Show Card 2

    Button to Show Card 2
  18. Click OK to save the action. The completed Card 1 with the Submit button looks as follows:

    Figure 2.30. Completed Card 1

    Completed Card 1

    Clicking this button (either a single click or a double click) will navigate to the second card.

Congratulations. Your dashboard is now created.