From spreadsheets to IBM Business Monitor dashboards in under an hour, Part 2: Customizing a dashboard created by the CSV tool

Learn how to customize all parts of the IBM Business Monitor dashboards produced by the CSV tool. Customizations include sorting and formatting, adding and configuring widgets, changing display types, and advanced Cognos® report editing. Make your dashboard look just the way your users want in a matter of minutes. This content is part of the IBM Business Process Management Journal.

Share:

John Alcorn (jalcorn@us.ibm.com), Senior Software Engineer, IBM

author photo

John Alcorn is the chief architect for the IBM Business Monitor product. He has worked as a software engineer with IBM for 20 years, with more than 15 years on WebSphere products, including roles in both product development and software services. John has been a technical leader with the Business Monitor product for eight years, and works closely with the wider IBM Business Process Manager (BPM), IBM Operational Decision Manager (ODM), and IBM BlueWorks Live teams.

John is IBM-certified in XML technologies, SOA technologies, and in multiple WebSphere products, and is Sun certified in Java programming. He currently is privileged to work with an excellent team of software engineers at IBM's Research Triangle Park lab in North Carolina.



04 December 2013

Also available in Chinese Russian

Overview

In Part 1 of this series, you learned how to create a dashboard in IBM Business Monitor based on simple CSV-formatted spreadsheets. The dashboard we created has three pages, one corresponding to each spreadsheet. In this article, you'll learn how to customize each page of that dashboard, so that the end result can more closely meet the needs of the business users of that dashboard.

First we'll cover customizing the Instances widget on the first page of the dashboard. We'll describe basic information on how to edit a page of a Business Space, as well as how to personalize a widget on that page. Then we'll dive in to things like sorting and formatting, such as showing currency values with a dollar sign. Finally, you'll learn how to add a new widget to the page and configure it to show external content.

Next you'll learn how to customize the KPI widget, including things like changing the gauge type and the display size, and how to arrange elements in a grid. You'll also learn how to customize the name of a widget.

Finally, you'll learn how to customize Cognos Business Intelligence (BI) reports. You'll learn how to make changes directly from the report, such as changing the chart type, and how to save the changes that you make. Then you'll learn how to launch into the full report editor tool to do more advanced customization, such as changing the shape of the bars and having the report display the values in US dollars.

Instances

First, let's look at how to customize a widget. Go to the Order Processing Instances page in your generated dashboard, and click on Edit Page, as shown in Figure 1.

Figure 1. Editing a dashboard page
Editing a dashboard page

Click to see larger image

Figure 1. Editing a dashboard page

Editing a dashboard page

Click the down arrow at the top right of the widget, and choose Edit Settings, as shown in Figure 2.

Figure 2. Editing widget settings
Editing widget settings

Click to see larger image

Figure 2. Editing widget settings

Editing widget settings

A dialog will appear in which you can customize what you'd like to see in this widget. First, sort the rows in the widget by the Order ID. Click the Sort tab, then select Order ID, click the right arrow, and click Default Sort, then Apply, as shown in Figure 3.

Figure 3. Specifying instance sorting
Specifying instance sorting

Click to see larger image

Figure 3. Specifying instance sorting

Specifying instance sorting

Next, let's tell the widget that the Price metric should be displayed with a dollar sign. Click the Format tab, and click on the Currency drop-down menu for the Price metric. Choose USD (US dollars), then click OK.

Figure 4. Specifying instance formatting
Specifying instance formatting

Click to see larger image

Figure 4. Specifying instance formatting

Specifying instance formatting

Next, since this page is a bit bare with only a single widget, let's add another widget. Scroll down the palette of widgets at the top of the page and drag the Web Site widget to the bottom of the page.

Figure 5. Adding a new widget
Adding a new widget

Click to see larger image

Figure 5. Adding a new widget

Adding a new widget

In keeping with our Apple™ motif, let's configure this widget to display the Apple web site. As before, choose Edit Settings on the widget drop-down, then enter http://www.apple.com in the dialog that appears, and click Apply.

Figure 6. Configuring the web site widget
Configure the web site widget

Click to see larger image

Figure 6. Configuring the web site widget

Configure the web site widget

Now click Finish Editing, to return the dashboards to their normal state.

Figure 7. Finish editing
Finish editing

Click to see larger image

Figure 7. Finish editing

Finish editing

Figure 8 shows the instance page customized just the way you want it!

Figure 8. Instances fully customized
Instances fully customized

Click to see larger image

Figure 8. Instances fully customized

Instances fully customized

KPIs

Now let's jump to the KPIs tab (we'll save the Cognos customization, which is the most in-depth, for last) and customize how the the KPIs are displayed. Click the Order Processing KPIs tab. You'll see four KPIs and no alerts. Let's customize this page, too.

First switch from half gauges to full gauges, and make them bigger and two to a row. Click Edit Page.

Figure 9. Editing the KPI page
Editing the KPI page

Click to see larger image

Figure 9. Editing the KPI page

Editing the KPI page

Click Edit Settings from the widget drop-down.

Figure 10. Editing the KPI settings
Editing the KPI settings

Click to see larger image

Figure 10. Editing the KPI settings

Editing the KPI settings

Click the Layout tab of the resulting dialog. Choose Full Gauge from the Select a display type drop-down. Change the Columns field to 2. Choose Large from the Select a size for visualization elements drop-down. Then click OK.

Figure 11. Customizing the KPI layout
Customizing the KPI layout

Click to see larger image

Figure 11. Customizing the KPI layout

Customizing the KPI layout

