Dashboards

Dashboards

This tutorial will show how to create a dashboard display through the following set of steps:

  1. Create an operation of type Execution Group. This operation type allows several sub operations to be executed as a group. The sub operations will basically be the separate operations that were created for each chart or instrument you want to include in the Dashboard.

    1. In the Advanced » JSP File field, input:

      1. For Row Layout:

      1. /wow/fusion/jsp/fusionDashboardRows.jsp

      2. or

      3. /wow/fusion/jsp/fusionDashboardRows2.jsp

      1. For Column Layout:

      1. /wow/fusion/jsp/fusionDashboardColumns.jsp

      2. or

      3. /wow/fusion/jsp/fusionDashboardColumns2.jsp

      1. See Figure 1

      1. :

  1. In the Display » Properties field,delete any existing text, and enter in the Dashboard properties group:

    1. Now create the “Dashboard – Column Layout”

      1. You can use an existing operation or create a new operation as desired. Let’s select two operations for the left-hand column (column1). It can be any type of chart; we will use the Pie3D chart for now. The two main changes we have to make are setting its Usage ID and altering the chart’s size.

      2. As in the figure shown below, set the “Parent Operation” and a “Usage ID.” For the “Parent Operation,” select the Dashboard operation you want this chart to belong to. For the “Usage ID,” set it by entering a numeric value. This can be any numeric value, but should be remembered or written down, and preferably a number that can be grouped with similar operations in your dashboard (for our example, let’s use 1001 and 1002 for the two charts on the left, and then 1010 for the large chart on the right).

        1. See Figure 2: Also, set the width and height of your chart. This will vary and can be altered depending on how you want to set the look and feel of the dashboard, but for the purposes of our example, the sizes are set like this:

          1. For the two small charts on the left column, they are 225 pixels for both the width and height

          2. For the large chart on the right column, it has a width of 700, and a height of 465

          3. If you are using custom objects for an instrument, these objects may need to be resized

        2. Let’s return to the Dashboard execution group operation we just created in Step 3. Since we are creating a column layout, we are going to add our charts to the execution group, referencing the operation’s Usage ID we just set. In the Dashboard properties group, enter in the information below:

          1. :

          2. See Figure 3

      1. The col1 property refers to the first column. Columns are inserted into the dashboard from left to right. Within each col# property (where # refers to which column), add in the chart’s Usage ID, which is inserted from top to bottom in each column. The Usage ID should be comma-separated when listed in the col# property, and each col property should be separated by a semi-column.

      2. If you have more charts you would like to display, you can easily add it by setting its Usage ID, place it into one of the existing columns or adding a new column, then resizing it to adjust the look and feel.

      3. Update this Dashboard operation, and then run the operation to see your new Dashboard.

  1. Now create the “Dashboard – Row Layout.” This is nearly identical to Step 4 above, but the charts are laid out in rows. In the Dashboard properties, you specify the row by using the row# property (where # refers to which row). Rows are inserted at the top, and then each new row is inserted below the previous. We will have one chart for row1, and three charts for row2. Similar to the column layout, you can easily add more charts by setting its Usage ID, place it into an existing row or adding a new row, then resizing it to adjust the look and feel.

    1. You can use an existing operation or create a new operation as desired. Let’s use a multi-series stacked chart for the first row (a single-series chart would suffice also), and then three operations for the bottom, or second, row. For aesthetic and layout purposes, use smaller charts/instruments (such as an LED or angular gauge, or a pie chart) so that we can fit the three charts under the larger one. The two main changes we have to make are setting its Usage ID and altering the chart’s size.

    2. As in the figure shown below, set the “Parent Operation” and a “Usage ID.” For the “Parent Operation,” select the Dashboard operation you want this chart to belong to. For the “Usage ID,” set it by entering a numeric value. This can be any numeric value, but should be remembered or written down, and preferably a number that can be grouped with similar operations in your dashboard (for our example, let’s use 1001 for the chart on the top row, and then 1010, 1011, and 1012 for three charts on the bottom row).

      1. c. Also, set the width and height of your charts. This will vary and can be altered depending on how you want to set the look and feel of the dashboard, but for the purposes of our example, the sizes are set like this:

        1. For the three small charts on the bottom row, they are set so that the total width can span the width of the wider chart on top.

        2. ii. For the large chart on top, it has a width of 900, and a height of 500.

        3. If you are using custom objects for an instrument, these objects may need to be resized

      2. Now return to the Dashboard execution group operation just created in Step 3. Since we are creating a row layout, we are going to add our charts to the execution group, referencing the operation’s Usage ID we just set. In the Dashboard properties group, enter in the information below:

    3. The row1 property refers to the first row. Rows are inserted into the dashboard from top to bottom. Within each row# property (where # refers to which row), add in the chart’s Usage ID, which is inserted from left to right in each row. The Usage ID should be comma-separated when listed in the row# property, and each row property should be separated by a semi-column.

    4. f. If you have more charts you would like to display, you can easily add it by setting its Usage ID, place it into one of the existing columns or adding a new column, then resizing it to adjust the look and feel.

    5. Update this Dashboard operation, and then run the operation to see your new Dashboard.

While these are rather simple examples, more complex dashboards can be created using the row and column layouts, adjusting the size of the charts, and altering the locations to achieve the desired aesthetics. Also, remember that each chart or instrument can be customized themselves.

        1. row1:1001;

        2. row2:1010,1011,1012;

          1. col1:1001, 1002; col2:1010;