Table of Contents
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:
To login and create a new dashboard:
Login to the Adhoc Dashboard application.
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”:
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.
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”.
To edit the dashboard, click
Edit. The dashboard changes to Edit
mode as shown in
Figure 2.4, “System Dashboard
in Edit Mode”.
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”.
Grid
component in the
workspace and select Properties.
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.
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.
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.
Grid
component to the workspace, and align it below the first grid.Grid
component in the workspace and select Properties.
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.
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.
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.
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”
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:
Northeast:
South:
West:
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.
Bar Chart
component on to the workspace and position it below the second grid - i.e. the
States grid.
Bar Chart
component in the workspace and select Properties.
Cars
, to use the data from the
Cars
universe.
This is shown in Figure 2.17, “Set the
Data Properties of the Bar Chart”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”
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”
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”
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”
Run
.
The chart shows the number of old cars that were traded in for new cars each year.
Click the Add Cards
icon
from the cards explorer, to add a new card. A new card named card2
is added.
Navigate to the second card and drag and drop a Table
component on to the workspace.
Right click the Table
component and select Properties.
Navigate to the data tab and set the Universe as Cars
.
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.
For more information on Table, see the section called “Table”.
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.
Drag and drop a Button
component on to the workspace of Card2.
Button
component in the workspace and select Add Action.
Any
, the Action as Show Card
and the Card as Card1
Clicking this button (either a single click or a double click) will navigate back to the first card.
Drag and drop a Button
component on to Card1.
Button
component in the workspace and select Add Action.
Any
, the Action as Show Card
and the Card as Card2
Clicking this button (either a single click or a double click) will navigate to the second card.
Congratulations. Your dashboard is now created.