Now let's customize the name of this widget. As you can see, it currently has the word KPIs repeated twice, which looks awkward. From the widget drop-down, select Rename.

Figure 12. Renaming the KPI widget
Renaming the KPI widget

Click to see larger image

Figure 12. Renaming the KPI widget

Renaming the KPI widget

In the dialog that appears, remove the second occurrence of KPIs, then click Save.

Figure 13. KPI widget renamed
KPI widget renamed

Click to see larger image

Figure 13. KPI widget renamed

KPI widget renamed

Click Finish Editing to complete the customization of the KPI tab.

Figure 14. KPIs fully customized!
KPIs fully customized!

Click to see larger image

Figure 14. KPIs fully customized!

KPIs fully customized!

Cognos reports

Next, let's return to the Order Processing Reports tab, and customize our Cognos reports a bit. What if you were more in the mood for a donut than a pie? Just right-click on the pie chart, choose Change Display Type, then choose the More.

Figure 15. Configure pie chart
Configure pie chart

Click to see larger image

Figure 15. Configure pie chart

Configure pie chart

A Change Display dialog will appear. Click Pie, Donut on the left, then choose the fourth option, whose hover text says Donut with 3-D Visual Effect, then click OK.

Figure 16. Change the pie chart display
Change the pie chart display

Now you see your Orders by Location chart as a donut instead of a pie. To save this change, choose Action, then Save changes for me for this chart.

Figure 17. Save donut chart
Save donut chart

Click to see larger image

Figure 17. Save donut chart

Save donut chart

There are two vertical bar charts on our page (technically, Cognos calls these column charts). For variety, let's switch one of them to a horizontal bar chart. Right-click on the Price by Date chart, and choose Change Display Type, then More.

Figure 18. Configure column chart
Configure column chart

Click to see larger image

Figure 18. Configure column chart

Configure column chart

This time in the Change Display dialog, click Bar, then choose the second entry, whose hover text is Bar with 3-D Visual Effect, then click OK.

Figure 19. Change column chart display
Change column chart display

Now you have one horizontal bar chart and one vertical. To save this change to the chart, choose Action, then Save changes for me.

Figure 20. Save bar chart
Save bar chart

Click to see larger image

Figure 20. Save bar chart

Save bar chart

Now let's do something a bit more advanced. Let's launch the Cognos Business Insight Advanced tool to edit our new horizontal bar chart to show dollar signs on the axis labels. This tool allows editing of all aspects of the report directly from the dashboard. Click Action, then Edit Report. This will take a few seconds to load.

Note: An iFix to Cognos BI 10.1.1 is necessary to enable this report editing in newer browsers, such as the Firefox ESR version 24 we are using here.

Figure 21. Edit bar chart
Edit bar chart

Click to see larger image

Figure 21. Edit bar chart

Edit bar chart

Click on the chart, then choose Primary Axis => Axis Labels from the drop-down, as shown in Figure 22. Note that on the left you can see the details of this Cognos cube, such as the available measures and dimensions, and current dimension member values.

Figure 22. Configure axis labels
Configure axis labels

Click to see larger image

Figure 22. Configure axis labels

Configure axis labels

Click the Restore button for Properties (in the bottom left, as shown in Figure 23), which is minimized by default.

Figure 23. Axis label properties
Axis label properties

Click to see larger image

Figure 23. Axis label properties

Axis label properties

Now click the blue ellipsis button to the right of Data format and choose Currency from the Format type drop-down. Select USD for currency, as shown in Figure 24, then click OK.

Figure 24. Data format - currency
Data format - currency

Click to see larger image

Figure 24. Data format - currency

Data format - currency

Now the chart axis is shown in US Dollars. Let's do one more thing while in this report editing tool: let's change from traditional rectangular bars to cones for each year. Click on one of the bars, then on the far left under Bar shape choose the third icon, whose hover help says Cone, as shown in Figure 25.

Figure 25. Cone chart
Cone chart

Click to see larger image

Figure 25. Cone chart

Cone chart

We've only scratched the surface of what's possible in this report editing tool, but that's enough for now. Exit out of the tool by clicking Done in the top right.

Figure 26. Done editing
Done editing

Click to see larger image

Figure 26. Done editing

Done editing

That returns us back to the regular dashboards. Now, our horizontal bar chart shows its axis labels in US dollars, and each "bar" is actually a cone. Once again, save the report by choosing Action, then Save changes for me.

Figure 27. Save cone chart
Save cone chart

Click to see larger image

Figure 27. Save cone chart

Save cone chart

Now our reports are displaying just the way we want. Figure 28 shows the full Order Processing Reports page, showing all six Cognos reports. You may need to zoom the browser out (Ctrl -) to see it all at once.

Figure 28. Cognos reports fully customized!
Cognos reports fully customized!

Click to see larger image

Figure 28. Cognos reports fully customized!

Cognos reports fully customized!

Note that we have "slices" for only three countries in our donut, and "cones" for only 2011 and 2012. In Part 3, we'll process a new spreadsheet that will send events with values for additional countries and years, which will add additional slices and cones to this page.

Conclusion

Congratulations! You've now customized all parts of your dashboard! You've learned how to customize Instances, KPIs, and Cognos reports, including using the Cognos report editor to make reports look just the way you want. In Part 3, you'll learn how to define alerts, you'll see the results as you feed in further sample data, and you'll learn how you can further edit the monitor model in Eclipse if needed.

Resources

Learn

Get products and technologies

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Business process management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Business process management
ArticleID=954678
ArticleTitle=From spreadsheets to IBM Business Monitor dashboards in under an hour, Part 2: Customizing a dashboard created by the CSV tool
publish-date=12042013