Create a Simple Bubble Chart SAPUI5 - .js View

[#1]

Having struggled with this part of the documentation, its time to take a break: calling up Tinder

How do you create a simple Bubble Chart with SAP UI 5 using a .js View. I do agree to have seen some combo examples using MVC and XML views. Decoding the requirements alongside other tutorials, I came up with this breakdown. other charts work, Scatter charts work but not bubble Charts.

A reference point for working charts

SAPUI5 Explored 

I add my Code below

sap.ui.jsview("views.BubbleCoy", {

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

          * @memberOf views.Bubble

          */

          getControllerName : function() {

                    return null;

          },

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf views.Companies

          */

          createContent : function(oController) {

                    var mainCoyBubbleChart = new sap.viz.ui5.controls.VizFrame("mainCoyBubbleChart", { 

                            type:"bubble",

                    width : "100%",

                              height : "50%",

                              line : {

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

                          },

                              title : {

                                        visible : true,

                                        text : 'Copmpany Aggregation' 

                              },

                              xAxis: {

                                  //title: { visible: true, text : "Friend Aggregation" },

                                  //scale: new sap.viz.ui5.types.Axis_scale({fixedRange:true, Value: 5, minValue: 0, maxValue: 12})

                          },

                              dataset : topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({

                                        // a Bar Chart requires exactly one dimension (x-axis)

                                        dimensions : [ {

                                                  axis : 1, // must be one for the x-axis, 2 for y-axis

                                                  name : 'Company',

                                                  value : "{Name}"

                                        }],

                                        // it can show multiple measures, each results in a new set of bars

                                        // in a new color

                                        measures : [ 

                                        {

                                            group:1,

                                    name : 'Business Value', // 'name' is used as label in the Legend

                                              value : '{BusinessValue}' // 'value' defines the binding for the

                                    },

                                        {

                                        group:2,

                                        name : 'Friend Value', // 'name' is used as label in the Legend

                                                  value : '{friendValue}' // 'value' defines the binding for the

                                        }

                                        ],

                                        // 'data' is used to bind the whole data collection that is to be

                                        // displayed in the chart

                                        data : {

                                                  path : "/"

                                        }

                              })

                    });

//                    var YAxis = mainBubbleChart.getYAxis();

//          YAxis.setVisible(true);

                    mainCoyBubbleChart.setVizType('bubble');

                    mainCoyBubbleChart.setUiConfig({'applicationSet': 'fiori'});

                    return mainCoyBubbleChart;

}

});

If you need more information I can provide.

Thanks

[Former Member · Accepted solution]

Hi,

Found the reason .

You have declared only two groups in measure.

For scatter chart it's fine, but for bubble chart, its throwing below error

Uncaught [50005] - bubbleWidth : does not meet minimum or maximum number of feeds definition.

Need to investigate about this issue further.

Let me know if you need further help.

Cheers!!

[Former Member · Accepted solution]

No more Issues

You WIn

[Former Member]

Hi John,

Its again the same issue. BTW when you are replacing Bubblechart to ScatterChart, the scatterchart id is different, so its working fine. If you change the scatterChart id to "bubbleCoy" it wont work.

Go to line no 30, in index.html file. Change the view id {id:"bubbleCoy", to id: 'bubbleCoyView'

Follow Naming convention in your project, for example

if you are working with chart, give id name relevant to that.

For example

1. "BubbleCoyChart" for bubblechart

2. "BubbleCoyView"  for bubble view.

It will avoid duplicate and its easy to understand.

[Former Member]

Thanks once again for all the help on this, however, I am sorry, I have tried out the recommendation on your last post and I cant move past this yet.

My Point is, Why would a Scatter chart render, while a Bubble Chart with the same code and data structure not render, see image of code and output below

With Scatter

With Bubble

Index View

[Former Member]

It's killing us.

Could you please share your latest code in github, I will take a look.

Thanks.

[Former Member]

Please see Code shared here

jomesili/HANAXSws · GitHub

[Former Member]

Hi,

Check working example below.

Bubble Chart

[Former Member]

Thanks This works perfectly when I ran it. However, replacing the relevant part and adding that to my .js View, it doesn't render.

Note that there is no Error, as, other components and charts continue to render properly above and below this item.

Updated Code with your input

sap.ui.jsview("views.BubbleCoy", { 

          /** Specifies the Controller belonging to this View.

          * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

          * @memberOf views.Bubble

          */ 

          getControllerName : function() { 

                    return null; 

          }, 

          /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

          * Since the Controller is given to this method, its event handlers can be attached right away.

          * @memberOf views.Companies

          */ 

          createContent : function(oController) {

            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();

        oModel.setData({

                   businessData : oBusinessData

                 });

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

                     dimensions : [ {

                       axis : 1,

                       name : 'Country',

                       value : "{Country}"

                     } ],

                     measures : [ {

                       group : 1,

                       name : 'Population',

                       value : '{population}'

                     }, {

                       group : 2,

                       name : 'Profit',

                       value : '{profit}'

                     }, {

                       group : 3,

                       name : 'Revenue',

                       value : '{revenue}'

                     } ],

                     data : {

                       path : "/businessData",

                       factory : function() {

                       }

                     } 

                   });

                   var mainCoyBubbleChart = new sap.viz.ui5.Bubble({

                     id : "bubble",

                     width : "80%",

                     height : "400px",

                     plotArea : {

                     },

                     title : {

                       visible : true,

                       text : 'Profit and Revenue By Country'

                     },

                     dataset : dataset

                   });

                   mainCoyBubbleChart.setModel(oModel);

//                    var YAxis = mainBubbleChart.getYAxis();

//          YAxis.setVisible(true);

                    return mainCoyBubbleChart; 

} 

}); 

