CSS Tips & Tricks: Customizing the ChartTypePicker

With the release of SAP BusinessObjects Design Studio 1.5, there have been many new and interesting features and components. One feature that I found particularly interesting was the Chart Type Picker. There are 5 menu buttons to change the chart type at runtime and even more can be added.  However, when designing my dashboard, I found there is a challenge when restricting the number of menu options to less than 5 or when restricting the display of the particular chart type buttons. While there is no such option inside SAP BusinessObjects Design Studio, I have found a way for it to be achieved through a workaround using CSS.

N-th child CSS selector

To do this, I have used the concept of n-th child CSS selector, which is defined as ,

“The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula” – w3schools

To know more nth-child selector, visit: http://nthmaster.com/

Using a workaround to restrict menu options

In the following steps, I will show you how to restrict the number of menu options in a Chart Type Picker in SAP BusinessObjects Design Studio 1.5.

1. Create a new application in SAP BusinessObjects Design Studio 1.5.

2. Drag and drop the chart type picker component from the component panel. As you can see, there are 5 menu options: Bar/column chart, line chart, pie chart, scatter plot and radar chart. Additional chart options can be added using the property Additional types.

3. Now save the CSS script explained below as a separate stylesheet to the repository (create a notepad and save it as CSS). For more information on uploading a custom CSS file to your SAP BusinessObjects Design Studio application, visit here: http://scn.sap.com/docs/DOC-41398.

4. I will now show you the different ways in which you can display the menu options and the CSS script for each of these ways.

To display only the even menu options:

.viz-controls-switchbar-switcher:nth-child(odd) {
display:none;
}

To display only the odd menu options:

.viz-controls-switchbar-switcher:nth-child(even){
display:none;
}

To display particular menu option using index:

.viz-controls-switchbar-switcher{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(1) {
display:block ;
}

To display particular menu options selection (0 to 2):

.viz-controls-switchbar-switcher{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(-n+2) {
display:block ;
}

Now, copy and paste the required CSS script as a separate stylesheet and save it as mentioned above.

Nth CSS selector comes in handy when you want to do some specific selection of elements to apply CSS. Using this, we were able to customize the chart type picker with ease. Thank you CSS!

Source:http://visualbi.com/blogs/design-studio/css-tips-tricks-customizing-the-chart-type-picker-in-sap-businessobjects-design-…