Skip to Content

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.

/wp-content/uploads/2015/07/new_application_in_sap_businessobjects_design_studio_1_5_981x525_737335.png


  1. 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.

/wp-content/uploads/2015/07/chart_type_picker_in_sap_businessobjects_design_studio_1_5_737345.png



  1. 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.
  1. 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;
}


/wp-content/uploads/2015/07/display_even_menu_options_in_chart_type_picker_in_sap_design_studio_1_5_981x554_737346.png


To display only the odd menu options:


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


/wp-content/uploads/2015/07/display_odd_menu_options_in_chart_type_picker_in_sap_design_studio_1_5_981x554_737347.png

To display particular menu option using index:


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


/wp-content/uploads/2015/07/display_particular_menu_option_using_index_in_chart_type_picker_in_sap_design_studio_1_5_981x554_737348.png

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 ;
}


/wp-content/uploads/2015/07/display_particular_menu_options_in_chart_type_picker_in_sap_design_studio_1_5_981x554_737349.png

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-…

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Nithyanandam,

    Now I have to say this is a particularly useful post.  When initially experimenting with the new Chart Type Picker component I too thought it was very unusual that there were no property or script options to restrict the chart type icons or menu options.  As it stands now, there are simply too many options to choose from and not all of them are likely to be relevant for a given scenario.  This was especially surprising to me in that best practice design guidelines (including the Fiori Design Guidelines) normally recommend no more than 3 chart types for a chart picker.

    So I think your workaround provides a very good approach to resolve this issue.

    Nice one!

    Mustafa.

    (0) 
    1. Nithyanandam Venu Post author

      Hi mustafa,

      Thanks for the comment. Simillar to you, i got thought like, this will be very useful at run time.however after few mins, i realized it wont be much useful, unless there is a option to restrict.I hope,  No one prefer to see all the chart type in the dashboard . If they add some stand property to restrict this in furture,it may be more useful.

      Thanks,
      Nithyanandam

      (0) 
      1. Laurens Geraedts

        Hi Nithyanandam,

        That’s an interesting option to manage the number of graph types displayed. I was wondering if you ever tried to furthermore restrict the options within a specific type?

        Laurens.

        (0) 
        1. Nithyanandam Venu Post author

          Hi Laurens,

          Its possible. Just specify the index you want in css.

          1. .viz-controls-switchbar-switcher{ 
          2. display:none
          3. .viz-controls-switchbar-switcher:nth-child(n) {   //n can be the specified one for example 0 for first type 
          4. display:block ;
          (0) 
          1. Laurens Geraedts

            Hi Nithyanandam,

            Let me further clarify my comment with an example. From the Bar Chart below, did you ever try to only provide the top 3 entries? So it’s a more detailed way of managing the result from within a specific chart type via CSS.

            SCN CSS.png

            Laurens.

            (0) 
              1. Jiten V

                Hello Experts,

                I know its too late to comment on this thread but I was actually looking at possibility for scenario explained by Laurens.

                Even if we implement the ChartPicker in design studio dashboard , user will find many of the chart options not feasible since these chart sub types may require more measures/dimensions than given in data source and hence the user will see the error/warning if selected that type.

                I am practically facing this scenario, Ex: The screenshot below shows error when user select Bar chart with two X axis since chart is based on crosstab/data source having single measure object.

                Of course Bar Chart with Two axis is not a correct chart type to display with single measure and dimension but my point here is not to display this option in chart picker if this chart type do not fit into dimension/measure combination. This way we can avoid user complaining about this scenario which is not actually valid for them.

                chart issus.PNG

                Thanks & Regards,

                Jiten

                (0) 
                1. Nithyanandam Venu Post author

                  Hi Jiten,

                  Easy work around will be using the CSS. That is the only way we can hide the option since there is no availability of scripting sort of things.

                  Thanks,

                  Nithyanandam

                  (0) 
                  1. Jiten V

                    Thank you Nithya for your response ! I am happy to see so quick response on old thread 🙂 . It would be really great if you can please refer me some of such CSS class where i can select the chart subtype to hide. I really didnt get much of CSS script help for such scenario.

                    Regards,

                    Jiten

                    (0) 
                    1. Nithyanandam Venu Post author

                      Hi Jiten,

                      you can find the css class by simply inspecting the charttype picker. I can’t give you the exact class, since u need to make some changes dynamically using nth selector.

                      Thanks,

                      Nithyanandam

                      (0) 

Leave a Reply