INDEX Header

    <head>

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

    <title> Friend Manager</title>

  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->

    <script id="sap-ui-bootstrap"

        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

        data-sap-ui-theme="sap_goldreflection"

        data-sap-ui-libs="sap.ui.commons,sap.ui.ux3, sap.ui.table,sap.viz"></script>

   <script src="js/bootstrap.min.js"></script>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<script> 

               sap.ui.localResources("views");

               var chartView = sap.ui.view({id:"companies", viewName:"views.Companies", type:sap.ui.core.mvc.ViewType.JS}); 

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

               chartModel.loadData("services/topTenCoysPull.xsjs");

               chartView.setModel(chartModel); //data tied to SAP.Core

               chartView.placeAt("barDisp"); 

               // loading the bubble or Scatter Chart after creating it in Views/Bubble.js

               var bubbleView = sap.ui.view({id:"bubble", viewName:"views.Bubble", type:sap.ui.core.mvc.ViewType.JS}); 

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

               bubbleModel.loadData("services/bubbleService.xsjs"); 

               bubbleView.setModel(bubbleModel); //data tied to SAP.Core

               bubbleView.placeAt("bubbleDisp");

               var donughtView = sap.ui.view({id:"donught", viewName:"views.Donught", type:sap.ui.core.mvc.ViewType.JS});

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

  donoughtModel.loadData("services/pullAvgService.xsjs");

  donughtView.setModel(donoughtModel); //data tied to SAP.Core

               //donughtView.setData()

               donughtView.placeAt("donughtDisp");

    </script>

    </head>

    <body class="sapUiBody row"  role="application">

    <div class="container-fluid">

     </div>

     <div class="row-fluid">

         <div class="span3 bs-docs-example ">

          <nav>

            <img src="img/Logo.png" alt=""/></nav>

     </div>

     <div class="span9">

     <div id="bubbleDisp"  class="bs-docs-example"></div>

     <br>

     <div class="row-fluid ">

      <div class="span6 bs-docs-example ">

      <div id="barDisp"></div>

      </div>

     <div class="span6 bs-docs-example ">

      <div id="donughtDisp"></div>

     </div>

     </div>

     </div>

      </div>

    </body>

</html>

Thanks again

[Former Member]

Hi,

I have faced below problems, When I use your code in project

1. view name in your view file is not matching in your html file. Highlighted the differences. Make it consistent.

View File

sap.ui.jsview("views.BubbleCoy", {
          /** Specifies the Controller belonging to this View.
          * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
          * @memberOf views.Bubble
          */
          getControllerName : function() {
                    return null;
          },
          blah blah blah
});


