cancel
Showing results for 
Search instead for 
Did you mean: 

Remove/Fade out the value bubble of a sap.viz.ui5.Pie -Chart

FlorianVogt
Advisor
Advisor
0 Kudos

Hello all,

I am still new in sapui5 development. I have created a piechart.

I used this example:

<!DOCTYPE html>

<html><head>

  <meta http-equiv='X-UA-Compatible' content='IE=edge' />

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <title>OData Date Formats</title>

    <script id='sap-ui-bootstrap' type='text/javascript'

        src='https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js'

          data-sap-ui-theme='sap_bluecrystal'

       data-sap-ui-xx-fakeOS="ipad"

        data-sap-ui-libs='sap.ui.commons,sap.ui.ux3,sap.ui.table,sap.m,sap.viz'>

 

    </script>

  <script>

  var oBusinessData = [ {

                    Country : "Canada",

                    revenue : 410.87,

                    profit : -141.25,

                    population : 34789000

          }, {

                    Country : "China",

                    revenue : 338.29,

                    profit : 133.82,

                    population : 1339724852

          }, {

                    Country : "France",

                    revenue : 487.66,

                    profit : 348.76,

                    population : 65350000

          }, {

                    Country : "Germany",

                    revenue : 470.23,

                    profit : 217.29,

                    population : 81799600

          }, {

                    Country : "India",

                    revenue : 170.93,

                    profit : 117.00,

                    population : 1210193422

          }, {

                    Country : "United States",

                    revenue : 905.08,

                    profit : 609.16,

                    population : 313490000

          } ];

          var oModel = new sap.ui.model.json.JSONModel();

          setTimeout(function() {

                    oModel.setData({

                              businessData : oBusinessData

                    });

          }, 4000);

          var dataset = new sap.viz.ui5.data.FlattenedDataset({

                    dimensions : [ {

                              axis : 1,

                              name : 'Country',

                              value : "{Country}"

                    } ],

                    measures : [ {

                              name : 'Revenue',

                              value : {

                                        path : 'revenue',

                                        formatter : function($) {

                                                  return 2 * $;

                                        }

                              }

                    } ],

                    data : {

                              path : "/businessData",

                              factory : function() {

                              }

                    }

          });

          var pie = new sap.viz.ui5.Pie({

                    width : "80%",

                    height : "400px",

                    plotArea : {

                    //'colorPalette' : d3.scale.category20().range()

                    },

                    /*

                    title : {

                      visible : true,

                      text : 'Revenue By Country'

                    },*/

                    dataset : dataset

          });

     

      pie.setModel(oModel);

          pie.placeAt("summaryChart");

     

     

  </script>

  </head>

  <body class='sapUiBody'>

  <div id='summaryChart'></div>

  </body>

</html>

---------------------------------------------------------------------------------------------------------------

Now I want to remove or fade out the bubble which appears if you click on a single part of the pie chart.

What I can do?

Thanks for every help!

Regards Florian

Accepted Solutions (0)

Answers (1)

Answers (1)

kammaje_cis
Active Contributor
0 Kudos

I put it in jsbin, but did not find any bubble.

http://jsbin.com/iWOLenuW/1/edit

Can you explain your problem little more?

FlorianVogt
Advisor
Advisor
0 Kudos

Hey Krishna,

thanks for your fast answer. I try it again and you are right.

If you remove       "      data-sap-ui-xx-fakeOS="ipad"  " from the header you will see the bubble.

If I remove this tag the legend will not be scrollable anymore. I need the scrollable legend, but not the bubble if I click on an element.

Thanks for your help.

surendra_pamidi
Contributor
0 Kudos

Hi Vogt,

Use this to get scroll for legend,

  var pielegend=new sap.viz.ui5.types.legend.Common();

  pielegend.setIsScrollable(true);

and set legend for chart as below...

legend:pielegend