index.html file

               var bubbleView = sap.ui.view({id:"bubble", viewName:"views.Bubble", type:sap.ui.core.mvc.ViewType.JS});
               var bubbleModel = new sap.ui.model.json.JSONModel();
               bubbleModel.loadData("services/bubbleService.xsjs");
               bubbleView.setModel(bubbleModel); //data tied to SAP.Core

               bubbleView.placeAt("bubbleDisp");

2. adding element with duplicate id 'bubble'

Either change view id "bubble" to "bubble1" or your chart mainCoyBubbleChart  id from "bubble" to "bubble1"

After fixing above issues, it worked for me

Let me know if you need any more help.

[Former Member]

Actually made a mistake as I was testing with another file and not the Index.html, hence the bubble id issue, This issue still persists. Right after I change from  var mainCoyBubbleChart = new sap.viz.ui5.Bubble("mainCoyBubbleChart", {  ..... to var mainCoyBubbleChart = new sap.viz.ui5.Scatter("mainCoyBubbleChart", {

the Scatter Chart shows up

the bubble id relates to the Friend Aggreation chart, while the bubbleCoy id Refers to the chart below

var bubbleView = sap.ui.view({id:"bubble", viewName:"views.Bubble", type:sap.ui.core.mvc.ViewType.JS}); 

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

               bubbleModel.loadData("services/bubbleService.xsjs"); 

               bubbleView.setModel(bubbleModel); //data tied to SAP.Core

               bubbleView.placeAt("bubbleDisp");

               var bubbleCoyView = sap.ui.view({id:"bubbleCoy", viewName:"views.BubbleCoy", type:sap.ui.core.mvc.ViewType.JS}); 

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

               bubbleCoyModel.loadData("services/bubbleCoyService.xsjs"); 

               bubbleCoyView.setModel(bubbleCoyModel); //data tied to SAP.Core

               bubbleCoyView.placeAt("bubbleCoyDisp");

[Former Member]

So you mean to say scatter chart is working fine, when you change scatter to bubble its not working.

Without seeing your code, its tough to predict

Can you clarify below queries

1. Are you getting any error in console?

2. Are you referring correct bubble view name in bubble view object in index.html file.

If possible share your code in jsbin

[Former Member]

Hey Man,  Thanks

I finally found what my problem was, just as you said it was some conflicting ids, however, how do the ID assignments work

this worked for me  found in declaring the Bubble chart  in my BubbleCoy.views.js file

var mainCoyBubbleChart = new sap.viz.ui5.Bubble( "mainCoyBubbleChart",{ .... bla bla bla

While this did not work

var mainCoyBubbleChart = new sap.viz.ui5.Bubble( "bubbleCoy",{ .... bla bla bla

Well Lessons learned.

Solved

[Former Member]

Hi John,

In last previous post, you have shared this code,

Index.html file

var bubbleCoyView = sap.ui.view({id:"bubbleCoy", viewName:"views.BubbleCoy", type:sap.ui.core.mvc.ViewType.JS}); 
               var bubbleCoyModel = new sap.ui.model.json.JSONModel();
               bubbleCoyModel.loadData("services/bubbleCoyService.xsjs"); 
               bubbleCoyView.setModel(bubbleCoyModel); //data tied to SAP.Core

               bubbleCoyView.placeAt("bubbleCoyDisp");

Chart code as follows, var mainCoyBubbleChart = new sap.viz.ui5.Bubble( "bubbleCoy",{ .... bla bla bla

Id referred in bubbleCoyView(index.html) is same as mainCoyBubbleChart. Highlighted in red.

Now you changed it to var mainCoyBubbleChart = new sap.viz.ui5.Bubble( "mainCoyBubbleChart",{ .... bla bla bla

Highlighted difference in blue color.

Since there is no id duplicate, it worked fine.

Cheers!!

[Former Member]

New development now. Having had the Bubble with the sample data within the Chart as provided by you, I tried resetting the data source to pull from a database and voila, it fails again, on setting the vizType to Scatter, a Scatter chart shows up so I am kinda back to the same place.

Please check the code I share to see how I bind data to the Scatter Chart, Why doe this same method not work when its a bubble chart

see updated code here

SAPUI5 Bubble Charts